React Native Toast like component works on Both IOS and Android

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

react native toast

 


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


NameDefaultTypeDescription
containerStylenullViewPropTypes.styleCustom container style
durationToast.durations.SHORTNumberToast duration(ms), won’t disappear if value is 0
delay0NumberThe delay duration before toast start appearing on screen.
animationDuration200NumberAnimation duration
visiblefalseBooleanShow toast. (Only for Toast Component)
positionToast.position.bottomNumber0 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.
animationtrueBooleanWhether to enable fade animation
shadowfalseBooleanWhether to enable shadow
shadowColor#000StringShadow color (don’t support android)
showTexttrueBooleanWhether to show text
textColor#fffStringText color
textStylenullText.propTypes.styleText Style
maskfalse(true when showLoading)BooleanWhether to enable mask
maskColorrgba(0,0,0,0.3)StringMask background color
maskStylenullViewPropTypes.styleMask style
imgSourcenullImage.sourceImage source
imgStylenullImage.propTypes.styleImage Style
loadingfalse(true when showLoading)BooleanWhether to show loading
indicatorSizelargeString or NumberSet the ActivityIndicator size,Currently only specific values can be set on Android.
onHiddennullFunctionTriggered when toast’s hide animation end
onMaskPressnullFunctionTriggered when the mask is clicked
MethodTypeDescription
show(text, options)FunctionShow toast
showSuccess(text, options)FunctionShow toast with success icon
showLoading(text, options)FunctionShow toast with ActivityIndicator
hide(toast)FunctionIf you don’t pass toast,it will hide the last toast by default.

Github Link

https://github.com/shx996/react-native-tiny-toast

About: Aakash Kothari

I am passionate about my work. Because I love what I do, I have a steady source of motivation that drives me to do my best. In my last job, this passion led me to challenge myself daily and learn new skills that helped me to do better work


    Leave a Reply

    %d bloggers like this: