react-native-toastable

npm npm bundle size HitCount

? 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

Installation

yarn add react-native-toastable

or

npm install react-native-toastable

Usage

Place Toastable component at the root of your app, and use showToastable function anywhere in your app to show.

All examples below assume that you have placed Toastable component at the root of your app and imported necessary components and functions.

Basic Usage

import * as React from 'react';

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

export default function Example() {
    return (
        <View style={{flex:1}}>
            <Button
                title="Show Toastable"
                onPress={() =>
                    showToastable({
                        title: 'React Native Heroes',
                        message: 'We are the heroes of React Native ?',
                        status: 'info',
                    })
                }
            />
            <Toastable />
        </View>
    );
}

Queueing

let number = 0

export default function Example() {
    return (
        <View style={{flex:1}}>
            <Button
                title="Show Toastable"
                onPress={() => {
                    const status = ['success', 'info', 'warning', 'danger'][Math.floor(Math.random() * 4)];
                    number++;
                    showToastable({
                        message: 'Message ' + number,
                        title: 'React Native Heroes ' + status,
                        status,
                        duration: 1500,
                    });
                }}
            />
            <Toastable />
        </View>
    );
}

Custom Toastable – Local Component

You can pass your own renderContent function to showToastable function.

export default function Example() {
    return (
        <View style={{flex:1}}>
            <Button
                title="Show Toastable"
                onPress={() =>
                    showToastable({
                        renderContent: ({ message, title, status = 'info' }) => (
                            <View
                                style={{
                                    flexDirection: 'row',
                                    backgroundColor: TOASTABLE_STATUS_MAP[status],
                                    paddingVertical: 12,
                                    paddingHorizontal: 16,
                                    borderRadius: 12,
                                }}>
                                <Icon size={20} name="cloud-upload" />
                                <View style={{ marginLeft: 12, flex: 1 }}>
                                    <Text style={{ marginTop: 2 }}>
                                        {title}
                                    </Text>
                                    <Text
                                        numberOfLines={1}
                                        adjustsFontSizeToFit
                                        style={{ marginTop: 8 }}>
                                        {message}
                                    </Text>
                                </View>
                                <Icon size={20} name="x" />
                            </View>
                        ),
                        message: 'filetitle.pdf was uploaded successfully',
                        title: 'Upload successful',
                        status: 'success',
                    })
                }
            />
        </View>
    );
}

Custom Toastable – Global Component

You can pass your own renderContent function to Toastable component.

export default function Example() {
    return (
        <View style={{flex:1}}>
            <Button
                title="Show Toastable"
                onPress={() =>
                    showToastable({
                        title: 'React Native Heroes',
                        message: 'We are the heroes of React Native ?',
                        status: 'success',
                    })
                }
            />
            <Toastable
                renderContent={(props) => {
                    return (
                        <View
                            style={{
                                flexDirection: 'row',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                                paddingVertical: 16,
                                paddingHorizontal: 12,
                                backgroundColor: TOASTABLE_STATUS_MAP[props.status ?? 'info'],
                                borderRadius: 12,
                                borderBottomLeftRadius: 0,
                                borderBottomRightRadius: 0,
                            }}>
                            <View style={dw.rowHCenter}>
                                <ClearText color="gray-100">{props.title}</ClearText>
                                <ClearText
                                    color="gray-400"
                                    style={{ marginTop: 4 }}
                                    variant="small-none-regular">
                                    {props.message}
                                </ClearText>
                            </View>
                        </View>
                    );
                }}
            />
        </View>
    );
}

Custom Toastable – Custom Status Colors

export default function Example() {
    return (
        <View style={{flex:1}}>
            <Button
                title="Show Toastable"
                onPress={() => showToastable({ message: 'React Native Heroes is awesome! ?', status:'success' })}
            />
            <Toastable
                statusMap={{
                    success: '#00BFA6',
                    danger: '#FF5252',
                    warning: '#FFD600',
                    info: '#2962FF',
                }}
            />
        </View>
    );
}

Advanced Usage

Control toastable’s content through showToastable function

export default function Example() {
    return (
        <View style={{flex:1}}>
            <Button
                title="Show Toastable"
                onPress={() =>
                    showToastable({
                        message: 'React Native Heroes is awesome! ?',
                        alwaysVisible: true,
                        animationInTiming: 1000,
                        animationOutTiming: 1000,
                        backgroundColor: 'red',
                        duration: 2000,
                        contentStyle: {
                            marginHorizontal: 20,
                        },
                        onPress: () => {
                            console.log('onPress');
                        },
                        status: 'success',
                        swipeDirection: 'left',
                        messageColor: 'white',
                    })
                }
            />
            <Toastable />
        </View>
    );
}

Control its content through Toastable component

export default function Example() {
    return (
        <View style={{flex:1}}>
            <Button
                title="Show Toastable"
                onPress={() =>
                    showToastable({ message: 'React Native Heroes is awesome! ?', status: 'success'})
                }
            />
            <Toastable
                containerStyle={{ marginHorizontal: 20 }}
                alwaysVisible
                animationInTiming={2000}
                animationOutTiming={2000}
                duration={5000}
                onToastableHide={() => {
                    console.log('onToastableHide');
                }}
                statusMap={{
                    success: 'green',
                    danger: 'red',
                    info: 'blue',
                    warning: 'yellow',
                }}
                renderContent={(props) => <ToastableBody {...props} />}
                swipeDirection={['left', 'right']}
            />
        </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

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

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
  • Support snackbars
  • Add custom status support

Inspiration

License

MIT

GitHub

View Github