how do I style an Alert element in react-native?
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
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 !