JSPM – react-native-modal-loader@1.3.0

Package Exports

react-native-modal-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-modal-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Example

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 (
      <View style={styles.container}>
        <Loader loading={this.state.isLoading} color="#ff66be" />
        <Button title="Press me!" onPress={this.showLoader} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
});

Future purposes

New animation style
Add prop to write title

react-native-modal-loader