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.
npm install react-native-smart-loading-spinner-overlay --save
Install the loading-spinner-overlay from npm with npm install react-native-smart-loading-spinner-overlay --save.
Then, require it from your app's JavaScript files with import loading-spinner-overlay from 'react-native-smart-loading-spinner-overlay'.
importReact,{Component,}from'react'import{View,}from'react-native'importButtonfrom'react-native-smart-button'importTimerEnhancefrom'react-native-smart-timer-enhance'importToastfrom'react-native-smart-loading-spinner-overlay'classLoadingSpinnerOverLayDemoextendsComponent{constructor(props){super(props)this.state={}}render(){return(<Viewstyle={{paddingTop: 64,flex: 1,backgroundColor: '#fff',}}><ButtononPress={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><ButtononPress={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><ButtononPress={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><ButtononPress={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><ButtononPress={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><LoadingSpinnerOverlayref={component=>this._modalLoadingSpinnerOverLay=component}/><LoadingSpinnerOverlayref={component=>this._partModalLoadingSpinnerOverLay=component}modal={true}marginTop={64}/><LoadingSpinnerOverlayref={component=>this._LoadingSpinnerOverLay=component}modal={false}/><LoadingSpinnerOverlayref={component=>this._modalImmediateLoadingSpinnerOverLay=component}/><LoadingSpinnerOverlayref={component=>this._modal_2_LoadingSpinnerOverLay=component}>{this._renderActivityIndicator()}</LoadingSpinnerOverlay></View>)}_showModalLoadingSpinnerOverLay=()=>{this._modalLoadingSpinnerOverLay.show()//simulate http requestthis.setTimeout(()=>{this._modalLoadingSpinnerOverLay.hide()},3000)}_showPartModalLoadingSpinnerOverLay=()=>{this._partModalLoadingSpinnerOverLay.show()//simulate http requestthis.setTimeout(()=>{this._partModalLoadingSpinnerOverLay.hide()},3000)}_showNoModalLoadingSpinnerOverLay=()=>{this._LoadingSpinnerOverLay.show()//simulate http requestthis.setTimeout(()=>{this._LoadingSpinnerOverLay.hide()},3000)}_showImmediateLoadingSpinnerOverLayAndImmediateHide=()=>{this._modalImmediateLoadingSpinnerOverLay.show({duration: 0,children: this._renderActivityIndicator(),})//simulate http requestthis.setTimeout(()=>{this._modalImmediateLoadingSpinnerOverLay.hide({duration: 0,})},3000)}_showModal_2_LoadingSpinnerOverLay=()=>{this._modal_2_LoadingSpinnerOverLay.show()//simulate http requestthis.setTimeout(()=>{this._modal_2_LoadingSpinnerOverLay.hide()},3000)}_renderActivityIndicator(){returnActivityIndicator ? (<ActivityIndicatoranimating={true}color={'#ff0000'}size={'small'}/>) : Platform.OS=='android' ?
(<ProgressBarAndroidcolor={'#ff0000'}styleAttr={'small'}/>) : (<ActivityIndicatorIOSanimating={true}color={'#ff0000'}size={'small'}/>)}}exportdefaultTimerEnhance(LoadingSpinnerOverLayDemo)| 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 |
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