Feature-rich Toast Notification Library For React Native

A feature-rich toast library for React Native, built on react-hot-toast.

Features:

• Multiple toasts at the same time
• Keyboard handling (both iOS and Android)
• Swipe to dismiss
• Positional toasts (top & bottom)
• Ccustom styles, dimensions, duration, and even create your own component to be used in the toast
• Support for promises
• Runs on web

Basic usage:

1. Installation.

# Yarn
$ yarn add @backpackapp-io/react-native-toast

# NPM
$ npm i @backpackapp-io/react-native-toast

2. Import the react-native-toast.

import { StyleSheet, Text } from 'react-native';
import { toast, Toasts } from '@backpackapp-io/react-native-toast';
import { useEffect } from 'react';

3. Display a basic toast in your app.

export default function App() {
  useEffect(() => {
    toast('Hello World');
  }, []);
  return (
    <View style={styles.container}>
      <View>{/*The rest of your app*/}</View>
      <Toasts /> {/* <---- Add Here */}
    </View>
  );
}

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

4. Available toast options.

toast('Hello World', {
  duration: 4000,
  position: ToastPosition.TOP,
  icon: 'Icon Here',
  styles: {
    view: ViewStyle,
    pressable: ViewStyle,
    text: TextStyle,
    indicator: ViewStyle
  },
});

5. Create toasts of different styles.

// default
toast('Hello World');

// success
toast.success('Successfully created!');

// error
toast.error('This is an error!');

// custom
toast("", {
  customToast: (toast) => (
    <View>
      <Text>{toast.message}</Text>
    </View>
   )
});

// loading
toast.loading('Waiting...');

Preview:

Download Details:

Author: backpackapp-io

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/backpackapp-io/react-native-toast

License: MIT