https://github.com/equimper/react-native-loading-status-spinner

An extension component to the StatusBar to show the spinner on IOS only.
https://github.com/equimper/react-native-loading-status-spinner

react-native statusbar

Last synced: 6 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/equimper/react-native-loading-status-spinner
• Owner: EQuimper
• Created: 2017-07-14T23:42:41.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-07-15T16:37:17.000Z (about 8 years ago)
• Last Synced: 2025-04-19T10:48:15.510Z (6 months ago)
• Topics: react-native, statusbar
• Language: JavaScript
• Homepage:
• Size: 67.4 KB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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 (

        

          

        

      )

    }

    return (

      

        

        {this.state.people.name}

      

    );

  }

}

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