JSPM – react-native-modal-loader@1.1.2

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.

import React, { Component } from 'react';
import {
  StyleSheet,
  TouchableOpacity,
  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} />
        <TouchableOpacity onPress={() => this.showLoader()}>
          <View style={styles.buttonContainer}>
            <Text style={{ color: 'white', fontSize: 18 }}>
              {'Show Loader'}
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  buttonContainer: {
    height: 40,
    width: 160,
    backgroundColor: 'aqua',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Future purposes

Update Readme
Add Prop.Types
Make customizable

react-native-modal-loader