Usnack

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.

Install and use

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'/>

Usnack.Component properties

Prop	Data type	Description
text	string	The text to display
containerStyle	object	The style of the container
snackStyle	object	The style of the snackbar
textStyle	object	The style of the text

Show

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).

Examples

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>
    );
}

Contributing

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 :)

License

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