react native toast

React Native Toast

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.

Github.mp4   

Why?

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)

• 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

yarn add @backpackapp-io/react-native-toast# ornpm i @backpackapp-io/react-native-toast

Peer Dependencies

Install and link react-native-reanimated, react-native-safe-area-context, and react-native-gesture-handler

yarn add react-native-reanimated react-native-safe-area-context react-native-gesture-handler

Ensure you follow the installation of each package

Using expo?

npx expo install react-native-reanimated react-native-safe-area-context react-native-gesture-handler

Cool, now what?

Wrap your App with <GestureHandlerRootView /> and <SafeAreaProvider /> & add the <Toasts /> component to the root of your app.

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

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 (<SafeAreaProvider>  <GestureHandlerRootView style={styles.container}><View>{/*The rest of your app*/}</View><Toasts /> {/* <---- Add Here */}  </GestureHandlerRootView></SafeAreaProvider>
  );}const styles = StyleSheet.create({
  container: {flex: 1,alignItems: 'center',justifyContent: 'center',
  },});

Example

Regular Toast

toast("This is my first toast", {
  duration: 3000,});

Promise Toast

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

const id = toast.loading('I am loading. Dismiss me whenever...');setTimeout(() => {
  toast.dismiss(id);}, 3000);

Success Toast

toast.success('Success!', {
  width: 300});

Error Toast

toast.error('Wow. That Sucked!');