nativerepo.com

react-native-smart-toast

npm npm npm npm

A android like toast for react-native apps, written in JS for cross-platform support. It works on iOS and Android.

This component is compatible with React Native 0.25 and newer.

Preview

react-native-smart-toast-preview-ios react-native-smart-toast-preview-android

Installation

npm install react-native-smart-toast --save

Full Demo

see ReactNativeComponentDemos

Usage

Install the toast from npm with npm install react-native-smart-toast --save. Then, require it from your app's JavaScript files with import toast from 'react-native-smart-toast'.


import React, {
    Component,
} from 'react'
import {
    View,
} from 'react-native'

import Button from 'react-native-smart-button'
import TimerEnhance from 'react-native-smart-timer-enhance'
import Toast from 'react-native-smart-toast'

class LoadingToast extends Component {

    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return (
            <View style={{ paddingTop: 64, flex: 1, backgroundColor: '#fff',}}>
                <Button
                    onPress={this._showTopToast}
                    touchableType={Button.constants.touchableTypes.fadeContent}
                    style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
                    textStyle={{fontSize: 17, color: 'white'}}
                >
                    show top (顶部显示)
                </Button>

                <Button
                    onPress={this._showCenterToast}
                    touchableType={Button.constants.touchableTypes.highlight}
                    underlayColor={'#C90000'}
                    style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
                    textStyle={{fontSize: 17, color: 'white'}}
                >
                    show center (中心显示)
                </Button>

                <Button
                    onPress={this._showBottomToast}
                    touchableType={Button.constants.touchableTypes.blur}
                    style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
                    textStyle={{fontSize: 17,  color: 'white'}}

                >
                    show bottom (底部显示)
                </Button>
                <Button
                    onPress={this._showFastToast}
                    style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
                    textStyle={{fontSize: 17, color: 'white'}}
                >
                    show fast (快速显示)
                </Button>
                <Button
                    onPress={this._showFastToastAndAnimatedHide}
                    style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
                    textStyle={{fontSize: 17, color: 'white'}}
                >
                    show fast immediate hide
                </Button>
                <Button
                    onPress={this._showImmediateToast}
                    style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
                    textStyle={{fontSize: 17, color: 'white'}}
                >
                    show immediate (立即显示)
                </Button>
                <Button
                    onPress={this._showImmediateToastAndAnimatedHide}
                    style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
                    textStyle={{fontSize: 17, color: 'white'}}
                >
                    show immediate animated hide
                </Button>

                <Toast
                    ref={ component => this._toast = component }
                    marginTop={64}>
                    Unable to connect to apple store
                </Toast>
            </View>
        )
    }

    _showTopToast = () => {
        this._toast.show({
            position: Toast.constants.gravity.top,
        })
    }

    _showCenterToast = () => {
        this._toast.show({
            position: Toast.constants.gravity.center,
            children: <View><Text style={{color: 'yellow'}}>Unalbe to download now</Text></View>
        })
    }

    _showBottomToast = () => {
        this._toast.show({
            position: Toast.constants.gravity.bottom,
            children: 'Unalbe to upload now'
        })
    }

    _showFastToast = () => {
        this._toast.show({
            position: Toast.constants.gravity.center,
            duration: 255,
            children: 'Unable to connect to apple store'
        })
    }

    _showFastToastAndAnimatedHide = () => {
        this._toast.show({
            position: Toast.constants.gravity.center,
            duration: 255,
            children: 'Unable to connect to google store',
            animationEnd : () => {
                this._toast._toastAnimationToggle = this.setTimeout( () => {
                    this._toast.hide({
                        duration: 0,
                        animationEnd: () => {
                            //do sth...
                        }
                    })
                }, 3000)
            }
        })
    }

    _showImmediateToast = () => {
        this._toast.show({
            position: Toast.constants.gravity.center,
            duration: 0,
            children: 'Unable to connect to wifi',
        })
    }
    _showImmediateToastAndAnimatedHide = () => {
        this._toast.show({
            position: Toast.constants.gravity.center,
            duration: 0,
            children: 'Unable to connect to wlan',
            animationEnd : () => {
                this._toast._toastAnimationToggle = this.setTimeout( () => {
                    this._toast.hide({
                        animationEnd: () => {
                            //do sth...
                        }
                    })
                }, 3000)
            }
        })
    }

}


export default TimerEnhance(LoadingToast)

Props

PropTypeOptionalDefaultDescription
stylestyleYessee react-native documents
textStylestyleYessee react-native documents
spacingnumberYes30determine the top or bottom spacing when the position is on the top or bottom
positionstyleYesconstants.bottomdetermine the position of toast
durationnumberYes3000determine the residence duration after toast is shown
animatedDurationnumberYes510determine the duration of toast animation
delaynumberYes0determine the delay of toast animation
marginTopnumberYes0determine the marginTop of the root container view, it is used when toast's position is constants.top

Method

  • show({children, position, duration, easing, delay, animationEnd,})

    • children: determine the children of toast
    • position: determine the position of toast. enum(gravity.bottom, gravity.top, gravity.center)
    • duration: determine the duration of animation
    • easing: determine the easing of animation
    • delay: determine the delay of animation
    • animationEnd: determine the callback when animation is end
  • hide({duration, easing, delay, animationEnd,})

    • duration: determine the duration of animation
    • easing: determine the easing of animation
    • delay: determine the delay of animation
    • animationEnd: determine the callback when animation is end

Comments
Details
Added at: 2017/03/19
Owner: react-native-component
Category: other
Homepage: https://github.com/react-native-component/react-native-smart-toast#readme
Downloads last month: 152
Version: 1.1.1
Compatibility
  •  
  •  

Add to your project

npm i --save react-native-smart-toast
yarn add react-native-smart-toast