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 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(() => {
        spinner: !this.state.spinner
    }, 3000);
  render() {
    return (
      <View style={styles.container}>
        <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>

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


React Native Loading Spinner Overlay

Download Details:

Author: ladjs

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

Add Comment