如何在 react-native 中设置 Alert 元素的样式？

Question

I'm working with react-native and I have created an Alert element.

Alert.alert(
    'Warning',
    'bla bla bla',
    [
           {text: 'OK', onPress: () => console.log('OK Pressed')},
    ]
)

Now I'd like to apply some style to it. Let's say I want to apply to it a red background color and white color for the text.

How can I achieve this? Is it possible?

Answer 1

There actually is a way to customize the text on the buttons but you're limited to what is provided... Below is the type definition from react native. Then a simple example showing a red button. Basically the "default" is blue, "cancel" is bold but still blue and "destructive" is red.

**
 * An Alert button style
*/
export type AlertButtonStyle = $Enum<{
/**
* Default button style
*/
'default': string,
/**
* Cancel button style
*/
'cancel': string,
/**
* Destructive button style
*/
'destructive': string,
}>;


Alert.alert("Look out!",
        "Hitting reset will wipe all the app's data on your phone. This cannot be undone!",
        [
        {text: 'Reset', onPress: this._doSomethingSerious, style: 'destructive'},
        {text: 'Cancel'},
        ],
        {cancelable: false}
    )

Answer 2

You can use a custom library like react-native-modalbox .

You'll be able to style the modal as you like:

        <Modal style={{background: 'red'}} ref={"modal1"}>
          <Text style={{color: 'white'}}>Basic modal</Text>
          <Button onPress={this.toggleSwipeToClose} style={styles.btn}>Disable swipeToClose({this.state.swipeToClose ? "true" : "false"})</Button>
        </Modal>

You can open the modal using

openModal1(id) {
    this.refs.modal1.open();
  }

Check out the example to see more options.

Bonus : If you want to find a good library for react-native, try js.coach

Answer 3

I don't think this is possible, because the Alert component of react-native is something included in Android and iOS and cannot be modified :/

I recommend this kind of similar probleme here !

See ya !

Answer 4

I've been looking for this in android/rn sources.

Looking at the implementation code, it instantiates an AlertDialog.Builder , and looking at the android original source code for the AlertDialog.Builder , the constructor with only context uses a resolveDialogTheme with themeResId=0 . Anyway, the important part about this method is this:

} else {
   final TypedValue outValue = new TypedValue();
   context.getTheme().resolveAttribute(R.attr.alertDialogTheme, outValue, true);
   return outValue.resourceId;
}

The fallback style/theme is alertDialogTheme , so you can override the alert dialog default theme with android:alertDialogTheme like this:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:alertDialogTheme">@style/ThemeAlert</item>
    </style>

    <style name="ThemeAlert" parent="Theme.AppCompat.Light.Dialog.Alert">
        <!-- This one changes buttons text color -->
        <item name="colorAccent">#152849</item>
    </style>
</resources>

I needed to change the text for default buttons, so this worked for me (at least on RN 0.61.5), but I'm not sure about which props could be changed.

Of course, this doesn't solve changing colors at runtime... if that's really needed you probably should use a lib or write a native module yourself.