Simple snackbar component for Android and iOS.

Usnack is a simple snackbar component that works seamlessly in Android and iOS, it does not have any external dependency and is extremely easy to import and use.

Its default style may remind you the one used in the Instagram app.

1. Install it with npm:

npm install usnack

or yarn:

yarn add usnack

2. Import in your Js:

import Usnack from 'usnack';

3. Use:

Usnack.show();

<Usnack.component text='Hello world'/>

show(options = {})

Fades in all the Usnack.components.

The optional parameter options must be an object which can have the following properties:

• duration (The display time in milliseconds, by default it is 3000).

• effect_duration (The fade in and out duration time in milliseconds, by default it is 1000).

• native_driver (Use or not the native driver, by default it is true).

• opacity (The final opacity, by default it is 1).

Simple text:

import Usnack from 'Usnack';

function example() {
    Usnack.show();
    return <Usnack.component text='No internet connection'/>;
}

Custom time:

import View from 'react-native';
import Usnack from 'Usnack';

function example() {
    Usnack.show({
        duration: 10000,
        effect_duration: 5000,
    });

    return (
        <View>
            <Usnack.component text='Waiting 5 seconds'/>
        </View>
    );
}

Custom time and styles:

import View from 'react-native';
import Usnack from 'Usnack';

function example() {
    Usnack.show({
        duration: 5000,
        effect_duration: 500,
    });

    return (
        <View>
            <Usnack.component
                text='Slow fade in and out ;)'
                containerStyle={{
                    top: 'inherit',
                    bottom: 100,
                }}
            />
        </View>
    );
}

Any contribution or support to this project in the form of a issue, pull request or message will be highly appreciated. ❤️

You can read more about it right here. Don't be shy :)

Usnack is open-source software licensed under the MIT license.