1.1.2 • Published 4 years ago

react-native-root-tips v1.1.2

Weekly downloads
9
License
MIT
Repository
github
Last release
4 years ago

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

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

NameDefaultTypeDescription
durationToast.durations.SHORTNumberThe duration of the toast. (Only for api calling method)
visiblefalseBoolThe visibility of toast. (Only for Toast Component)
positionToast.positions.CENTERNumberThe 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.)
animationtrueBoolShould preform an animation on toast appearing or disappearing.
shadowtrueBoolShould drop shadow around Toast element.
backgroundColornullStringThe background color of the toast.
shadowColornullStringThe shadow color of the toast.
textColornullStringThe text color of the toast.
delay0NumberThe delay duration before toast start appearing on screen.
hideOnPressfalseBoolShould hide toast that appears by pressing on the toast.
onShownullFunctionCallback for toast`s appear animation start
onShownnullFunctionCallback for toast`s appear animation end
onHidenullFunctionCallback for toast`s hide animation start
onHiddennullFunctionCallback for toast`s hide animation end

adding props

Name              Default                Type  Description
showLoading         null                  Functionconvenience method,show an Loading tips
showSuccess         null                  Functionconvenience method,show an Success tips
showFail         null                  Functionconvenience method,show an Fail tips
showInfo         null                  Functionconvenience method,show an Info tips
showWarn         null                  Functionconvenience method,show an Warn tips
hide         null                  Functionhide showing tips
imageLoading        null              ObjectshowLoading method custom Image
imageSuccess        null              ObjectshowSuccess method custom Image
imageFail       null              ObjectshowFail method custom Image
imageInfo        null              ObjectshowInfo method custom Image
imageWarn        null              ObjectshowWarn 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>;
    }
}
1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.1

5 years ago

1.0.0

6 years ago

0.0.26

6 years ago

0.0.25

6 years ago

0.0.24

6 years ago

0.0.23

6 years ago

0.0.21

6 years ago

0.0.20

6 years ago

0.0.19

6 years ago

0.0.18

6 years ago

0.0.17

6 years ago

0.0.15

6 years ago

0.0.14

6 years ago

0.0.13

6 years ago

0.0.12

6 years ago

0.0.11

6 years ago

0.0.10

6 years ago

0.0.9

6 years ago

0.0.8

6 years ago

0.0.7

6 years ago

0.0.6

6 years ago

0.0.5

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago