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 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 (
      title="Show toast"
      onPress={() => {{
          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>;


Animated Toast Component For React Native


Add Comment