React Native Loading Spinner Overlay

tldr; The only pure React Native Native iOS and Android loading spinner (progress bar indicator) overlay

Index

• Install
• Usage
• Platforms
• Notes
• Development
• Contributors
• Credits
• License

Install

For React Native version >=0.28.x use version >=0.3.x (0.2.x is broken, sorry!):

1npm install --save react-native-loading-spinner-overlay@latest

For React Native version <=0.27.x use version 0.1.x:

1npm install --save react-native-loading-spinner-overlay@0.1.x

Usage

This usage shows the default styles and properties.

Property	Type	Default	Description
cancelable	boolean	false	Android: If set to false, it will prevent spinner from hiding when pressing the hardware back button. If set to true, it will allow spinner to hide if the hardware back button is pressed.
color	string	white	Changes the spinner's color (example values are red, #ff0000, etc). For adjusting the contrast see overlayColor prop below.
animation	none, slide, fade	none	Changes animation on show and hide spinner's view.
overlayColor	string	rgba(0, 0, 0, 0.25)	Changes the color of the overlay.
size	small, normal, large	large	Sets the spinner's size. No other cross-platform sizes are supported right now.
textContent	string	""	Optional text field to be shown.
textStyle	style	-	The style to be applied to the <Text> that displays the textContent.
visible	boolean	false	Controls the visibility of the spinner.

You can also add a child view to act as a custom activity indicator.

1import React, { View, Text } from 'react-native';
2
3import Spinner from 'react-native-loading-spinner-overlay';
4
5class MyComponent extends React.Component {
6
7  constructor(props) {
8    super();
9    this.state = {
10      visible: false
11    };
12  }
13
14  /* eslint react/no-did-mount-set-state: 0 */
15  componentDidMount() {
16    setInterval(() => {
17      this.setState({
18        visible: !this.state.visible
19      });
20    }, 3000);
21  }
22
23  render() {
24    return (
25      <View style={{ flex: 1 }}>
26        <Spinner visible={this.state.visible} textContent={"Loading..."} textStyle={{color: '#FFF'}} />
27      </View>
28    );
29  }
30}

To use a custom activity indicator just pass it as child of the component:

1<Spinner visible={this.state.visible}>
2  <Text>This is my custom spinner</Text>
3</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 and ActivityIndicatorIOS (docs) for the loading spinner
• Android: this platform uses Portal (source) to overlay and ActivityIndicator (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 a StyleAttr value of "Normal" - therefore we only support a size prop of "small" or "large" right now (defaulting to "large") - in other words, we can only support Android's inverse styling with a styleAttr of "Inverse", "SmallInverse" (for a size prop of "small"), and "LargeInverse" (for a size prop of "large") (since there is no "Normal" support right now for "size" of "normal").

Development

1. Fork/clone this repository
2. Run npm install
3. Make changes in src directory
4. Run npm test when you're done
5. Submit a pull request

Contributors

• Nick Baugh niftylettuce@gmail.com

License

MIT