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

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 !