Introduction

React Native Easy Toast is a library for displaying toast notifications in React Native applications. Toast notifications are non-intrusive messages that appear on the screen to provide users with feedback or information about a specific action. The library is lightweight and easy to use, making it a popular choice among React Native developers.

Features of React Native Easy Toast

React Native Easy Toast offers several features that make it a powerful library for displaying toast notifications in React Native applications. Some of the notable features include:

1. Easy to Use: The library is straightforward to use and requires minimal setup, making it an ideal choice for beginners.
2. Customizable: React Native Easy Toast allows you to customize the appearance and behavior of the toast notifications to match your application’s design and requirements.
3. Flexibility: The library supports a wide range of toast notification types, including success, error, warning, and information messages.
4. Animations: The toast notifications come with built-in animation effects that enhance the user experience of your application.

API

Installation

npm i react-native-easy-toast --save

Or

yarn add react-native-easy-toast

Example

import React, {Component} from 'react';
import {
    Button,
    StyleSheet,
    Text,
    View,
} from 'react-native';
import Toast, {DURATION} from 'react-native-easy-toast'

export default class ToastTest extends Component {
    constructor(props) {
        super(props);
        this.state = {
            position: 'bottom',
            style: {},
        }
    }

    onClick(text, position, duration, withStyle) {
        this.setState({
            position: position,
        })
        if (withStyle) {
            this.toastWithStyle.show(text, duration);
        } else {
            this.toast.show(text, duration);
        }
    }

    getButton(text, position, duration, withStyle) {
        return (
            <Button
                style={{padding: 10}}
                onPress={() => this.onClick(text, position, duration, withStyle)}
                title={text}
            />
        )
    }

    render() {
        return (
            <View style={styles.container}>
                {this.getButton('LENGTH_SHORT+top', 'top', DURATION.LENGTH_SHORT)}
                {this.getButton('LENGTH_SHORT+bottom', 'bottom', DURATION.LENGTH_SHORT)}
                {this.getButton('LENGTH_LONG+top', 'top', 2000)}
                {this.getButton('LENGTH_LONG+bottom', 'bottom', 2000)}
                {this.getButton('LENGTH_LONG+bottom+custom style', 'bottom', 2000, true)}
                <Toast ref={(toast) => this.toast = toast} position={this.state.position}/>
                <Toast ref={(toast) => this.toastWithStyle = toast} style={{backgroundColor: 'red'}}
                       position={this.state.position}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

Tutorial

Coming Soon…