Skip to content

kdastan/react-native-modal-loader

Repository files navigation

react-native-modal-loader

Platform npm version npm downloads 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

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 goals

  • New animation style

License

MIT License. © Kumar Dastan