Nocturnally Psychologizing Millipede

    @fengweichong/react-native-smart-tip
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.6 • Public • Published

    react-native-smart-tip

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

    GitHub license npm

    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 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 '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 '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
    padding Number false 10 padding
    paddingTop Number false 10 padding top
    paddingBottom Number false 10 padding bottom
    paddingLeft Number false 10 padding left
    paddingRight Number false 10 padding right
    icon Component fasse undefined Image to be displayed
    onRequestClose Function false undefined Android Back
    MIT Licensed

    Install

    npm i @fengweichong/react-native-smart-tip

    DownloadsWeekly Downloads

    0

    Version

    2.2.6

    License

    MIT

    Unpacked Size

    68 kB

    Total Files

    19

    Last publish

    Collaborators

    • fengweichong