react-native-root-tips

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>;
    }
}