How to change Alert button color in React Native?

Question

In Native Android, we can change the button color in Alert Dialog as mentioned here.

How to perform similar styling for Alert in React Native?

Here is my code for Alert:

Alert.alert(
    'Alert Title',
    'Alert Message / Description?',
    [
        { text: 'No', onPress: () => this.actionNo() },
        { text: 'Yes', onPress: () => this.actionYes() }
    ],
    { cancelable: false }
);

Note: This is not duplicate. Here I've asked about how to use Alert dialog styling, without changing the implementation to Model.

Possible duplicate of [how do I style an Alert element in react-native?](https://stackoverflow.com/questions/41665902/how-do-i-style-an-alert-element-in-react-native) — Ashish Yadav, Sep 06 '19 at 04:16

score 12 · Answer 1 · answered Mar 18 '20 at 08:03

I was going through the same thing and I found a way to style it. in styles.xml add:

In AppTheme add:

<item name="android:alertDialogTheme">@style/AlertDialogTheme</item>

Then:

<style name="AlertDialogTheme" parent="Theme.AppCompat.Dialog.Alert">
    <item name="android:background">#00397F</item>
    <item name="android:colorPrimary">#00397F</item>
    <item name="android:colorAccent">#0AAEEF</item>
    <item name="android:buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
    <item name="android:buttonBarPositiveButtonStyle">@style/PositiveButtonStyle</item>
</style>

<style name="NegativeButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:textColor">#F0A90F</item>
</style>

<style name="PositiveButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:textColor">#F0A90F</item>
</style>

Play with it and add more customized values as needed.

How to change Alert button color in React Native?

1 Answers1