Home » React JS

Simple Alerts in React Native Application

In this article, we learn how to code better in react native app development? In this article, we will learn how to create simple alerts in a react native application?
Submitted by Godwill Tetah, on February 13, 2020

Alerts are very important in app development because it could be used to output a warning or success message.

In react native, creating an alert is as simple as in Vanilla JavaScript.

Below is a simple example where we will create an alert after a button is clicked.

As usual, we will, first of all, begin by importing the required components from the react-native library like the View, Text and The button we will be using for the alert.

Open your App.js file and type the following,

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

export default function App () {
  return (
    <View style={styles.container}>

      <Text> SIMPLE ALERTS </Text>
    <Button
  onPress={() => {
    alert('I LOVE JESUS!!!');
  }}
  title="CLICK"
/>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Output

As you can see above, an event handler function for the onPress event was added to create the alert.

Alerts can go way more complex more than just creating ordinary or simple alerts.

So that's it for the simple alert! Happy Coding!

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!