How to create a Banner in react-native ?

React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI’s for both platforms.

Prerequisites:

• Basic knowledge of reactjs.
• Html, css and javascript with ES6 syntax.
• NodeJs should be installed in your system (install).
• Jdk and android studio for testing your app on emulator (install).

Approach: In this article, we will create a banner in react native using material design. We will use react-native-paper library to create it. Banner is used to display a significant message and corresponding actions.

In our project, we will display input fields to capture user data and a button. With on click of that button, the banner will appear on the top of the screen with related actions. We will see the approach step-by-step.

Below is the step by step implementation:

Step 1: Create a project in react-native using the following command:

npx react-native init DemoProject

Step 2: Install react-native paper using the following command:

npm install react-native-paper

Step 3: Create a components folder inside your project. Inside components folder create a file Banner.js

Project Structure: It will look like this

Step 4: In Banner.js, we have imported the Banner component from the react-native -paper. We will use useState and useEffect hooks to update the status of the components.

A Banner uses the following props:

• visible: It can be true or false. It is a mandatory prop that is responsible for showing or hiding of the Banner component.
• actions: Action items to show in the banner. An action item should contain the following properties:
  • label: label of the action button (required)
  • onPress: callback that is called when the button is pressed (required)

Implementation: Write down the code in respective files.

Banner.js

import React, { useState } from "react";
import { View, StyleSheet, Alert } from "react-native";
import { Banner, Button, TextInput } from "react-native-paper";

const BannerComponent = () => {
    const [visible, setVisible] = useState(false);
    const [Email, setEmail] = useState("");
    const [phone, setPhone] = useState("");

    return (
        <View>
            <Banner
                visible={visible}
                actions={[
                    { label: "Modify", onPress: () => setVisible(false) },
                    {
                        label: "Proceed",
                        onPress: () => {
                            setVisible(false);
                            setEmail("");
                            setPhone("");
                            Alert.alert("Thanks for your Confirmation");
                        },
                    },
                ]}
            >
                Your details has been captured. It will select in an hour.
            </Banner>

            <TextInput
                style={styles.input}
                label="Email id"
                value={Email}
                onChangeText={(text) => setEmail(text)}
            />

            <TextInput
                style={styles.input}
                label="Phone"
                value={phone}
                onChangeText={(text) => setPhone(text)}
            />

            <Button onPress={() => setVisible(true)}>Submit</Button>
        </View>
    );
};

export default BannerComponent;

const styles = StyleSheet.create({
    input: {
        margin: 20,
    },
});

App.js

import React from "react";
import type { Node } from "react";
import { View } from "react-native";
import BannerComponent from "./components/Banner";

const App: () => Node = () => {
    return (
        <View>
            <BannerComponent />
        </View>
    );
};

export default App;

Step to run the application: Run the application using the following command:

npx react-native run-android

Output: