React Native Loading Spinner Overlay
tldr; The only pure React Native Native iOS and Android loading spinner (progress bar indicator) overlay
Index
Install
For React Native version >=0.28.x
use version >=0.3.x
(0.2.x
is broken, sorry!):
npm install --save react-native-loading-spinner-overlay@latest
For React Native version <=0.27.x
use version 0.1.x
:
npm install --save react-native-loading-spinner-overlay@0.1.x
Usage
This usage shows the default styles and properties.
- You can pass a String
size
prop that can either be"large"
or"small"
(no other cross-platform sizes are supported right now, and by default it is"large"
) - You can pass a String
color
ColorProp (e.g.red
or#ff0000
) to change the default spinner color (by default it is"white"
for high contrast on the defaultoverlayColor
; see below) - You can control visibility of the spinner using the Boolean prop
visible
(Boolean, by default it isfalse
) - To change the color of the overlay, pass a ColorProp as the
overlayColor
prop (e.g.'rgba(0,0,0,0.25)'
) - Optional text field, activate by passing textContent Prop and style by passing textStyle Prop
- You can also pass a custom view to act as activity indicator.
import React, { View, Text } from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';
class MyComponent extends React.Component {
constructor(props) {
super();
this.state = {
visible: false
};
}
/* eslint react/no-did-mount-set-state: 0 */
componentDidMount() {
setInterval(() => {
this.setState({
visible: !this.state.visible
});
}, 3000);
}
render() {
return (
<View style={{ flex: 1 }}>
<Spinner visible={this.state.visible} textContent={{"Loading..."}} textStyle={{color: '#FFF'}} />
</View>
);
}
}
To use a custom activity indicator just pass it as child of the component:
<Spinner visible={this.state.visible}>
<Text>This is my custom spinner</Text>
</Spinner>
Platforms
For
>= 0.3.x
:
- We use
ActivityIndicator
now!
For
0.2.x
:
- Do not use this version due to #22, use
>= 0.3.x
please!
For
<= 0.1.x
:
- iOS: this platform uses
Modal
(docs/source) to overlay andActivityIndicatorIOS
(docs) for the loading spinner - Android: this platform uses
Portal
(source) to overlay andActivityIndicator
(docs) for the loading spinner
Notes
For
>= 0.3.x
:
- We use
ActivityIndicator
now!
For
0.2.x
:
- This version is broken due to a dependency issue, see issue #22
For
<= 0.1.x
:
- Docs don't exist yet for
Portal
, see this issue on GitHub; once those are in, then we can add a link to the source in Platforms - Until a release of React Native is shipped for this pull request, Android's
ProgressBarAndroid
will not have support for aStyleAttr
value of"Normal"
- therefore we only support asize
prop of"small"
or"large"
right now (defaulting to"large"
) - in other words, we can only support Android's inverse styling with astyleAttr
of"Inverse"
,"SmallInverse"
(for asize
prop of"small"
), and"LargeInverse"
(for asize
prop of"large
") (since there is no"Normal"
support right now for"size"
of"normal"
).
Development
- Fork/clone this repository
- Run
npm install
- Make changes in
src
directory - Run
npm test
when you're done - Submit a pull request
Contributors
- Nick Baugh niftylettuce@gmail.com