Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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?

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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}
    )
over 4 years ago · Santiago Trujillo Report

0

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

over 4 years ago · Santiago Trujillo Report

0

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 !

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!