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