react-native-smart-tip

React-native smart tip, including Toast、Modal、SnackBar

2021.4

In react native >= 0.62, the new LogBox component would impact this component's initialization. To make it work we have to explicitly insert a mount point in your app like this

import { WRootToastApp } from 'react-native-smart-tip'

// in your entry file like `App.js`

return (
  <WRootToastApp>  // <- use WRootToastApp to wrap your root component
    <App />
  </WRootToastApp>
);

2020.5

1. Add property isShowShadow to WSnackBar and WToast
2. Add sliding hide function for WSnackBar

2020.3 Show Toast above Modal (Compatible with Android and iOS)

import { ModalShowToastView } from 'react-native-smart-tip'

getToastInstance = (toastInstance) => {
    this.toastInstance = toastInstance;
}

<Modal>
    <View>
        <ModalShowToastView toastInstance={this.getToastInstance} />
    </View>
</Modal>

this.toastInstance({data: 'toast'})

2019.7 Remove the method in the componentWillMount method. Compatible with future React 17 versions, React-Native@0.6 version.

Installation

yarn add react-native-smart-tip
or
npm i react-native-smart-tip --save 

Features

Toast

SnackBar

Modal

Show tips on Modal

Tip: Modal shows that modal can only be used on Android issue

Usage

WToast

import {WToast} from 'react-native-smart-tip'

// Base 
show = () => {
    WToast.show({data: 'hello world'})
}

// Other
show = () => {
    const toastOpts = {
        data: 'Success',
        textColor: '#ffffff',
        backgroundColor: '#444444',
        duration: WToast.duration.LONG, //1.SHORT 2.LONG
        position: WToast.position.TOP, // 1.TOP 2.CENTER 3.BOTTOM
        icon: <Image source={require('../data/img/success.png')} style={{width: 32,height: 32,resizeMode: 'contain'}}/>
    }

    WToast.show(toastOpts)
}

WToast.hide(); // Can be hidden immediately

WToast API

WSnackBar

import {WSnackBar} from 'react-native-smart-tip'

// Base 
show = () => {
    WSnackBar.show({data: 'hello world'})
}

// Other
show = () => {
    const snackBarOpts = {
        data: 'Please check the network first.',
        position: WSnackBar.position.BOTTOM, // 1.TOP 2.CENTER 3.BOTTOM
        duration: WSnackBar.duration.LONG, //1.SHORT 2.LONG 3.INDEFINITE
        textColor: '#ff490b',
        backgroundColor: '#050405',
        actionText: 'Sure',
        actionTextColor: '#ff490b',
        onActionHide: (isSlideHide)=>{
            // Click Action
        },
    }

    WSnackBar.show(snackBarOpts)
}

WSnackBar API

WModal

import {WModal} from 'react-native-smart-tip'

// Base 
show = () => {
    WModal.show({data: 'hello world'})
}

// Other
show = () => {
    const modalOpts = {
        data: 'Loading',
        textColor: '#fff',
        backgroundColor: '#444444',
        position: WModal.position.CENTER,
        icon: <ActivityIndicator color='#fff' size={'large'}/>
    }

    WModal.show(modalOpts)
}

WToast API

MIT Licensed