react-native-tiny-toast

---

A react native toast like component , it works on IOS and Android.

Features of React Native Tiny Toast:

• Support iPhone X, XS, XS Max & XR.
• Support both Android and IOS.
• Custom icon and style and so on.
• Use native ActivityIndicator.

---

Demo Screenshot

 

---

How To Install?

 

npm i react-native-tiny-toast --save

OR

yarn add react-native-tiny-toast

---

Getting started:

import Toast from 'react-native-tiny-toast'

Toast.show('This is a default toast')

Toast.showSuccess('Pay success')

Toast.show('Custom toast',{
  position: Toast.position.center,
  containerStyle:{},
  textStyle: {},
  imgSource: require('xxx'),
  imgStyle: {},
  mask: true,
  maskStyle:{},
  ...
})

const toast = Toast.showLoading('Loading...')
setTimeout(() => {
  // Recommend
  Toast.hide(toast) 
  // or Toast.hide()
  // If you don't pass toast，it will hide the last toast by default.
 }, 3000)

---

Using a Component

import React, {Component} from 'react-native'
import Toast from 'react-native-tiny-toast'

class Example extends Component {
    state={
      visible: false
    }
    
    componentDidMount() {
        setTimeout(() => this.setState({
            visible: true
        }), 1000); 

        setTimeout(() => this.setState({
            visible: false
        }), 3000);
    };

    render() {
        return 
        <Toast
            visible={this.state.visible}
            position={50}
            onHidden={()=>{
              // onHidden
            }}>This is a message
        </Toast>
    }
}

 

Api

---

---

Github Link

Tagged : react native / react native toast / React Native Toast works on ios and android / toast in ios and android / toast in react native