react-native-loading-status-spinner

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

react-native-loading-status-spinner

★ 9 Open GitHub ↗

An extension component to the StatusBar to show the spinner on IOS only.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React-Native-Loading-Status-Spinner

An extension component to the StatusBar to show the spinner on IOS only.

![](https://image.ibb.co/fX6xZa/Screen_Shot_2017_07_14_at_10_34_33_PM.png)

## Installation

```
yarn add react-native-loading-status-spinner
```

## Utilisation

Replace the StatusBar with the LoadingStatusSpinner component.

You can see an example on expo [here](https://exp.host/@equimper/loadingstatus) or in the example folder.

```js
import React from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';
import LoadingStatusSpinner from 'react-native-loading-status-spinner';

export default class App extends React.Component {
  state = {
    people: {},
    loading: true,
  }

componentDidMount() {
    this._fetchLuke();
  }

_fetchLuke = async () => {
    const res = await fetch('http://swapi.co/api/people/1');
    const resJson = await res.json();
    this.setState({ people: resJson, loading: false });
  }

render() {
    if (this.state.loading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator color="#fff" size="large" />
        </View>
      )
    }
    return (
      <View style={styles.container}>
        <LoadingStatusSpinner barStyle="light-content" />
        <Text style={styles.text}>{this.state.people.name}</Text>
      </View>
    );
  }
}

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

## Credit

I've done this library after reading this blog post [here](https://goshakkk.name/react-native-activity-indicator-fetch/?utm_source=hashnode.com) By Gosha Arinich

react-native-loading-status-spinner

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README