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