React Native: Alert example & explanation

Last updated on April 28, 2020 A Goodman Loading... Post a comment

Alert is a commonly used API in React Native which can launch a dialog with title, message, and buttons.

Example and explanation

Create a new React Native project with React Native CLI or Expo, then replace the default code in App.js (or App.tsx if you prefer Typescript) with the code below:

import React from 'react';
import {StyleSheet, View, Alert, Button} from 'react-native';

const App = () => {
  const showAlert = () => {
    return Alert.alert(
      // the title of the alert dialog
      'My Title',

      // the message you want to show up
      'Today is a beautiful day',

      // buttons
      // On iOS there is no limit of how many buttons you can use, but on Android three is the maximum
      // If you're developing an app for both platforms, don't use more than three buttons
      [
        // the first button
        {
          text: 'Agree',
          onPress: () => console.log('Agree'),
        },

        // the second button
        {
          text: 'Disagree',
          onPress: () => console.log('Disagree'),
        },

        // the third button
        {
          text: 'Bla Bla',
          onPress: () => console.log('Bla Bla'),
        },
      ],
    );
  };

  return (
    <View style={styles.screen}>
      <Button title="Click Me" onPress={showAlert} />
    </View>
  );
};

// just some styles for our app
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Your app should look like this when you run it:

Happy coding and have a nice day 🙂

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles