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