Performant & Customizable Toaster Component For React Native

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