{"id":12082,"date":"2025-03-25T05:40:24","date_gmt":"2025-03-25T05:40:24","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12082"},"modified":"2025-03-26T09:24:46","modified_gmt":"2025-03-26T09:24:46","slug":"toast-message-in-react-native","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react-native\/toast-message-in-react-native","title":{"rendered":"How to Display Toast Message in React Native"},"content":{"rendered":"<p>To show a toast message in React Native, you can make use of the ToastAndroid module available natively for Android. You can, however, use a third-party library that supports both Android and iOS.<\/p>\n<h3>Using ToastAndroid (Android Only)<\/h3>\n<p>React Native provides the ToastAndroid module to display toast messages on Android. Here&#8217;s how you can use it:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">\r\nimport React, { Component } from 'react';\r\nimport { View, Button, ToastAndroid, StyleSheet } from 'react-native';\r\n\r\nclass App extends Component {\r\n  showToast = () =&gt; {\r\n    ToastAndroid.show(\"This is a toast message\", ToastAndroid.SHORT);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      &lt;View style={styles.container}&gt;\r\n        &lt;Button title=\"Show Toast\" onPress={this.showToast} \/&gt;\r\n      &lt;\/View&gt;\r\n    );\r\n  }\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n  },\r\n});\r\n\r\nexport default App;\r\n<\/pre>\n<h3>Using a Third-Party Library (Cross-Platform)<\/h3>\n<p>For a cross-platform solution that works on both Android and iOS, you can use a third-party library.<\/p>\n<p>Example using react-native-toast-message third-party library.<br \/>\nInstall the library:<\/p>\n<p><strong>npm install react-native-toast-message<\/strong><\/p>\n<p>Or <\/p>\n<p><strong>yarn add react-native-toast-message<\/strong><\/p>\n<p>Set up the toast provider in your main app component:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">\r\nimport React from 'react';\r\nimport { Button, View, StyleSheet } from 'react-native';\r\nimport Toast from 'react-native-toast-message';\r\n\r\nconst App = () => {\r\n  const showToast = () => {\r\n    Toast.show({\r\n      type: 'success',\r\n      text1: 'Hello',\r\n      text2: 'This is a toast message \ud83d\udc4b',\r\n    });\r\n  };\r\n\r\n  return (\r\n    <View style={styles.container}>\r\n      <Button title=\"Show Toast\" onPress={showToast} \/>\r\n      <Toast ref={(ref) => Toast.setRef(ref)} \/>\r\n    <\/View>\r\n  );\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n  },\r\n});\r\n\r\nexport default App;\r\n<\/pre>\n<p>Configure the library (typically in the index.js file):<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">\r\nimport { AppRegistry } from 'react-native';\r\nimport App from '.\/App';\r\nimport { name as appName } from '.\/app.json';\r\nimport Toast from 'react-native-toast-message';\r\n\r\nAppRegistry.registerComponent(appName, () => App);\r\n\r\n\/\/ Register toast\r\nToast.register();\r\n<\/pre>\n<p>This way you can show toast in react native applications.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To show a toast message in React Native, you can make use of the ToastAndroid module available natively for Android. You can, however, use a third-party library that supports both Android and iOS. Using ToastAndroid (Android Only) React Native provides the ToastAndroid module to display toast messages on Android. Here&#8217;s how you can use it: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12083,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-12082","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12082"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12082"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12082\/revisions"}],"predecessor-version":[{"id":12086,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12082\/revisions\/12086"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12083"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}