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 .

Answer 1

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.