React native alert: How to use this component to show Alert

Alert react native is a component to show alert. In this guideline, we will deliver you further information about this component including how to use it to show Alert.

What is Alert react native?

Firstly, we need to understand what Alert react native is. It is an API that works on both iOS and Android. You can use it to show an alert dialog with specific titles and messages. Also, it uses an alert ()method to prompt an alert dialog. Optionally, this dialog will provide you with a list of buttons, including combinations of neutral, negative and positive. Tapping these buttons will call the respective onPress callback and dismiss the alert. By default, the only button will be a positive ( OK) button

Often, React Native Alert can work on both Android and iOS. However, entering text in an alert is only on iOS

Alert react native in iOS

On iOS, you can specify any number of buttons. Each one will optionally specify a style, which is one of default, cancel or destructive

React native alert in Android

When it comes to Android, the Alert button can be specified with 3 at most buttons: neutral, negative and positive. 

  • If you specify only one button, it’ll be the positive one ( for example, “OK”)
  • Two buttons means “ negative” and “ positive” ( such as “ Cancel”, “ OK”)
  • In case you specify three buttons, it will be “ neutral”, “ negative”, “ positive” ( such as “ later”, “ Cancel”, “ OK”)

On Android, the by default alerts can be dismissed by clicking outside the alert box. This event can be handled by providing an optional parameter, with an onDismiss call back property { onDismiss: () => {} }. Alternatively, this can be carried out using the property {cancelable: false}.

Read

React native tabs component examples and navigation libraries

React native slider: The most popular components you should explore

How to show Alert react native?

Now, we will show you how to show React Native alert. Firstly, you need to import Alert in Code using the following command

import { Alert} from ‘react-native’

After that, render using the code below

Alert.alert(

  ‘Heading’,

  ‘Body’,

  [{

    text: ‘option1’,

    onPress: () => handler

  },..]

)

Alert Example

To understand further about Alert react native, consider the Alert Example below

First, you need to import React in our code

import React from ‘react’;

After that, import all the components that we are going to use

import { Alert, Button, View, SafeAreaView, StyleSheet } from ‘react-native’;

Then, use the following code to show Alert react native:

const App = () => {

  const simpleAlertHandler = () => {

    alert(‘Hello I am Simple Alert’);

  };

  const twoOptionAlertHandler = () => {

    Alert.alert(

      ‘Hello’,

      ‘I am two option alert. Do you want to cancel me ?’,

      [

        { text: ‘Yes’, onPress: () => console.log(‘Yes Pressed’) },

        {

          text: ‘No’,

          onPress: () => console.log(‘No Pressed’),

          style: ‘cancel’,

        },

      ],

      { cancelable: false }

      If you click outside of alert, it will not cance

    );

  };

  const threeOptionAlertHandler = () => {

    Alert.alert(

      ‘Hello’,

      ‘I am three option alert. Do you want to cancel me ?’,

      [

        { text: ‘May be’, onPress: () => console.log(‘May be Pressed’) },

        text: ‘Yes’, onPress: () => console.log(‘Yes Pressed’) },

        { text: ‘OK’, onPress: () => console.log(‘OK Pressed’) },

      ],

      { cancelable: true }

    );

  };

  return (

    <SafeAreaView style={{ flex: 1 }}>

      <View style={styles.container}>

        {/*To generate simple alert*/}

        <Button title=”Simple Alert” onPress={simpleAlertHandler} />

        {/*To generate two option alert*/}

        <Button

          title=”Alert with Two Options”

          onPress={twoOptionAlertHandler}

        />

        {/*To generate three option alert*/}

        <Button

          title=”Alert with Three Options”

          onPress={threeOptionAlertHandler}

        />

      </View>

    </SafeAreaView>

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: ‘center’,

    justifyContent: ‘center’,

    backgroundColor: ‘#ecf0f1’,

  },

});

export default App;

Outcome

The output will look like this

  • On iOS
React native alert
  • On Android
on Android

In conclusion

That’s the fundamental knowledge about Alert react native. Hopefully after this, you will be able to use this component to show Alert. However, in case you need any further help, or have any questions about React JS in general, don’t hesitate to contact ArrowHitech with our React JS development services . Contact us here!

Tags

Share