https://github.com/kdastan/react-native-modal-loader

Customizable animated modal progress hud for react apps.
https://github.com/kdastan/react-native-modal-loader

hud javascript loader modal progress react-native

Last synced: about 1 month ago
JSON representation

Customizable animated modal progress hud for react apps.

• Host: GitHub
• URL: https://github.com/kdastan/react-native-modal-loader
• Owner: kdastan
• License: mit
• Created: 2018-03-24T19:59:27.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-07-23T16:57:38.000Z (over 4 years ago)
• Last Synced: 2024-12-01T09:55:37.041Z (about 2 months ago)
• Topics: hud, javascript, loader, modal, progress, react-native
• Language: JavaScript
• Homepage:
• Size: 95.7 KB
• Stars: 39
• Watchers: 5
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-modal-loader ★19 - Customizable animated modal progress hud for react apps. (Components / UI)
• awesome-reactnative-ui - react-native-modal-loader - native-modal-loader/blob/master/demo/demonstration.gif)| (Others)
• awesome-react-native - react-native-modal-loader ★19 - Customizable animated modal progress hud for react apps. (Components / UI)
• awesome-reactnative-ui - react-native-modal-loader - native-modal-loader/blob/master/demo/demonstration.gif)| (Others)
• awesome-react-native - react-native-modal-loader ★19 - Customizable animated modal progress hud for react apps. (Components / UI)
• awesome-react-native - react-native-modal-loader ★19 - Customizable animated modal progress hud for react apps. (Components / UI)

README

        
# react-native-modal-loader

[![Platform](https://img.shields.io/badge/platform-react--native-lightgrey.svg)](http://facebook.github.io/react-native/)

[![npm version](http://img.shields.io/npm/v/react-native-modal-loader.svg)](https://www.npmjs.com/package/react-native-modal-loader)

[![npm downloads](https://img.shields.io/npm/dm/react-native-modal-loader.svg?update=7)](http://badge.fury.io/js/react-native-modal-loader)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.github.com/testshallpass/react-native-dropdownalert/master/LICENSE)

A progress hud for react apps

## Installation

Install the module from npm with `npm install react-native-modal-loader --save`.

## Demo



## Usage

Import module using `import Loader from 'react-native-modal-loader';`, then place component at the top of your view container.

### Properties

| Prop    | Default | isRequired |        Type        | Description                              |

| :------ | :-----: | :--------: | :----------------: | :--------------------------------------- |

| loading |  false  |    true    |        bool        | Whether to show the loader or hide it    |

| color   |  grey   |   false    |       color        | Color of the spinner                     |

| size    |  small  |   false    | 'small' or 'large' | Size of the spinner                      |

| opacity |   0.4   |   false    |       number       | Background opacity value between 0 and 1 |

| title   |   ""    |   false    |       string       | Description for loader                   |

## Example

```js

import React, { Component } from "react";

import { StyleSheet, Button, Text, View } from "react-native";

import Loader from "react-native-modal-loader";

export default class App extends Component {

  state = {

    isLoading: false

  };

  showLoader = () => {

    this.setState({ isLoading: true });

  };

  render() {

    return (

      

        

        

      

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: "center",

    alignItems: "center",

    backgroundColor: "#F5FCFF"

  }

});

```

## Future goals

- [ ] New animation style

## License

[MIT License](http://opensource.org/licenses/mit-license.html). © Kumar Dastan