A fully customizable, high-performance toast component that features multiple toasts, swipe to dismiss, and much more.
How to use it:
1. Import the React Native toast component.
# Yarn $ yarn add react-native-toastable # NPM $ npm i react-native-toastable
import * as React from 'react'; import { Button, StyleSheet, View } from 'react-native'; import Toastable, { showToastable } from 'react-native-toastable';
2. Enable a button to toggle a basic toast message on the screen.
export default function Example() { return ( <View style={{flex:1}}> <Button title="Show Toastable" onPress={() => showToastable({ title: 'Toast Title', message: 'Toast Message', status: 'info', // 'success', 'info', 'warning', 'danger' }) } /> <Toastable /> </View> ); }
3. Customize the toast message.
showToastable({ title: 'Toast Title', message: 'Toast Message', status: 'info', alwaysVisible: true, animationInTiming: 1000, animationOutTiming: 1000, backgroundColor: 'red', duration: 2000, contentStyle: { marginHorizontal: 20, }, onPress: () => { console.log('onPress'); }, status: 'success', swipeDirection: 'left', // 'right', 'left', 'up' messageColor: 'white', })
Preview:
Download Details:
Author: rnheroes
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/rnheroes/react-native-toastable
License: MIT