how do I style an Alert element in react-native?

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}     )