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'.

1
2import React, {
3    Component,
4} from 'react'
5import {
6    View,
7} from 'react-native'
8
9import Button from 'react-native-smart-button'
10import TimerEnhance from 'react-native-smart-timer-enhance'
11import Toast from 'tnrn-loading'
12
13class LoadingSpinnerOverLayDemo extends Component {
14
15    constructor(props) {
16        super(props)
17        this.state = {}
18    }
19
20    render() {
21        return (
22            <View style={{ paddingTop: 64, flex: 1, backgroundColor: '#fff',}}>
23                <Button
24                    onPress={this._showModalLoadingSpinnerOverLay}
25                    touchableType={Button.constants.touchableTypes.fadeContent}
26                    style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
27                    textStyle={{fontSize: 17, color: 'white'}}
28                >
29                    show modal loading spinner (模态)
30                </Button>
31                <Button
32                    onPress={this._showPartModalLoadingSpinnerOverLay}
33                    touchableType={Button.constants.touchableTypes.highlight}
34                    underlayColor={'#C90000'}
35                    style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
36                    textStyle={{fontSize: 17, color: 'white'}}
37                >
38                    [part modal]can click header (导航栏允许点击)
39                </Button>
40                <Button
41                    onPress={this._showNoModalLoadingSpinnerOverLay}
42                    touchableType={Button.constants.touchableTypes.blur}
43                    style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
44                    textStyle={{fontSize: 17,  color: 'white'}}
45                >
46                    show no modal loading spinner (非模态)
47                </Button>
48
49                <Button
50                    onPress={this._showImmediateLoadingSpinnerOverLayAndImmediateHide}
51                    touchableType={Button.constants.touchableTypes.fade}
52                    style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
53                    textStyle={{fontSize: 17,  color: 'white'}}
54                >
55                    show and hide immediately (无渐变)
56                </Button>
57
58                <Button
59                    onPress={this._showModal_2_LoadingSpinnerOverLay}
60                    touchableType={Button.constants.touchableTypes.fadeContent}
61                    style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
62                    textStyle={{fontSize: 17, color: 'white'}}
63                >
64                    custom content (自定义内容)
65                </Button>
66
67                <LoadingSpinnerOverlay
68                    ref={ component => this._modalLoadingSpinnerOverLay = component }/>
69                <LoadingSpinnerOverlay
70                    ref={ component => this._partModalLoadingSpinnerOverLay = component }
71                    modal={true}
72                    marginTop={64}/>
73                <LoadingSpinnerOverlay
74                    ref={ component => this._LoadingSpinnerOverLay = component }
75                    modal={false}/>
76                <LoadingSpinnerOverlay
77                    ref={ component => this._modalImmediateLoadingSpinnerOverLay = component }/>
78                <LoadingSpinnerOverlay
79                    ref={ component => this._modal_2_LoadingSpinnerOverLay = component }>
80                    {this._renderActivityIndicator()}
81                </LoadingSpinnerOverlay>
82            </View>
83        )
84    }
85
86
87
88
89    _showModalLoadingSpinnerOverLay = () => {
90        this._modalLoadingSpinnerOverLay.show()
91        //simulate http request
92        this.setTimeout( () => {
93            this._modalLoadingSpinnerOverLay.hide()
94        }, 3000)
95    }
96
97    _showPartModalLoadingSpinnerOverLay = () => {
98        this._partModalLoadingSpinnerOverLay.show()
99        //simulate http request
100        this.setTimeout( () => {
101            this._partModalLoadingSpinnerOverLay.hide()
102        }, 3000)
103    }
104
105    _showNoModalLoadingSpinnerOverLay = () => {
106        this._LoadingSpinnerOverLay.show()
107        //simulate http request
108        this.setTimeout( () => {
109            this._LoadingSpinnerOverLay.hide()
110        }, 3000)
111    }
112
113    _showImmediateLoadingSpinnerOverLayAndImmediateHide = () => {
114        this._modalImmediateLoadingSpinnerOverLay.show({
115            duration: 0,
116            children: this._renderActivityIndicator(),
117        })
118        //simulate http request
119        this.setTimeout( () => {
120            this._modalImmediateLoadingSpinnerOverLay.hide({
121                duration: 0,
122            })
123        }, 3000)
124    }
125
126    _showModal_2_LoadingSpinnerOverLay = () => {
127        this._modal_2_LoadingSpinnerOverLay.show()
128        //simulate http request
129        this.setTimeout( () => {
130            this._modal_2_LoadingSpinnerOverLay.hide()
131        }, 3000)
132    }
133
134    _renderActivityIndicator() {
135        return ActivityIndicator ? (
136            <ActivityIndicator
137                animating={true}
138                color={'#ff0000'}
139                size={'small'}/>
140        ) : Platform.OS == 'android' ?
141            (
142                <ProgressBarAndroid
143                    color={'#ff0000'}
144                    styleAttr={'small'}/>
145
146            ) :  (
147            <ActivityIndicatorIOS
148                animating={true}
149                color={'#ff0000'}
150                size={'small'}/>
151        )
152    }
153
154}
155
156
157export 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