Skip to content

openUmbrella/react-native-root-tips

Repository files navigation

react-native-root-tips

screen-shoot

Features

  1. Pure javascript solution.
  2. Support both Android and iOS.
  3. Lots of custom options for Toast.
  4. You can show/hide Toast by calling api or using Component inside render.
  5. You can custom icon and text and so on
  6. Provide a global setting default options method: setDefaultOptions
  7. Provide convenience methods: showLoading/showSuccess/showInfo/showWarn
  8. Better performance

如果你恰好也在天朝,请点击这里

Thanks

react-native-root-toast package's author

Install

npm install react-native-root-tips --save

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:

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

// In theory you don't have to install `react-native-root-siblings` because it's a dep of root-toast
// But you can install it explicitly if your editor complains about it.
import { RootSiblingParent } from 'react-native-root-siblings';

// in your render function 
return (
  <RootSiblingParent>  // <- use RootSiblingParent to wrap your root component
    <App />
  </RootSiblingParent>
);
            

You can skip this step if your react-native is lower than 0.62. And actually you can inject RootSiblingParent into anywhere like a react portal, for example if you have multiple rootviews you can choose where to display the root toast.

Read more about react-native-root-siblings which powers react-native-root-toast.

Simple Useage

convenience method usage

now, you can call these methods to show a tips

// show a loading tips
// you need call Tips.hide() to make tips disappear
Tips.showLoading('loading...');

// show a successful tips
Tips.showSuccess('wow! success');

// show a failed tips
Tips.showFail('em...failed');

// show a Info tips
Tips.showInfo('info tips');

// show a warning tips
Tips.showWarn('warning');

// ** you can call hide() to hide showing tips **
// Tips.hide();

if you don't like the default icons, you can setting them in setDefaultOptions method

//you can set a global default options you like
Tips.setDefaultOptions({
    showLoading: true,
    backgroundColor: 'gray',
    opacity: 0.95,
    textColor: 'white',
    
    // setting image you like
    imageLoading: require('xxxxxxxxxx'),
    imageSuccess: require('xxxxxxxxxx'),
    imageFail: require('xxxxxxxxxx'),
    imageInfo: require('xxxxxxxxxx'),
    imageWarn: require('xxxxxxxxxx'),
});

or, you want to set a special icon in some places. you can do that:

// example
Tips.showSuccess('difference icon',{image:require('yyyyyyyyyyy')});

normal usage

import Tips from 'react-native-root-tips';

  _sampleSimple(){
    Tips.show('hello world!');
  }
  _sampleDefaultLoading(){
    Tips.show('loading...',{showLoading: true});
  }
  _sampleDefaultSuccess(){
    Tips.show('loading success',{showSuccess: true});
  }
  _sampleDefaultFail(){
    Tips.show('loading fail',{showFail: true});
  }
  
  _sampleCustomImage(){
    // you can use local Image or net image
    // you need to set App Transport Security Settings -> Allow Arbitrary Loads is YES in info.plist
    Tips.show('Custom Images', { backgroundColor: 'white',textColor:'black',opacity:0.9,image:{uri:'https://github.com/openUmbrella/react-native-root-tips/raw/master/example/src/loading1.gif'}});
    
    // local Image
    // Tips.show('Custom Images',{image: require('./src/loading.gif')});
  }
  _sampleOnlyImage(){
    Tips.show('tips will not show',{showText: false,showLoading:true});
  }
  _sampleMask(){
    //when showing, you can't touch anything
    Tips.show('masking...',{mask:true,showLoading:true, maskColor:'gray'});
  }


Settings

Name Default Type Description
duration Toast.durations.SHORT Number The duration of the toast. (Only for api calling method)
visible false Bool The visibility of toast. (Only for Toast Component)
position Toast.positions.CENTER Number The position of toast showing on screen (A negative number represents the distance from the bottom of screen. A positive number represents the distance form the top of screen. 0 will position the toast to the middle of screen.)
animation true Bool Should preform an animation on toast appearing or disappearing.
shadow true Bool Should drop shadow around Toast element.
backgroundColor null String The background color of the toast.
shadowColor null String The shadow color of the toast.
textColor null String The text color of the toast.
delay 0 Number The delay duration before toast start appearing on screen.
hideOnPress false Bool Should hide toast that appears by pressing on the toast.
onShow null Function Callback for toast`s appear animation start
onShown null Function Callback for toast`s appear animation end
onHide null Function Callback for toast`s hide animation start
onHidden null Function Callback for toast`s hide animation end

adding props

Name               Default                 Type   Description
showLoading          null                   Function convenience method,show an Loading tips
showSuccess          null                   Function convenience method,show an Success tips
showFail          null                   Function convenience method,show an Fail tips
showInfo          null                   Function convenience method,show an Info tips
showWarn          null                   Function convenience method,show an Warn tips
hide          null                   Function hide showing tips
imageLoading         null               Object showLoading method custom Image
imageSuccess         null               Object showSuccess method custom Image
imageFail        null               Object showFail method custom Image
imageInfo         null               Object showInfo method custom Image
imageWarn         null               Object showWarn method custom Image
textFont             14                     Number     text's font
mask               false                     Bool     If can touch other place when shown
maskColor           string                   Bool     The mask's color
maskOpacity         false                     Bool     The mask's opacity
image         null                     Object   show image icon that you like. notice: if you setting image/showSuccess/showFail/showLoading at once, the priority is descendant
imageStyle         null                     Object   the image style
showText             true                     Bool     If show text
showSuccess         false                     Bool     If show default success icon
showFail         false                     Bool     If show default fail icon
showLoading         false                     Bool     If show default loading icon

Properties

Tips.durations

presets of duration of the toast.

  1. Tips.durations.SHORT (equals to 2000)

  2. Tips.durations.LONG (equals to 3500)

Tips.positions

presets of position of toast.

  1. Tips.positions.TOP (equals to 20)

  2. Tips.positions.BOTTOM (equals to -20)

  3. Tips.positions.CENTER (equals to 0)

Usage

There are two different ways to manage a Toast.

Calling api

NOTE: I recommend you to use this way

import Tips from 'react-native-root-tips';

// Add a Tips on screen.
let tips = Tips.show('This is a message', {
    duration: 2500,
    position: Tips.positions.CENTER,
    shadow: true,
    animation: true,
    hideOnPress: true,
    delay: 0,
    onShow: () => {
        // calls on toast\`s appear animation start
    },
    onShown: () => {
        // calls on toast\`s appear animation end.
    },
    onHide: () => {
        // calls on toast\`s hide animation start.
    },
    onHidden: () => {
        // calls on toast\`s hide animation end.
    }
});

// You can manually hide the Toast, or it will automatically disappear after a `duration` ms timeout.
setTimeout(function () {
    Tips.hide(tips);
}, 500);

Using a Component

NOTE: Showing a tips by using a Component inside render, The tips will be automatically disappeared when the <Tips /> is unmounted.

import React, {Component} from 'react-native';
import Tips from 'react-native-root-tips';

class Example extends Component{
    constructor() {
        super(...arguments);
        this.state = {
            visible: false
        };
    }

    componentDidMount() {
        setTimeout(() => this.setState({
            visible: true
        }), 2000); // show tips after 2s

        setTimeout(() => this.setState({
            visible: false
        }), 5000); // hide tips after 5s
    };

    render() {
        return <Tips
            visible={this.state.visible}
            position={50}
            shadow={false}
            animation={false}
            hideOnPress={true}
        >This is a message</Tips>;
    }
}