Feature-rich Toast Notification Library For React Native

Description:

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...');