npmpackage.info

Gathering detailed insights and metrics for @react-native-component/react-native-smart-loading-spinner-overlay

@react-native-component/react-native-smart-loading-spinner-overlay - 1.0.1 | npmpackage.info

@react-native-component/react-native-smart-loading-spinner-overlay

A smart loading spinner overlay for React Native apps.

1.0.1

MIT

JavaScript

3.2

Installations

npm install @react-native-component/react-native-smart-loading-spinner-overlay

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

6.0.0

NPM Version

3.8.6 Pull Requests

Open

4

Total

7

Closed

2

Merged

1

Issues

Open

1

Total

1

Closed

0

Releases

Unable to fetch releases

Languages

JavaScript

JavaScript (100%)

Developer

react-native-component

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

53 Stars

10 Commits

16 Forks

2 Watchers

1 Branches

3 Contributors

Updated on Feb 26, 2022

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

1.0.1

Package Id

@react-native-component/react-native-smart-loading-spinner-overlay@1.0.1

Size

4.83 kB

NPM Version

3.8.6

Node Version

6.0.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

react-native-smart-timer-enhance

react-native-smart-loading-spinner-overlay

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 react-native-smart-loading-spinner-overlay --save

Full Demo

see ReactNativeComponentDemos

Usage

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

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 'react-native-smart-loading-spinner-overlay'
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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More