yarn add react-native-popup-confirm-toast
or
npm install react-native-popup-confirm-toast
Usage
Wrap your root component in Provider from react-native-popup-confirm-toast. If you have a vanilla React Native project,
it's a good idea to add it in the component which is passed to AppRegistry.registerComponent. This will usually be in
the index.js file. If you have an Expo project, you can do this inside the exported component in the App.js file.
Example Provider
import * as React from 'react';
import { AppRegistry } from 'react-native';
import {Root as PopupRootProvider} from 'react-native-popup-confirm-toast';
import { name as appName } from './app.json';
import App from './src/App';
export default function Main() {
return (
<PopupRootProvider>
<App />
</PopupRootProvider>
);
}
AppRegistry.registerComponent(appName, () => Main);
import { Root, Toast } from 'react-native-popup-confirm-toast'
<Root>
<View>
<TouchableOpacity
onPress={() =>
Toast.show({
title: 'I\'m Eight!',
text: 'The best gift I received in this life are the codes. They are worlds inside the worlds.',
backgroundColor: '#702c91',
timeColor: '#440f5f',
timing: 3000,
icon: <Icon name={'check'} color={'#fff'} size={31}/>,
position: 'bottom',
statusBarType:'dark-content',
onCloseComplete: () => {
alert('onCloseComplete');
},
onOpenComplete: () => {
alert('onOpenComplete');
},
})
}
>
<Text>Open Bottom Toast</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() =>
Toast.show({
title: 'I\'m Eight!',
text: 'The best gift I received in this life are the codes. They are worlds inside the worlds.',
backgroundColor: '#702c91',
timeColor: '#440f5f',
timing: 3000,
icon: <Icon name={'check'} color={'#fff'} size={31}/>,
position: 'top',
statusBarTranslucent: false,
statusBarType:'light-content',
onCloseComplete: () => {
alert('onCloseComplete');
},
onOpenComplete: () => {
alert('onOpenComplete');
},
})
}
>
<Text>Open Top Toast</Text>
</TouchableOpacity>
</View>
</Root>
Documentation
SPSheet
Key
Type
Description
Default
background
string
rgba(0, 0, 0, 0.5)
height
number
auto height (min: 250)
250
duration
number
animation time used when opening
250(ms)
closeDuration
number
animation time used when closing
300(ms)
closeOnDragDown
boolean
Use drag with motion to close the window
true
closeOnPressMask
boolean
press the outside space to close the window
true
closeOnPressBack
boolean
Press the back key to close the window (Android only)
true
dragTopOnly
boolean
use only the top area of the draggable icon to close the window
The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.