# react-native-loading-spinner-overlay-dxc

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

Latest version **0.5.2** (published 2018-03-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-loading-spinner-overlay-dxc
pnpm add react-native-loading-spinner-overlay-dxc
yarn add react-native-loading-spinner-overlay-dxc
bun add react-native-loading-spinner-overlay-dxc
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.2 |
| Published | 2018-03-16 |
| First published | 2018-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nick Baugh |
| Maintainers | javimenesesdxc |
| Keywords | activity, android, bar, full, indicator, ios, loading, modal, native, pop-up, popup, progress, react, react-native, screen, spinner, view |

## Links

- npm: https://www.npmjs.com/package/react-native-loading-spinner-overlay-dxc
- Repository: https://github.com/javiermenesesdxc/react-native-loading-spinner-overlay
- Issues: https://github.com/javiermenesesdxc/react-native-loading-spinner-overlay/issues
- npm.io page: https://npm.io/package/react-native-loading-spinner-overlay-dxc

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.5.2 (latest) — 2018-03-16

## README

# React Native Loading Spinner Overlay

[![NPM version][npm-image]][npm-url]
[![NPM downloads][npm-downloads]][npm-url]
[![MIT License][license-image]][license-url]

> **tldr;** The only pure [React Native][react-native] Native iOS and Android loading spinner (progress bar indicator) overlay

![Demo][demo]


## Index

* [Install](#install)
* [Usage](#usage)
* [Platforms](#platforms)
* [Notes](#notes)
* [Development](#development)
* [Contributors](#contributors)
* [Credits](#credits)
* [License](#license)


## Install

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

```bash
npm install --save react-native-loading-spinner-overlay@latest
```

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

```bash
npm 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.

```js
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:

```js
<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][issue-22], use `>= 0.3.x` please!

> For `<= 0.1.x`:

* iOS: this platform uses `Modal` ([docs][modal-docs]/[source][modal-source]) to overlay and `ActivityIndicatorIOS` ([docs][activity-indicator-docs]) for the loading spinner
* Android: this platform uses `Portal` ([source][portal-source]) to overlay and `ActivityIndicator` ([docs][progress-bar-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][issue-22]

> For `<= 0.1.x`:

* Docs don't exist yet for `Portal`, see [this issue on GitHub][portal-docs-issue]; once those are in, then we can add a link to the source in [Platforms](#platforms)
* Until a release of React Native is shipped [for this pull request][style-attr-issue], 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`
4. Make changes in `src` directory
6. Run `npm test` when you're done
7. Submit a pull request


## Contributors

* Nick Baugh <niftylettuce@gmail.com>


## License

[MIT][license-url]


[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: LICENSE
[react-native]: https://facebook.github.io/react-native
[npm-image]: http://img.shields.io/npm/v/react-native-loading-spinner-overlay.svg?style=flat
[npm-url]: https://npmjs.org/package/react-native-loading-spinner-overlay
[npm-downloads]: http://img.shields.io/npm/dm/react-native-loading-spinner-overlay.svg?style=flat
[portal-source]: https://github.com/facebook/react-native/blob/master/Libraries/Portal/Portal.js
[modal-docs]: https://facebook.github.io/react-native/docs/modal.html
[modal-source]: https://github.com/facebook/react-native/blob/master/Libraries/Modal/Modal.js
[demo]: https://cdn.rawgit.com/niftylettuce/react-native-loading-spinner-overlay/master/media/demo.gif
[activity-indicator-docs]: https://facebook.github.io/react-native/docs/activityindicatorios.html
[progress-bar-docs]: https://facebook.github.io/react-native/docs/activityindicator.html
[portal-docs-issue]: https://github.com/facebook/react-native/issues/2501
[style-attr-issue]: https://github.com/facebook/react-native/pull/4974
[issue-22]: https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/22

---
_Source: https://npm.io/package/react-native-loading-spinner-overlay-dxc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._