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: 4 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 (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-15T16:37:17.000Z (almost 9 years ago)
- Last Synced: 2025-10-20T12:30:06.603Z (9 months ago)
- Topics: react-native, statusbar
- Language: JavaScript
- Homepage:
- Size: 67.4 KB
- Stars: 9
- Watchers: 1
- 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.
## 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