react-native-tiny-toast

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

Features

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

Demo

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

Name | Default | Type | Description --------------------|--------------------------|----------------------|--------------------------- containerStyle | null | ViewPropTypes.style | Custom container style duration | Toast.durations.SHORT | Number | Toast duration(ms), won't disappear if value is 0 delay | 0 | Number | The delay duration before toast start appearing on screen. animationDuration | 200 | Number | Animation duration visible | false | Boolean | Show toast. (Only for Toast Component) position | Toast.position.bottom | Number | 0 means the middle of the screen.A negative number indicates the distance to the bottom of the screen.A positive number indicates the distance to the top of the screen. animation | true | Boolean | Whether to enable fade animation shadow | false | Boolean | Whether to enable shadow shadowColor | #000 | String | Shadow color(don't support android) showText | true | Boolean | Whether to show text textColor | #fff | String | Text color textStyle | null | Text.propTypes.style | Text style mask | false(true when showLoading) | Boolean | Whether to enable mask maskColor | rgba(0,0,0,0.3) | String | Mask background color maskStyle | null | ViewPropTypes.style | Mask style imgSource | null | Image.source | Image source imgStyle | null | Image.propTypes.style| Image style loading | false(true when showLoading) | Boolean | Whether to show loading indicatorSize | large | String or Number | Set the ActivityIndicator size，Currently only specific values can be set on Android. onHidden | null | Function | Triggered when toast's hide animation end onMaskPress | null | Function | Triggered when the mask is clicked
Method | Type | Description ---------------------------|----------|------------------- show(text, options) | Function | Show a toast showSuccess(text, options) | Function | Show a toast with success icon showLoading(text, options) | Function | Show a toast with ActivityIndicator hide(toast) | Function | If you don't pass toast，it will hide the last toast by default.
MIT Licensed