react-native-toastable

🍞 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

or

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

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Roadmap

• Add more examples
• Support animationIn and animationOut props
• Support stackable toasts
• Support custom animations
• Add custom status support

Inspiration

• react-native-modal

License

MIT

---

Made with create-react-native-library