@flyskywhy/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 '@flyskywhy/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 '@flyskywhy/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, [email protected] version.

Installation

yarn add @flyskywhy/react-native-smart-tip
or
npm i @flyskywhy/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 '@flyskywhy/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 API

Props | Type | Required | Default | Description -------| -------- | -------- | ----------- | ----------- data | String | true | ' '| Displayed content duration | Number | false | WToast.duration.SHORT | The duration of the toast position | Number | false | WToast.position.BOTTOM | Displayed position inEasing | Easing | false | Easing.elastic(1)| Admission animation textColor| String | false |'white'| font color backgroundColor| String | false | 'black' | background color icon | Component | fasse | undefined | Image to be displayed isShowShadow | boolean | false | true | Shadow effect

WSnackBar

import {WSnackBar} from '@flyskywhy/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

Props | Type | Required | Default | Description -------| -------- | -------- | ----------- | ----------- data | String | true | ' '| Displayed content statusBarHeight | Number | false | -1 | Prevent Android statusBar height | Number | false | 44 | Height to display duration | Number | false | WSnackBar.duration.SHORT | The duration of the toast position | Number | false | WSnackBar.position.BOTTOM | Displayed position inEasing | Easing | false | Easing.linear| Admission animation textColor| String | false |'white'| font color backgroundColor| String | false | 'black' | background color actionText | String | false | undefined | action text actionTextColor | String | false | 'white' | action text color isAllowSlideExit|boolean | false | true | Whether to run sliding hide onActionHide | Function | false | undefined | listener click isShowShadow | boolean | false | true | Shadow effect numberOfLines|number| false | 1 | Maximum number of rows

WModal

import {WModal} from '@flyskywhy/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

Props | Type | Required | Default | Description -------| -------- | -------- | ----------- | ----------- data | String | true | ' '| Displayed content position | Number | false | WToast.position.BOTTOM | Displayed position inEasing | Easing | false | Easing.elastic(1)| Admission animation textColor| String | false |'white'| font color backgroundColor| String | false | 'black' | background color icon | Component | fasse | undefined | Image to be displayed onRequestClose|Function|false| undefined| Android Back

MIT Licensed