tnrn-loading

A smart loading spinner overlay for React Native apps, written in JS for cross-platform support. It works on iOS and Android.

This component is compatible with React Native 0.25 and newer.

Preview

Installation

npm install tnrn-loading --save

Full Demo

see ReactNativeComponentDemos

Usage

Install the loading-spinner-overlay from npm with npm install tnrn-loading --save. Then, require it from your app's JavaScript files with import loading-spinner-overlay from 'tnrn-loading'.

import React, {
    Component,
} from 'react'
import {
    View,
} from 'react-native'

import Button from 'react-native-smart-button'
import TimerEnhance from 'react-native-smart-timer-enhance'
import Toast from 'tnrn-loading'

class LoadingSpinnerOverLayDemo extends Component {

    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return (
            <View style={{ paddingTop: 64, flex: 1, backgroundColor: '#fff',}}>
                <Button
                    onPress={this._showModalLoadingSpinnerOverLay}
                    touchableType={Button.constants.touchableTypes.fadeContent}
                    style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
                    textStyle={{fontSize: 17, color: 'white'}}
                >
                    show modal loading spinner (模态)
                </Button>
                <Button
                    onPress={this._showPartModalLoadingSpinnerOverLay}
                    touchableType={Button.constants.touchableTypes.highlight}
                    underlayColor={'#C90000'}
                    style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
                    textStyle={{fontSize: 17, color: 'white'}}
                >
                    [part modal]can click header (导航栏允许点击)
                </Button>
                <Button
                    onPress={this._showNoModalLoadingSpinnerOverLay}
                    touchableType={Button.constants.touchableTypes.blur}
                    style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
                    textStyle={{fontSize: 17,  color: 'white'}}
                >
                    show no modal loading spinner (非模态)
                </Button>

                <Button
                    onPress={this._showImmediateLoadingSpinnerOverLayAndImmediateHide}
                    touchableType={Button.constants.touchableTypes.fade}
                    style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
                    textStyle={{fontSize: 17,  color: 'white'}}
                >
                    show and hide immediately (无渐变)
                </Button>

                <Button
                    onPress={this._showModal_2_LoadingSpinnerOverLay}
                    touchableType={Button.constants.touchableTypes.fadeContent}
                    style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
                    textStyle={{fontSize: 17, color: 'white'}}
                >
                    custom content (自定义内容)
                </Button>

                <LoadingSpinnerOverlay
                    ref={ component => this._modalLoadingSpinnerOverLay = component }/>
                <LoadingSpinnerOverlay
                    ref={ component => this._partModalLoadingSpinnerOverLay = component }
                    modal={true}
                    marginTop={64}/>
                <LoadingSpinnerOverlay
                    ref={ component => this._LoadingSpinnerOverLay = component }
                    modal={false}/>
                <LoadingSpinnerOverlay
                    ref={ component => this._modalImmediateLoadingSpinnerOverLay = component }/>
                <LoadingSpinnerOverlay
                    ref={ component => this._modal_2_LoadingSpinnerOverLay = component }>
                    {this._renderActivityIndicator()}
                </LoadingSpinnerOverlay>
            </View>
        )
    }




    _showModalLoadingSpinnerOverLay = () => {
        this._modalLoadingSpinnerOverLay.show()
        //simulate http request
        this.setTimeout( () => {
            this._modalLoadingSpinnerOverLay.hide()
        }, 3000)
    }

    _showPartModalLoadingSpinnerOverLay = () => {
        this._partModalLoadingSpinnerOverLay.show()
        //simulate http request
        this.setTimeout( () => {
            this._partModalLoadingSpinnerOverLay.hide()
        }, 3000)
    }

    _showNoModalLoadingSpinnerOverLay = () => {
        this._LoadingSpinnerOverLay.show()
        //simulate http request
        this.setTimeout( () => {
            this._LoadingSpinnerOverLay.hide()
        }, 3000)
    }

    _showImmediateLoadingSpinnerOverLayAndImmediateHide = () => {
        this._modalImmediateLoadingSpinnerOverLay.show({
            duration: 0,
            children: this._renderActivityIndicator(),
        })
        //simulate http request
        this.setTimeout( () => {
            this._modalImmediateLoadingSpinnerOverLay.hide({
                duration: 0,
            })
        }, 3000)
    }

    _showModal_2_LoadingSpinnerOverLay = () => {
        this._modal_2_LoadingSpinnerOverLay.show()
        //simulate http request
        this.setTimeout( () => {
            this._modal_2_LoadingSpinnerOverLay.hide()
        }, 3000)
    }

    _renderActivityIndicator() {
        return ActivityIndicator ? (
            <ActivityIndicator
                animating={true}
                color={'#ff0000'}
                size={'small'}/>
        ) : Platform.OS == 'android' ?
            (
                <ProgressBarAndroid
                    color={'#ff0000'}
                    styleAttr={'small'}/>

            ) :  (
            <ActivityIndicatorIOS
                animating={true}
                color={'#ff0000'}
                size={'small'}/>
        )
    }

}


export default TimerEnhance(LoadingSpinnerOverLayDemo)

Props

Prop | Type | Optional | Default | Description ---------------- | ------ | -------- | ---------------- | ----------- style | style | Yes | | see react-native documents overlayStyle | style | Yes | | see react-native documents duration | number | Yes | 255 | determine the duration of loading-spinner-overlay animation delay | number | Yes | 0 | determine the delay of loading-spinner-overlay animation marginTop | number | Yes | 0 | determine the marginTop of the root container view, it is used when the modal prop is false modal | bool | Yes | true | determine if the modal will be used

Method

• show({modal, marginTop, children, duration, easing, delay, animationEnd,})

  • modal: determine if the modal will be used
  • marginTop: determine the marginTop of the root container view, it is used when the modal prop is false
  • children: determine the children of loading-spinner-overlay
  • duration: determine the duration of animation
  • easing: determine the easing of animation
  • delay: determine the delay of animation
  • animationEnd: determine the callback when animation is end

• hide({duration, easing, delay, animationEnd,})

  • duration: determine the duration of animation
  • easing: determine the easing of animation
  • delay: determine the delay of animation
  • animationEnd: determine the callback when animation is end