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