https://github.com/jancee/wjx-react-native-busy-modal

A component for React Native, is a modal, used to show something is being processed.
https://github.com/jancee/wjx-react-native-busy-modal

Last synced: 3 days ago
JSON representation

A component for React Native, is a modal, used to show something is being processed.

• Host: GitHub
• URL: https://github.com/jancee/wjx-react-native-busy-modal
• Owner: jancee
• License: bsd-3-clause
• Created: 2017-11-22T01:49:46.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-28T02:28:21.000Z (almost 7 years ago)
• Last Synced: 2024-08-28T12:22:29.365Z (3 months ago)
• Language: JavaScript
• Size: 395 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.MD
  • License: LICENSE

Awesome Lists containing this project

README

        
![](https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/react-native/react-native.png)

# wjx-react-native-busy-modal

[Click Here, 中文介绍](./README.zh.MD)

[![npm version](https://badge.fury.io/js/wjx-react-native-busy-modal.svg)](https://badge.fury.io/js/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](./images/gif-ios.gif)

# 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 

```

or

```

yarn add wjx-react-native-busy-modal

```

# Usage

Add `` as child nodes under the `View` of the `root node` of the app

```javascript

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

...

render() {

    return (

        

            ...Other Components

            

        

    );

}

```

Call BusyModalManagers's method, when need to use.

```javascript

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

...

 {

    BusyModalManager.show();

    setTimeout(() => {

        BusyModalManager.hide();

    }, 5000);

}}>

    Show

```

# 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 |

# Frequently Asked Questions

# About Me

My Blog: [王静茜的博客](http://blog.wjingxi.com)