Description:
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:
