react-native-modal-spinner

React-Native-Modal-Spinner

A simple and fully customizable cross-platform React Native component that implements a spinner UI.

Screenshots

Getting Started

Prerequisites

NodeJS >= v8.11.1 react-native-cli >= 2.0.1 react-native >= 0.57.4 npm >= 5.6.0

Table of Contents

• Install
• Example
• Options
• License

Install

npm:

npm install react-native-modal-spinner

Example

import React, { Component } from "react";
import { View, Button } from "react-native";
import Spinner from "react-native-modal-spinner";

class SpinnerComponent extends Component {
  state = {
    visible: false
  };

  showSpinner = () => {
    this.setState({ visible: true }, () => {
      setTimeout(() => {
        this.setState({ visible: false });
      }, 3000);
    });
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "#FFF"
        }}
      >
        <Button title="Show spinner" onPress={this.showSpinner} />
        <Spinner
          color="red"
          size="small"
          backgroundColor="#FFF"
          visible={this.state.visible}
          onClose={() => this.setState({ visible: false })}
        />
      </View>
    );
  }
}

Options

License

MIT Ajay