JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 96
  • Score
    100M100P100Q111263F
  • License MIT

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

Package Exports

  • react-native-smart-tip

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-smart-tip) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-smart-tip

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

GitHub license npm

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

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 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
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',
        actionClick: ()=>{
        	// 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
actionClick Function false undefined listener click
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
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