https://reactnative.dev/assets/js/219bc5a3.6ac6ab7e.js

1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["1638"],{79530(e,t,n){n.r(t),n.d(t,{metadata:()=>s,default:()=>h,frontMatter:()=>o,contentTitle:()=>r,toc:()=>c,assets:()=>d});var s=JSON.parse('{"id":"toastandroid","title":"ToastAndroid","description":"React Native\'s ToastAndroid API exposes the Android platform\'s ToastAndroid module as a JS module. It provides the method show(message, duration) which takes the following parameters:","source":"@site/versioned_docs/version-0.82/toastandroid.md","sourceDirName":".","slug":"/toastandroid","permalink":"/docs/0.82/toastandroid","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/toastandroid.md\\"},{\\"label\\":\\"Edit page for 0.82 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.82/toastandroid.md\\"}]","tags":[],"version":"0.82","lastUpdatedAt":1780494561000,"frontMatter":{"id":"toastandroid","title":"ToastAndroid"},"sidebar":"api","previous":{"title":"PermissionsAndroid","permalink":"/docs/0.82/permissionsandroid"},"next":{"title":"ActionSheetIOS","permalink":"/docs/0.82/actionsheetios"}}'),i=n(62540),a=n(43023);let o={id:"toastandroid",title:"ToastAndroid"},r,d={},c=[{value:"Methods",id:"methods",level:2},{value:"<code>show()</code>",id:"show",level:3},{value:"<code>showWithGravity()</code>",id:"showwithgravity",level:3},{value:"<code>showWithGravityAndOffset()</code>",id:"showwithgravityandoffset",level:3},{value:"Properties",id:"properties",level:2},{value:"<code>SHORT</code>

1",id:"short",level:3},{value:"<code>LONG</code>",id:"long",level:3},{value:"<code>TOP</code>",id:"top",level:3},{value:"<code>BOTTOM</code>",id:"bottom",level:3},{value:"<code>CENTER</code>",id:"center",level:3}];function l(e){let t={a:"a",admonition:"admonition",code:"code",div:"div",em:"em",h1:"h1",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["React Native's ToastAndroid API exposes the Android platform's ToastAndroid module as a JS module. It provides the method ",(0,i.jsx)(t.code,{children:"show(message, duration)"})," which takes the following parameters:"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.em,{children:"message"})," A string with the text to toast"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.em,{children:"duration"})," The duration of the toast\u2014either ",(0,i.jsx)(t.code,{children:"ToastAndroid.SHORT"})," or ",(0,i.jsx)(t.code,{children:"ToastAndroid.LONG"})]}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["You can alternatively use ",(0,i.jsx)(t.code,{children:"showWithGravity(message, duration, gravity)"})," to specify where the toast appears in the screen's layout. May be ",(0,i.jsx)(t.code,{children:"ToastAndroid.TOP"}),", ",(0,i.jsx)(t.code,{children:"ToastAndroid.BOTTOM"})," or ",(0,i.jsx)(t.code,{children:"ToastAndroid.CENTER"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)"})," method adds the ability to specify an offset with in pixels."]}),"\n",(0,i.jsx)(t.admonition,{type:"note",children:(0,i.jsxs)(t.p,{children:["Starting with Android 11 (API level 30), setting the gravity has no effect on text toasts. Read about the changes ",(0,i.jsx)(t.a,{href:"https://developer.android.com/about/versions/11/behavior-changes-11#text-toast-api-changes",children:"here"}),"."]})}),"\n",(0,i.jsx)(t.div,{className:"snack-player","data-snack-name":"Toast Android API Example","data-snack-description":"Example usage","data-snack-files":"%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20%7BStyleSheet%2C%20ToastAndroid%2C%20Button%2C%20StatusBar%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20showToast%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20ToastAndroid.show('A%20pikachu%20appeared%20nearby%20!'%2C%20ToastAndroid.SHORT)%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20const%20showToastWithGravity%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20ToastAndroid.showWithGravity(%5Cn%20%20%20%20%20%20'All%20Your%20Base%20Are%20Belong%20To%20Us'%2C%5Cn%20%20%20%20%20%20ToastAndroid.SHORT%2C%5Cn%20%20%20%20%20%20ToastAndroid.CENTER%2C%5Cn%20%20%20%20)%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20const%20showToastWithGravityAndOffset%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20ToastAndroid.showWithGravityAndOffset(%5Cn%20%20%20%20%20%20'A%2

10wild%20toast%20appeared!'%2C%5Cn%20%20%20%20%20%20ToastAndroid.LONG%2C%5Cn%20%20%20%20%20%20ToastAndroid.BOTTOM%2C%5Cn%20%20%20%20%20%2025%2C%5Cn%20%20%20%20%20%2050%2C%5Cn%20%20%20%20)%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CButton%20title%3D%5C%22Toggle%20Toast%5C%22%20onPress%3D%7B()%20%3D%3E%20showToast()%7D%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Toggle%20Toast%20With%20Gravity%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20showToastWithGravity()%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Toggle%20Toast%20With%20Gravity%20%26%20Offset%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20showToastWithGravityAndOffset()%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%20%20%3C%2FSafeAreaProvider%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20paddingTop%3A%20StatusBar.currentHeight%2C%5Cn%20%20%20%20backgroundColor%3A%20'%23888888'%2C%5Cn%20%20%20%20padding%3A%208%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D","data-snack-dependencies":"react-native-safe-area-context","data-snack-platform":"web","data-snack-supported-platforms":"android","data-snack-theme":"light","data-snack-preview":"true","data-snack-loading":"lazy","data-snack-device-appearance":"light","data-snack-device-frame":"false"}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h1,{id:"reference",children:"Reference"}),"\n",(0,i.jsx)(t.h2,{id:"methods",children:"Methods"}),"\n",(0,i.jsx)(t.h3,{id:"show",children:(0,i.jsx)(t.code,{children:"show()"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="React TSX"',children:"static show(message: string, duration: number);\n"})}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"showwithgravity",children:(0,i.jsx)(t.code,{children:"showWithGravity()"})}),"\n",(0,i.jsx)(t.p,{children:"This property will only work on Android API 29 and below. For similar functionality on higher Android APIs, consider using snackbar or notification."}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="React TSX"',children:"static showWithGravity(message: string, duration: number, gravity: number);\n"})}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"showwithgravityandoffset",children:(0,i.jsx)(t.code,{children:"showWithGravityAndOffset()"})}),"\n",(0,i.jsx)(t.p,{children:"This property will only work on Android API 29 and below. For similar functionality on higher Android APIs, consider using snackbar or notification."}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="React TSX"',children:"static showWithGravityAndOffset(\n  message: string,\n  duration: number,\n  gravity: number,\n  xOffset: number,\n  yOffset: number,\n);\n"})}),"\n",(0,i.jsx)(t.h2,{id:"properties",children:"Properties"}),"\n",(0,i.jsx)(t.h3,{id:"short",children:(0,i.jsx)(t.code,{children:"SHORT"})}),"\n",(0,i.jsx)(t.p,{children:"Indicates the duration on the screen."}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="React TSX"',children:"static SHORT: number;\n"})}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"long",children:(0,i.jsx)(t.code,{children:"LONG"})}),"\n",(0,i.jsx)(t.p,{children:"Indicates the duration on the screen."}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="React TSX"',children:"static LONG: number;\n"})}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"top",children:(0,i.jsx)(t.code,{children:"TOP"})}),"\n",(0,i.jsx)(t.p,{children:"Indicates the position on the screen."}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="React TSX"',children:"static TOP: number;\n"})}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"bottom",children:(0,i.jsx)(t.code,{children:"BOTTOM"})}),"\n",(0,i.jsx)(t.p,{children:"Indicates the position on the screen."}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="React TSX"',children:"static BOTTOM: number;\n"})}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"center",children:(0,i.jsx)(t.code,{children:"CENTER"})}),"\n",(0,i.jsx)(t.p,{children:"Indicates the position on the screen."}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="React TSX"',children:"static CENTER: number;\n"})})]})}function h(e={}){let{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},43023(e,t,n){n.d(t,{R:()=>o,x:()=>r});var s=n(63696);let i={},a=s.createContext(i);function o(e){let t=s.useContext(a);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]);