@ouroboros/react-native-snackbar

A cross platform react-native-snackbar for showing user's messages and allowing them to take an extra action, like UNDO

Installation

react-native

npm install @ouroboros/react-native-snackbar

expo

expo install @ouroboros/react-native-snackbar

Getting Started

Import Snackbar in your main App file

import { Snackbar } from '@ouroboros/react-native-snackbar';

Add it to the app

export default function App() {
    return (
        <View>
            <Test />
            <Snackbar />
        </View>
    );
}

Import addMessage into other components (or in the App)

import { addMessage } from '@ouroboros/react-native-snackbar';

Add messages from other components

export default function Test(props) {
    return (
        <View>
            <TouchableOpacity onPress={() => addMessage('Hello!')}>
                <Text>Click Me!</Text>
            </TouchableOpacity>
        </View>
    );
}

addMessage

The addMessage function can be passed a single string, resulting in the default duration with no action, or it can be passed the following structure

{
    text: string;
    duration?: number;
    action?: {
        text: string;
        onPress: () => void;
    }
}

Duration is milliseconds (1000 = 1 second) before the popup disappears, default is 1000.

Action is an additional touchable opacity, added on the right hand side of the popup, which will call the onPress callback if pressed.