Wjx-react-native-busy-modal NPM

npm.io

wjx-react-native-busy-modal

A component for React Native, is a modal, used to show something is being processed. You can customize the wait animation, modal animation, text prompt in your component, and so on.

Features

Customizable prompts
Simple call method
No intrusion

effect

on IPhone

Demo

Demo is under the example folder, you can run it in the following way: Under the root directory, run such:

npm install
cd example && npm install && react-native run-ios

Setup

This library is available on npm, install it with:

npm install --save wjx-react-native-busy-modal

yarn add wjx-react-native-busy-modal

Usage

Add <BusyModal/> as child nodes under the View of the root node of the app

import {BusyModal} from 'wjx-react-native-busy-modal';

...

render() {
    return (
        <View style={{flex:1}}>
            ...Other Components
            <BusyModal/>
        </View>
    );
}

Call BusyModalManagers's method, when need to use.

import {BusyModalManager} from 'wjx-react-native-busy-modal';

...


<TouchableOpacity onPress={() => {
    BusyModalManager.show();
    setTimeout(() => {
        BusyModalManager.hide();
    }, 5000);
}}>
    <Text>Show</Text>
</TouchableOpacity>

Available props

Name	Type	Default	Description
title	string	"Loading"	Title
containerStyle	object	{}	Modal style
imageStyle	object	{}	Image Style
titleStyle	object	{}	Title Style
animated	boolean	true	Gradually into the fade out
enableCancelOnClickBlank	boolean	false	Enable hide modal, when blank is clicked
enableCancelOnClickModal	boolean	false	Enable hide modal, when modal is clicked
gifInterval	number	0	When custom loading image, set interval ms for each image
gifImages	array	(house)	When custom loading image, set all images

Methods

You can use BusyModalManager's methods to control the component.

Method	Description
show()	Show the modal
hide()	Hide the modal
showDelay(Number ms)	Delay ms to show
delayShow(Number ms)	Show modal, then wait for ms to hide
changeToTempTitle(String title)	Modify the title as temporary title, until the modal is hidden