alert react native

1import React, { useState } from "react";
2import { View, StyleSheet, Button, Alert } from "react-native";
3
4const App = () => {
5  const createTwoButtonAlert = () =>
6    Alert.alert(
7      "Alert Title",
8      "My Alert Msg",
9      [
10        {
11          text: "Cancel",
12          onPress: () => console.log("Cancel Pressed"),
13          style: "cancel"
14        },
15        { text: "OK", onPress: () => console.log("OK Pressed") }
16      ]
17    );
18
19  const createThreeButtonAlert = () =>
20    Alert.alert(
21      "Alert Title",
22      "My Alert Msg",
23      [
24        {
25          text: "Ask me later",
26          onPress: () => console.log("Ask me later pressed")
27        },
28        {
29          text: "Cancel",
30          onPress: () => console.log("Cancel Pressed"),
31          style: "cancel"
32        },
33        { text: "OK", onPress: () => console.log("OK Pressed") }
34      ]
35    );
36
37  return (
38    <View style={styles.container}>
39      <Button title={"2-Button Alert"} onPress={createTwoButtonAlert} />
40      <Button title={"3-Button Alert"} onPress={createThreeButtonAlert} />
41    </View>
42  );
43}
44
45const styles = StyleSheet.create({
46  container: {
47    flex: 1,
48    justifyContent: "space-around",
49    alignItems: "center"
50  }
51});
52
53export default App;

1// Works on both Android and iOS
2Alert.alert(
3  'Alert Title',
4  'My Alert Msg',
5  [
6    {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
7    {
8      text: 'Cancel',
9      onPress: () => console.log('Cancel Pressed'),
10      style: 'cancel',
11    },
12    {text: 'OK', onPress: () => console.log('OK Pressed')},
13  ],
14  {cancelable: false},
15);
16

1//I was going through the same thing and I found a way to style it. in styles.xml add:
2
3//In AppTheme add:
4
5<item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
6//Then:
7
8<style name="AlertDialogTheme" parent="Theme.AppCompat.Dialog.Alert">
9    <item name="android:background">#00397F</item>
10    <item name="android:colorPrimary">#00397F</item>
11    <item name="android:colorAccent">#0AAEEF</item>
12    <item name="android:buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
13    <item name="android:buttonBarPositiveButtonStyle">@style/PositiveButtonStyle</item>
14</style>
15
16<style name="NegativeButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
17    <item name="android:textColor">#F0A90F</item>
18</style>
19
20<style name="PositiveButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
21    <item name="android:textColor">#F0A90F</item>
22</style>
23//Play with it and add more customized values as needed.