Animated Toast Component For React Native

An animated toast component for React Native, based on react-native-reanimated and react-native-vector-icons.

How to use it:

1. Install and import the ToastComponent.

# Yarn
$ yarn add @iqorlobanov/react-native-toast

# NPM
$ npm i @iqorlobanov/react-native-toast

import { ToastComponent } from '@iqorlobanov/react-native-toast';

2. Add the toast component to the app.

<ToastComponent />

// OR
import { Toast, ToastType } from '@iqorlobanov/react-native-toast';
import { Button } from 'react-native';
export function Foo() {
  return (
    <Button
      title="Show toast"
      onPress={() => {
        Toast.show({
          title: 'Toast Title',
          description: 'Toast message.',
          type: ToastType.SUCCESS,
          visibilityTime: 3000,
        });
      }}
    />
  );
}

3. Available props for the show method.

title: string;
description?: string;
type: ToastType; // SUCCESS, INFO, WARNING, ERROR.
visibilityTime?: number;
showLeftIcon?: boolean;
showRightIcon?: boolean;
withShadow?: boolean;
topOffset?: number;
touchable?: boolean;

4. Available props for the ToastComponent.

leftIconComponent?: React.ReactNode;
rightIconComponent?: React.ReactNode;
style?: StyleProp<ViewStyle>;
titleStyle?: StyleProp<TextStyle>;
descriptionStyle?: StyleProp<TextStyle>;

Preview:

Download Details:

Author: iqorlobanov

Live Demo: View The Demo

Download Link: Download The Source Code

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

License: MIT