React-native-toastable NPM

react-native-toastable

npm bundle size

🍞 Blazingly fast and fully customizable Toaster component for React Native

Supports queuinge, so you can display multiple toasts in succession without having to worry about them overlapping or interfering with each other
Fully typed, using TypeScript
Supports swipe to dismiss multiple directions (left, right, up)
Performant, using native animations and avoiding unnecessary re-renders
Zero external dependencies
Highly customizable, allowing you to tailor it to fit your specific needs

https://user-images.githubusercontent.com/43743872/230865010-6c1c7890-2eec-47c1-bbe4-44c6c6379037.mp4

Installation

yarn add react-native-toastable

npm install react-native-toastable

Usage

Place Toastable component at the root of your app, and import showToastable function anywhere in your app to show or hideToastable to hide toast.

Note: If you need to use top inset of the device, Toastable must be child of SafeAreaProvider, otherwise you can use any value for offset prop, default is 56.

import { View } from 'react-native';
import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
import Toastable from 'react-native-toastable';

export default function App() {
    return (
        <SafeAreaProvider>
            <RootNavigation />
        </SafeAreaProvider>
    );
}

export default function RootNavigation() {
    const { top } = useSafeAreaInsets();

    return (
        <View style={{ flex:1 }}>
            <NavigationContainer />
            <Toastable
                statusMap={{
                    success: 'red'
                    danger: 'yellow'
                    warning: 'green'
                    info: 'blue'
                }}
                offset={top}
            />
        </View>
    );
}

import { View, Button } from 'react-native';
import { hideToastable, showToastable } from 'react-native-toastable';

export default function HomeScreen() {
    return (
        <View style={{flex:1}}>
            <Button
                title="Show Toastable"
                onPress={() => showToastable({ message: 'React Native Heroes is awesome! 🚀', status:'success' })}
            />
            <Button
                title="Hide Toastable"
                onPress={() => hideToastable()}
            />
        </View>
    );
}

Props

Inherit all other props from ToastableBodyParams interface. Except backgroundColor, status, message, onPress, contentStyle props.

Property	Type	Description	Default
statusMap	`StatusMap`	Status map, used to determine background color based on status	`success: '#00BFA6', danger: '#FF5252', warning: '#FFD600', info: '#2962FF'`
onToastableHide	`Func`	Callback when toast is dismissed	`undefined`
containerStyle	`ViewProps['style']`	Container style for toast container	`undefined`
position	`'top' \\| 'center'`	Toast position.	`'top'`
offset	`number`	Toast offset.	`56`

ToastableBodyParams

Params	Type	Description	Default
renderContent	`(props: ToastableBodyParams) => React.ReactNode`	Render custom content, if this is set, message will be ignored.	`undefined`
contentStyle	`ViewProps['style']`	Custom content style.	`undefined`
backgroundColor	`ColorValue`	Custom background color, if this is set, status will be ignored.	`undefined`
status	`ToastableMessageStatus`	Message status, this will be used to determine background color based on `statusMap` prop.	`'info'`
message	`TextProps['children']`	Message to be displayed.	`undefined`
onPress	`Func`	On press callback.	`undefined`
duration	`number`	Duration in milliseconds.	`3000`
alwaysVisible	`boolean`	Make toast always visible, even when there is a new toast.	`false`
animationOutTiming	`number`	Animation timing for toast out in milliseconds.	`300`
animationInTiming	`number`	Animation timing for toast in in milliseconds.	`300`
swipeDirection	`'up' \\| 'left' \\| 'right' \\| Array<'up' \\| 'left' \\| 'right'>`	Swipe direction to dismiss toast.	`'up'`
titleColor	`ColorValue`	Custom title color, if this is set.	`'#FFFFFF'`
messageColor	`ColorValue`	Custom message color, if this is set.	`'#FFFFFF'`
titleStyle	`TextStyle`	Custom title style.	`undefined`
messageStyle	`TextStyle`	Custom message style.	`undefined`
position	`'top' \\| 'bottom'\\| 'center'`	Toast position.	`'top'`
offset	`number`	Toast offset.	`56`