{"id":9553,"date":"2024-06-13T05:37:45","date_gmt":"2024-06-13T05:37:45","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=9553"},"modified":"2024-06-13T05:40:17","modified_gmt":"2024-06-13T05:40:17","slug":"how-to-display-toast-notifications-in-react-native-app","status":"publish","type":"post","link":"https:\/\/www.dianapps.com\/blog\/how-to-display-toast-notifications-in-react-native-app\/","title":{"rendered":"How to Display Toast Notifications in React Native App"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Have you ever come across notifications that vanish from the screen after a certain time? Did you ever find it astonishing and wonder what\u2019s it called? Well, those notifications are nifty tools commonly named <\/span><i><span style=\"font-weight: 400;\">Toast Notifications<\/span><\/i><span style=\"font-weight: 400;\"> that can be used to display information without using enough screen space.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In a nutshell, they are used to display non-critical pieces of information that are supplementary in nature and require zero to minimum user action. For instance, when you open your Gmail application and write a mail to XYZ person you must notice that when you hit the Send button, a notification appears on the bottom left corner of the screen that says \u201cSending message..\u201d or \u201cMessage Sent\u201d as shown in the below screenshot:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9565 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image10-2.png\" alt=\"React Native Notification\" width=\"691\" height=\"389\" srcset=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image10-2-640x360.png 640w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image10-2-400x225.png 400w\" sizes=\"(max-width: 691px) 100vw, 691px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">A few of the other examples can be:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Opening an eCommerce app and seeing a pop-up message that disappears after you scroll the screen.<br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">When you are watching a YouTube video a suggested message appears on the screen.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">All-in-all, anything that is a success, error, action, warning, etc notification that pops on the screen but disappears automatically can be termed a toast message. Here in this blog, we will follow a step-by-step guide to adding an automatic toast message in the <\/span><a href=\"https:\/\/dianapps.com\/blog\/react-native-in-2024-the-future-of-cross-platform-mobile-app-development\/\"><span style=\"font-weight: 400;\">React Native app in 2024<\/span><\/a><span style=\"font-weight: 400;\">. Let\u2019s get started!\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Prerequisites-Needed-When-Adding-Toast-Messages-in-React-Native-App\"><\/span><span style=\"font-weight: 400;\">Prerequisites Needed When Adding Toast Messages in React Native App<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">To display toast notifications in a React Native app, you need to have certain prerequisites in place. Here&#8217;s a step-by-step guide to set up and display toast notifications in your React Native application:<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"1-React-Native-Environment-Setup\"><\/span><span style=\"font-weight: 400;\">1. React Native Environment Setup:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Node.js installed<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">npm (or yarn) installed<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">React Native CLI installed<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A working React Native project<\/span><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"2-Install-a-Toast-Library\"><\/span><span style=\"font-weight: 400;\">2. Install a Toast Library:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">React Native does not have a built-in toast component, so you need to install a third-party library. A popular choice is react-native-toast-message.<\/span><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"3-Basic-Knowledge-of-React-Native\"><\/span><span style=\"font-weight: 400;\">3. Basic Knowledge of React Native:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Understanding of <\/span><a href=\"https:\/\/dianapps.com\/blog\/a-deep-dive-into-the-react-native-component-lifecycle\/\"><span style=\"font-weight: 400;\">React Native components<\/span><\/a><span style=\"font-weight: 400;\">, state management, and lifecycle methods.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">These prerequisites ensure you have the necessary setup and tools to implement toast notifications in your React Native application.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step-By-Step-Guide-To-Displaying-Toast-Messages-In-React-Native-Apps\"><\/span><span style=\"font-weight: 400;\">Step-By-Step Guide To Displaying Toast Messages In React Native Apps<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1-Create-or-Navigate-To-Your-React-Native-Project\"><\/span><span style=\"font-weight: 400;\">1. Create or Navigate To Your React Native Project<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">First, create a new React Native project or navigate to your existing project directory. You can create a new project using the following commands:<\/span><\/p>\n<p><b>npx react-native init MyToastApp<\/b><\/p>\n<p><b>cd MyToastApp<\/b><\/p>\n<p><span style=\"font-weight: 400;\">If you already have a project, simply navigate to its directory. After installation is done, a screen will appear like shown below:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9566 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image15.png\" alt=\"Creating React App\" width=\"717\" height=\"606\" srcset=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image15-640x541.png 640w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image15-400x338.png 400w\" sizes=\"(max-width: 717px) 100vw, 717px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-Starting-The-Project\"><\/span><span style=\"font-weight: 400;\">2. Starting The Project<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Change to the directory initially to begin our project. Run the npx react-native start\u00a0<\/span><span style=\"font-weight: 400;\">command after that.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9567 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image7-4.png\" alt=\"Running React project\" width=\"625\" height=\"332\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Next, launch the project on the iOS simulator by running the npx react-native run-ios command from a different terminal.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9569 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image1-5.png\" alt=\"React Native Project\" width=\"639\" height=\"395\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">To launch the project on an Android emulator, use the npx react-native run-android command.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9568 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image9-2.png\" alt=\"React Native Project\" width=\"689\" height=\"385\" srcset=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image9-2-640x358.png 640w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image9-2-400x223.png 400w\" sizes=\"(max-width: 689px) 100vw, 689px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-First-Configuration\"><\/span><span style=\"font-weight: 400;\">3. First Configuration<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">To use toast notifications, configure the Toast provider in your main entry file, typically App.js or index.js. Wrap your app component with the Toast provider to make toast notifications available throughout your app.<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">\/\/ App.js\r\n\r\nimport React from 'react';\r\n\r\nimport { SafeAreaView, Button } from 'react-native';\r\n\r\nimport Toast from 'react-native-toast-message';\r\n\r\nconst App = () =&gt; {\r\n\r\n\u00a0\u00a0const showToast = () =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0Toast.show({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'success',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text1: 'Hello',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text2: 'This is a toast notification!',\r\n\r\n\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0};\r\n\r\n\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Button title=\"Show Toast\" onPress={showToast} \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Toast ref={(ref) =&gt; Toast.setRef(ref)} \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/SafeAreaView&gt;\r\n\r\n\u00a0\u00a0);\r\n\r\n};\r\n\r\nexport default App;<\/pre>\n<p>Next, make a ToastMessages.js file and place it within the components folder that you just created in the root directory. Add the text that follows thereto. Here, four buttons made with the Button component and styled text are displayed.<\/p>\n<p><span style=\"font-weight: 400;\">Next, we&#8217;ll build the Button component. We&#8217;re simply giving it kudos here. Also take note that we have a unique button reserved for the Android operating system. We&#8217;ll develop a native Android toast in it later.<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true \">import { StyleSheet, Text, Platform } from 'react-native'\r\n\r\nimport React from 'react'\r\n\r\nimport Button from '.\/Button'\r\n\r\nconst ToastMessages = () =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style={styles.titleText}&gt;Toast Messages&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Button title=\"success\" onPress={() =&gt; { }} \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Button title=\"error\" onPress={() =&gt; { }} \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Button title=\"info\" onPress={() =&gt; { }} \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{Platform.OS === 'android' &amp;&amp; (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Button title=\"android toast\" onPress={() =&gt; { }} \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0)\r\n\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n\r\n\u00a0\u00a0\u00a0\u00a0titleText: { fontSize: 22, fontWeight: 'bold', textAlign: 'center',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0paddingVertical: 20, color: 'darkblue' },\r\n\r\n})\r\n\r\nexport default ToastMessages<\/pre>\n<p><span style=\"font-weight: 400;\">Next, add the following content to a Button.js file that you create in the components folder. Here, we&#8217;re making a button using the title and onPress props that we received.<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">import React from 'react';\r\n\r\nimport { Text, TouchableOpacity } from 'react-native';\r\n\r\nconst Button = ({ onPress, title }) =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;TouchableOpacity\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style={[\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ margin: 12, padding: 12, backgroundColor: 'darkmagenta', borderRadius: 4 },\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPress={onPress}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style={{ textAlign: 'center', color: 'white' }}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{title.toUpperCase()}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/TouchableOpacity&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n};\r\n\r\nexport default Button;<\/pre>\n<p><span style=\"font-weight: 400;\">Now, the iOS simulator and Android emulator should display the screen below. Observe that the iOS simulator does not have the Android Toast button.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"4-Making-Toast-Notifications\"><\/span><span style=\"font-weight: 400;\">4. Making Toast Notifications<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Let&#8217;s start by building a helper function that displays toast messages. Make a helpers folder in the root directory to do this. Include the content below in a file called toast.js.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The info, success, and danger functions come next, and they use the React Native DeviceEventEmitter to emit events. In this instance, we&#8217;re also emitting an alternative type and choices in addition to the string SHOW_TOAST.<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">import { DeviceEventEmitter } from 'react-native';\r\n\r\nconst toast = {\r\n\r\n\u00a0\u00a0\u00a0\u00a0info: options =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0DeviceEventEmitter.emit('SHOW_TOAST', {...options, type: 'info'});\r\n\r\n\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0success: options =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0DeviceEventEmitter.emit('SHOW_TOAST', {...options, type: 'success'});\r\n\r\n\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0danger: options =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0DeviceEventEmitter.emit('SHOW_TOAST', {...options, type: 'danger'});\r\n\r\n\u00a0\u00a0\u00a0\u00a0},\r\n\r\n};\r\n\r\nexport default toast;<\/pre>\n<p><span style=\"font-weight: 400;\">Next, add the following information to a file named Toast.js that is created within the components folder. Here, the useEffect hook&#8217;s listener is being added. Here, we are watching for the Toast.js file&#8217;s event to be emitted. Also, when the component is unmounted, the event has been eliminated.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Upon receiving an event, we invoke the onNewToast method and log the incoming data in the console. Later on, we&#8217;ll add additional reasoning to it.<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">import { StyleSheet, Text, View, DeviceEventEmitter } from 'react-native'\r\n\r\nimport React, { useEffect } from 'react'\r\n\r\nconst Toast = () =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0useEffect(() =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0DeviceEventEmitter.addListener('SHOW_TOAST', onNewToast);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return () =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0DeviceEventEmitter.removeAllListeners();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\r\n\r\n\u00a0\u00a0\u00a0\u00a0}, []);\r\n\r\n\u00a0\u00a0\u00a0\u00a0const onNewToast = data =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(data)\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text&gt;Toast&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0)\r\n\r\n}\r\n\r\nconst styles = StyleSheet.create({})\r\n\r\nexport default Toast<\/pre>\n<p><span style=\"font-weight: 400;\">In order to leverage the Toast.js function and transmit various messages on various press events, we will now alter the ToastMessages.js file.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9570 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image3-4.png\" alt=\"Toast Message\" width=\"795\" height=\"472\" srcset=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image3-4-768x456.png 768w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image3-4-640x380.png 640w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image3-4-400x238.png 400w\" sizes=\"(max-width: 795px) 100vw, 795px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Additionally, we&#8217;ll add the Toast component outside of each App.js file component.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9571 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image11-2.png\" alt=\"Toast Component\" width=\"817\" height=\"467\" srcset=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image11-2-768x439.png 768w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image11-2-640x366.png 640w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image11-2-400x229.png 400w\" sizes=\"(max-width: 817px) 100vw, 817px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The console logs for that may then be seen by pressing any button on the iOS simulator or Android emulator. Also, see the toast component is not shown at the correct place.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9573 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image4-4.png\" alt=\"Toast Component\" width=\"800\" height=\"445\" srcset=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image4-4-768x428.png 768w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image4-4-640x356.png 640w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image4-4-400x223.png 400w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"5-Displaying-Toast-Messages\"><\/span><span style=\"font-weight: 400;\">5. Displaying Toast Messages<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We were able to enter different data into the Toast.js component by pressing any button. Let&#8217;s now display a toast message where it belongs. Additionally, every toast message with a distinct text message will have a different hue.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">First, add the two state variables, message and messageType, to the Toast.js file. We will then set these state variables with the message and type when we receive the toast message.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here, we are determining if the return statement contains any messages. Next, we&#8217;re displaying a View that has a TouchableOpacity button on it. Different styles are being used for the text and container.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To precisely position the box at the bottom, use the position &#8220;absolute&#8221;. Additionally, line 4 has a color variable that allows us to change the container&#8217;s backdrop color based on the message.<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-9575\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image14.png\" alt=\"Toast Container\" width=\"793\" height=\"576\" srcset=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image14-768x558.png 768w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image14-640x465.png 640w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image14-400x291.png 400w\" sizes=\"(max-width: 793px) 100vw, 793px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">We will now see different colored messages at the bottom when we hit different buttons.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9572 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image8-3.png\" alt=\"Toast Messages\" width=\"633\" height=\"551\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"6-Toast-Messages-That-Disappear\"><\/span><span style=\"font-weight: 400;\">6. Toast Messages That Disappear<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Our toast message will be displayed constantly; nevertheless, it must eventually go. Let&#8217;s now include this functionality in the Toast.js file.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The timeOut state variable, which has a starting value of 4,000 milliseconds, will be used in this instance. Additionally, we generated a ref called timeOutRef. The creation of a reference is necessary as our code will utilize it in several locations.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After that, a new useEffect hook will exist. The set interval method will be used in this case to run every 1,000 milliseconds. Additionally, we&#8217;ve reduced the timeOut state variable by 1,000 milliseconds each time, making it equal to the timeOutRef variable that was previously stated. We are invoking the closeToast function if it becomes 0, which indicates that it ran four times.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Set the timeOut variable to 4,000 milliseconds once more and set the message to null in the closeToast() function. Next, use clearInterval to make the interval clear.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lastly, determine if the duration has passed and set it to the timeOut variable in the onNewToast() function.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9576 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image16.png\" alt=\"React Code\" width=\"762\" height=\"623\" srcset=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image16-640x524.png 640w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image16-400x327.png 400w\" sizes=\"(max-width: 762px) 100vw, 762px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Next, pass the duration variable, which is set at 2,000 milliseconds, in the TextMessages.js code.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9577 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image5-3.png\" alt=\"React Native Code\" width=\"783\" height=\"339\" srcset=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image5-3-768x333.png 768w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image5-3-640x278.png 640w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image5-3-400x173.png 400w\" sizes=\"(max-width: 783px) 100vw, 783px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The toast message will now close after 2,000 milliseconds when we click on SUCCESS. After 4,000 milliseconds, the ERROR and INFO toast messages will close.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9578 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image17.png\" alt=\"Toast Message\" width=\"397\" height=\"635\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"7-Toast-Messages-on-Android\"><\/span><span style=\"font-weight: 400;\">7. Toast Messages on Android<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Toast messages that are native to Android are supported. It doesn&#8217;t require any unique logic to be written.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">First, determine if the platform is Android in the Toast.js code located inside the onNewToast() function.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If so, show the message using ToastAndroid. Additionally, give it a LONG parameter. This indicates that the message will be shown for a longer period of time.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9580 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image2-6.png\" alt=\"React Native Code\" width=\"719\" height=\"570\" srcset=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image2-6-640x508.png 640w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image2-6-400x317.png 400w\" sizes=\"(max-width: 719px) 100vw, 719px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Now, in the ToastMessage.js file, update the onPress handler.<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-9583 \" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image13.png\" alt=\"React Native Code\" width=\"712\" height=\"325\" srcset=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image13-640x293.png 640w, https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image13-400x183.png 400w\" sizes=\"(max-width: 712px) 100vw, 712px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">When we click the ANDROID TOAST button on an Android emulator, a native message will appear.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9584 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image12-1.png\" alt=\"Toast Message\" width=\"409\" height=\"654\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"8-App-Testing\"><\/span><span style=\"font-weight: 400;\">8. App Testing<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We will utilize the built-in Jest testing techniques to test the application. Delete the previous file, app-test.js, from the __tests__ folder. Include a file named ToastMessages-test.js.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now add the following text to the ToastMessages-test.js file. This is a straightforward snapshot test that verifies that the app matches every tag.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To view the test&#8217;s outcome, use the npm run test command from the terminal.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9585 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/image6-3.png\" alt=\"App Testing\" width=\"624\" height=\"210\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The lone test scenario we had worked well. But to include the Toast.js component in the testing would mean creating a pretty intricate test case. Rather than writing every test case by hand, we may do this by using Waldo, a no-code testing platform.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We only need to upload the IPA or APK file to use this platform. After that, we may click on the button to do user iteration. After that, our testing and the creation of the test cases will both happen automatically.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Thus, register for a free Waldo account to explore its functionalities.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tips-To-Keep-in-Mind-When-Integrating-Toast-Messages-In-React-Native-App\"><\/span><span style=\"font-weight: 400;\">Tips To Keep in Mind When Integrating Toast Messages In React Native App<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As a leading React Native app development company, we ask our viewers and developers to also keep in mind a few things when integrating and displaying toast messages in a react native app such as:\u00a0<\/span><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\"> Ensure you select a well-maintained and popular library like react-native-toast-message. This helps ensure better support, documentation, and fewer bugs.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Toast messages should be concise and to the point. Long messages can overwhelm users and defeat the purpose of quick feedback.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Use different types of toasts (success, error, info, warning) to convey the nature of the message clearly. This helps users understand the context at a glance.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Position toast notifications where they are most likely to be noticed without obstructing important content. Common positions are at the bottom or top of the screen.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Ensure that toast messages do not stack up indefinitely if multiple actions are performed quickly. Implement logic to limit the number of concurrent toasts.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Match the toast message styles with your app\u2019s theme for a consistent user experience. Customize colors, fonts, and animations as needed.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Set an appropriate duration for toast visibility. Success messages might need shorter durations, while error messages might need a bit longer for users to read and understand.<\/span><\/li>\n<\/ol>\n<h4><span class=\"ez-toc-section\" id=\"Bonus-Points\"><\/span><span style=\"font-weight: 400;\">Bonus Points\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ol start=\"8\">\n<li><span style=\"font-weight: 400;\"> Ensure your toast notifications are accessible. Use proper ARIA roles and ensure that screen readers can read the toast messages.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Test toast notifications on various devices and screen sizes to ensure they look good and function properly across all possible user environments.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Use toast messages sparingly. Overuse can annoy users and reduce the effectiveness of the notifications.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Ensure that the toast messages are contextually relevant and triggered by meaningful user actions or system events.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Provide clear and actionable information in error messages to help users understand what went wrong and how they can fix it.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Use smooth animations to show and hide toasts to make the experience seamless and less jarring for users.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Make sure the toast library you choose is compatible with the <\/span><a href=\"https:\/\/dianapps.com\/blog\/react-native-0-74-yoga-3-0-bridgeless-new-architecture-and-more\/\"><span style=\"font-weight: 400;\">latest version of React Native<\/span><\/a><span style=\"font-weight: 400;\"> and any other libraries you\u2019re using.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Decide whether you need global toasts that can be triggered from anywhere in the app, or local toasts that are specific to certain components.<\/span><\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><span style=\"font-weight: 400;\">Conclusion<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">That\u2019s a wrap on providing step-by-step instructions on displaying toast messages in React Native apps if you are someone who needs assistance in the integration and implementation of toast messages in your mobile app development services you can hire DianApps. One of the growing and responsive <\/span><a href=\"https:\/\/dianapps.com\/react-native-app-development\"><b>React native app development company<\/b><\/a><span style=\"font-weight: 400;\"> that build the best-in-class mobile apps personalized as per business needs and expectations.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Get in touch with us today!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever come across notifications that vanish from the screen after a certain time? Did you ever find it astonishing and wonder what\u2019s it called? Well, those notifications are nifty tools commonly named Toast Notifications that can be used to display information without using enough screen space.\u00a0 In a nutshell, they are used to [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":9593,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[136,672,673],"class_list":["post-9553","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-react-native-app","tag-toast-notification-in-react-native-app","tag-toast-notifications"],"featured_image_src":{"landsacpe":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/Toast-Notifications-in-React-Native-App-1-min-1140x445.jpg",1140,445,true],"list":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/Toast-Notifications-in-React-Native-App-1-min-463x348.jpg",463,348,true],"medium":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/Toast-Notifications-in-React-Native-App-1-min-300x169.jpg",300,169,true],"full":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/Toast-Notifications-in-React-Native-App-1-min.jpg",2048,1152,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Display Toast Notifications in React Native App<\/title>\n<meta name=\"description\" content=\"Ever noticed notifications vanishing from the screen? Well, those are Toast Notifications. Learn how to display notifications in React Native\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dianapps.com\/blog\/how-to-display-toast-notifications-in-react-native-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display Toast Notifications in React Native App\" \/>\n<meta property=\"og:description\" content=\"Ever noticed notifications vanishing from the screen? Well, those are Toast Notifications. Learn how to display notifications in React Native\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dianapps.com\/blog\/how-to-display-toast-notifications-in-react-native-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-13T05:37:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-13T05:40:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/Toast-Notifications-in-React-Native-App-1-min.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1152\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Harshita Sharma\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Harshita Sharma\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Display Toast Notifications in React Native App","description":"Ever noticed notifications vanishing from the screen? Well, those are Toast Notifications. Learn how to display notifications in React Native","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dianapps.com\/blog\/how-to-display-toast-notifications-in-react-native-app\/","og_locale":"en_US","og_type":"article","og_title":"How to Display Toast Notifications in React Native App","og_description":"Ever noticed notifications vanishing from the screen? Well, those are Toast Notifications. Learn how to display notifications in React Native","og_url":"https:\/\/www.dianapps.com\/blog\/how-to-display-toast-notifications-in-react-native-app\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2024-06-13T05:37:45+00:00","article_modified_time":"2024-06-13T05:40:17+00:00","og_image":[{"width":2048,"height":1152,"url":"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2024\/06\/Toast-Notifications-in-React-Native-App-1-min.jpg","type":"image\/jpeg"}],"author":"Harshita Sharma","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Harshita Sharma","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.dianapps.com\/blog\/how-to-display-toast-notifications-in-react-native-app\/","url":"https:\/\/www.dianapps.com\/blog\/how-to-display-toast-notifications-in-react-native-app\/","name":"How to Display Toast Notifications in React Native App","isPartOf":{"@id":"https:\/\/www.dianapps.com\/blog\/#website"},"datePublished":"2024-06-13T05:37:45+00:00","dateModified":"2024-06-13T05:40:17+00:00","author":{"@id":"https:\/\/www.dianapps.com\/blog\/#\/schema\/person\/6672b5142fe10cc5379a72656c884045"},"description":"Ever noticed notifications vanishing from the screen? Well, those are Toast Notifications. Learn how to display notifications in React Native","breadcrumb":{"@id":"https:\/\/www.dianapps.com\/blog\/how-to-display-toast-notifications-in-react-native-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dianapps.com\/blog\/how-to-display-toast-notifications-in-react-native-app\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dianapps.com\/blog\/how-to-display-toast-notifications-in-react-native-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Display Toast Notifications in React Native App"}]},{"@type":"WebSite","@id":"https:\/\/www.dianapps.com\/blog\/#website","url":"https:\/\/www.dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.dianapps.com\/blog\/#\/schema\/person\/6672b5142fe10cc5379a72656c884045","name":"Harshita Sharma","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2025\/04\/unnamed-96x96.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2025\/04\/unnamed-96x96.png","caption":"Harshita Sharma"},"description":"A competent and enthusiastic writer, having excellent persuasive skills in the tech, marketing, and event industry. With vast knowledge about the latest industry trends, she is familiar with creating engaging content gigs.","sameAs":["https:\/\/www.linkedin.com\/in\/harshita-sharma-958662198"],"url":"https:\/\/www.dianapps.com\/blog\/author\/harshita\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/9553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=9553"}],"version-history":[{"count":16,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/9553\/revisions"}],"predecessor-version":[{"id":9594,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/9553\/revisions\/9594"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/media\/9593"}],"wp:attachment":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=9553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=9553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=9553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}