# react-native-loading-hoc

> RN Loading-HOC

Latest version **0.2.0** (published 2018-09-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-loading-hoc
pnpm add react-native-loading-hoc
yarn add react-native-loading-hoc
bun add react-native-loading-hoc
```

## 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.2.0 |
| Published | 2018-09-07 |
| First published | 2018-08-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 18.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Seung Yeon Kim |
| Maintainers | loycord |

## Links

- npm: https://www.npmjs.com/package/react-native-loading-hoc
- Repository: https://github.com/loycord/react-native-loading-hoc
- Homepage: https://github.com/loycord/react-native-loading-hoc#readme
- Issues: https://github.com/loycord/react-native-loading-hoc/issues
- npm.io page: https://npm.io/package/react-native-loading-hoc

## Dependencies (3)

- [react](https://npm.io/package/react.md) 16.3.1
- [react-native](https://npm.io/package/react-native.md) ~0.55.2
- [react-navigation](https://npm.io/package/react-navigation.md) ^2.12.1

## Recent versions

- 0.2.0 (latest) — 2018-09-07
- 0.1.3 — 2018-08-27
- 0.1.2 — 2018-08-26
- 0.1.1 — 2018-08-26
- 0.1.0 — 2018-08-25

## README

# Loading HOC

## Usage

```jsx
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import withLoading, { Provider as LoadingProvider } from 'react-native-loading-hoc';

class Example extends React.Component {
  componentDidMount() {
    this.props.loading.apply(this.wait);
  }

  wait() {
    return new Promise(r => setTimeout(() => r(), 3000));
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

const ExampleWithHOC = withLoading(Example);

export default class App extends React.Component {
  render() {
    return (
      <LoadingProvider>
        <ExampleWithHOC />
      </LoadingProvider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
```

## Reference

### Options

```javascript
style?: {};
spinnerSize?: number | 'small' | 'large';
spinnerColor?: string;
duration?: number;
renderSpinner?: () => Element;
```

### Method

**this.props.loading**

#### start()

```javascript
this.props.loading.start();
```

#### end()

```javascript
this.props.loading.end(); // 'settled'
this.props.loading.end('fulfilled');
this.props.loading.end('rejected');
```

#### apply()

```javascript
const wait = () => new Promise(r => setTimeout(() => r(), 3000));
this.props.loading.apply(wait);

// start -> wait -> end
```

## Support

### [react-navigation](https://reactnavigation.org/)

```javascript
withLoading(createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

// Home, Settings -> screenProps.loading
```

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