React Native Alert With Two Option Example

Dec 07, 2021

Hi Guys,

In this blog, I will explain you how to create alert box with two option in react native. You can easily create simple alert with two option in react native.

Here, I will give you full example for simply use two option in alert box using react native as bellow.

Step 1 : Create project

In the first step Run the following command for create project.

expo init Nicesnippets 

Step 2 : App.js

In this step, You will open App.js file and put the code.

import React, { Component } from 'react'; 
import { Alert, Button, View, StyleSheet } from 'react-native';
export default class Nicesnippets extends Component {
  twoOptionsAlertFunction = () => {
    Alert.alert(
      'Hello',
      'Alert with two option.',
      [
        { text: 'Yes', onPress: () => console.log('Yes') },
        { text: 'No', onPress: () => console.log('No') },
      ],
      { cancelable: false }
    );
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={{marginVertical: 10}}>
          <Button title='Alert with Two Options' onPress={this.twoOptionsAlertFunction} color="#009933"/>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Step 3 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...