0.0.2 • Published 5 years ago

react-native-toast-with-button v0.0.2

Weekly downloads
67
License
MIT
Repository
github
Last release
5 years ago

react-native-toast-with-button

A react native module to show toast with button (with onPress), it works on iOS and Android.

Content

Installation

  • 1.Run npm i react-native-toast-with-button --save
  • 2.import {Toast} from 'react-native-toast-with-button'

Getting started

Add react-native-toast-with-button to your js file.

import {Toast} from 'react-native-toast-with-button'

Inside your component's render method, use Toast:

 render() {
         return (
             <View style={styles.container}>
                 ...
                 <Toast 
                    ref="toast"
                    opacity={1}
                 />
             </View>
         );
 }

Note: Add it in the bottom of the root view.

Then you can use it like this:

 this.refs.toast.show(
                     'Example',         //text in Toast
                     2500,              //duration
                     "alert",           //textButton
                     () => alert(''),   //onPress  
                     null               //callback
                     
                 );

That's it, you're ready to go!

Or pass an element:

    this.refs.toast.show(<View><Text>hello world!</Text></View>);

Basic usage

show = () => {
     this.refs.toast.show(
         "Example", 
         2500,  
         "close",                       
         () => this.refs.toast.close(),
         null                           
     );
};

render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    style={{padding: 10}}
                    onPress={()=>{
                        this.show()
                    }}>
                    <Text>Press me</Text>
                </TouchableHighlight>
                <Toast ref="toast"/>
            </View>
        );
    }

Custom Toast

render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    style={{padding: 10}}
                    onPress={()=>{
                        this.refs.toast.show('hello world!',1000);
                    }}>
                    <Text>Press me</Text>
                </TouchableHighlight>
                <Toast
                    ref="toast"
                    style={{backgroundColor:'white'}}
                    position='custom' 
                    positionValue={{top: 200}}
                    fadeInDuration={750}
                    fadeOutDuration={1000}
                    opacity={0.8}
                    textStyle={{color:'red'}}
                />
            </View>
        );
    }

API

PropsTypeOptionalDefaultDescription
styleView.propTypes.styletrue{backgroundColor: 'black',flex: 1,flexDirection:"row",justifyContent: "space-between",padding: 20,width: "100%"}Custom style toast
positionPropTypes.oneOf('top','custom','bottom')true'bottom'Custom toast position
positionValueReact.PropTypes.numbertrue{bottom: 0}Custom toast position value
fadeInDurationReact.PropTypes.numbertrue500Custom toast show duration
fadeOutDurationReact.PropTypes.numbertrue500Custom toast close duration
opacityReact.PropTypes.numbertrue1Custom toast opacity
textStyleView.propTypes.styletrue{color:'white'}Custom style text
textButtonStyleView.propTypes.styletrue{color: 'white', width: "auto"}Custom style text in Button
buttonStyleView.propTypes.styletrue{}Custom style text in Button
MethodTypeOptionalDescription
show(text,duration, textButton,onPress, callback)functionfalseshow a toast,text in Button, onPress, unit is millisecond,and do callback
close()function-closing toast

MIT Licensed