1.0.6 • Published 4 years ago

react-native-modal-spinner v1.0.6

Weekly downloads
10
License
MIT
Repository
github
Last release
4 years ago

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

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

PropertyTypeDefaultDescription
visibleBooleanfalseBoolean to show/hide the spinner
sizeString (enum) small, large"small"Size of the spinner
backgroundColorString-Color of the spinner background
onCloseFunction-Callback that is called when the user taps the back button
colorStringdefault is gray on iOS and dark cyan on AndroidColor of the spinner

License

MIT © Ajay