React Native Toast

  

English · 한국어

A toast library for react-native, built on react-hot-toast. It supports features such as multiple toasts, keyboard handling, swipe to dismiss, positional toasts, and JS promises. It runs on iOS, android, and web.

video

$3

I know what you might be thinking (jeez, another toast library?). Trust me here, this is the last toast library you will need. I built this library to meet my specific app needs and decided to open-source it after realizing that it truly is a top-notch toast library. Just give it a try.

Features

- Multiple toasts, multiple options. Want a toast on the top, bottom, different colors, or different types at the same time? Got it.
- Keyboard handling (both iOS and Android). Move those toasts out of the way and into view when the user opens the keyboard
- Swipe to dismiss
- Positional toasts (top, bottom, top-left, top-right, bottom-left, bottom-right)
- Customizable (custom styles, dimensions, duration, and even create your own component to be used in the toast)
- Add support for promises <-- Really! Call toast.promise(my_promise) and watch react-native-toast work its magic, automatically updating the toast with a custom message on success -- or an error message on reject.
- Runs on web
- Support for native modals
- Callbacks for onPress, onShow, and onHide

Documentation

View the full documentation here

Getting Started

Installation

``sh
yarn add @backpackapp-io/react-native-toast

or

npm i @backpackapp-io/react-native-toast
`
#### Peer Dependencies
Install and link react-native-reanimated, react-native-safe-area-context, and react-native-gesture-handler

`sh
yarn add react-native-reanimated react-native-safe-area-context react-native-gesture-handler
`
Ensure you follow the installation of each package


Using expo?
`sh
npx expo install react-native-reanimated react-native-safe-area-context react-native-gesture-handler
`



$3


Wrap your App with and & add the component to the root of your app.

Call toast("My Toast Message") whenever you are ready from anywhere in your app.

`js
import { View, StyleSheet, Text } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { toast, Toasts } from '@backpackapp-io/react-native-toast';
import { useEffect } from 'react';

export default function App() {
useEffect(() => {
toast('Hello');
}, []);

return (


{/The rest of your app/}
{/ <---- Add Here /}


);
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
`




Example

#### Regular Toast
`js
toast("This is my first toast", {
duration: 3000,
});
`

#### Promise Toast
`js
const sleep = new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.5) {
resolve({
username: 'Nick',
});
} else {
reject('Username is undefined');
}
}, 2500);
});

toast.promise(
sleep,
{
loading: 'Loading...',
success: (data: any) => 'Welcome ' + data.username,
error: (err) => err.toString(),
},
{
position: ToastPosition.BOTTOM,
}
);
`

#### Loading Toast
`js
const id = toast.loading('I am loading. Dismiss me whenever...');

setTimeout(() => {
toast.dismiss(id);
}, 3000);
`

#### Success Toast
`js
toast.success('Success!', {
width: 300
});
`
#### Error Toast
`js
toast.error('Wow. That Sucked!');
``