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

npm install --save react-native-loading-spinner-overlay

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 default overlayColor; see below)
• You can control visibility of the spinner using the Boolean prop visible (Boolean, by default it is false)
• To change the color of the overlay, pass a ColorProp as the overlayColor prop (e.g. 'rgba(0,0,0,0.25)')

import React, { View } 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} />
      </View>
    );
  }
}

Platforms

• 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 ProgressBarAndroid (docs) for the loading spinner

Notes

• 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. Run npm run watch to watch the src directory for changes
4. Make changes in src directory
5. Run npm test when you're done
6. Submit a pull request

Contributors

• Nick Baugh niftylettuce@gmail.com

License

MIT