React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.
In this article, we will be learning how to create toast in React Native.
Creating React Native App:
Step 1: We’ll be using expo to create the react native app. Install expo-cli using the below command in the terminal.
npm install -g expo-cli
Step 2: Create a react native project using expo.
expo init "gfg"
Step 3:Now go to the created project using the below command.
cd "gfg"
Project Structure: It will look like the following.
Adding the Toast: We can easily add toast in our react native app. For this, we are going to use the ToastAndroid API of react-native.
Example: Add the below code in the App.js file.
Javascript
import React from "react"; import { ToastAndroid,Button, View, Text } from "react-native"; const GfGApp = () => { const GfGToast = () => { ToastAndroid.showWithGravity( "This is the demo text!!!!!!! ", ToastAndroid.SHORT, ToastAndroid.BOTTOM ); }; return ( <View style={{ marginTop: 200 }}> <Text style={{fontSize:18}}> neveropen React Native Toast </Text> <Button title="Toggle Toast " onPress={() => GfGToast()} /> </View> ); }; export default GfGApp; |
Here first we are creating our toast using the ToastAndroid.showWithGravity function. Then we are toggling the toast every time the user presses the button.
Step to run the application: Now run the application using the below command in the terminal.
npm run web
Output:
