Animated Loading Spinner Overlay Component For React Native

An animated, customizable loading spinner overlay component for React Native.

How to use it:

1. Install & download.

# Yarn
$ yarn add react-native-loading-spinner-overlay

# NPM
$ npm i react-native-loading-spinner-overlay

2. Import the Loading Spinner Overlay component.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';

3. The example shows how to create a basic loading spinner overlay.

export default class App extends Component<Props> {
  state = {
    spinner: false
  };
  componentDidMount() {
    setInterval(() => {
      this.setState({
        spinner: !this.state.spinner
      });
    }, 3000);
  }
  render() {
    return (
      <View style={styles.container}>
        <Spinner
          visible={this.state.spinner}
          textContent={'Loading...'}
          textStyle={styles.spinnerTextStyle}
        />
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

4. Possible component props.

cancelable?: boolean,
color?: string,
animation?: 'none' | 'slide'| 'fade',
overlayColor?: string,
size?: 'small'| 'large' | number //size props does not support value normal
textContent?: string,
textStyle?: TextStyle,
visible?: boolean,
indicatorStyle?: ViewStyle,
customIndicator?: React.ReactNode,
children?: React.ReactNode,
spinnerKey?: string

Preview:

Download Details:

Author: ladjs

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/ladjs/react-native-loading-spinner-overlay

License: MIT