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

Property	Type	Default	Description
visible	Boolean	false	Boolean to show/hide the spinner
size	String (enum) small, large	"small"	Size of the spinner
backgroundColor	String	-	Color of the spinner background
onClose	Function	-	Callback that is called when the user taps the back button
color	String	default is gray on iOS and dark cyan on Android	Color of the spinner

License

MIT © Ajay