React Native ActivityIndicator for a Quick & Easy Loading Animation

It’s simple, it’s cross platform, it’s quick, and it works.

Photo by NeONBRAND on Unsplash
Loading during API call using React Native Activity Indicator

Presentational Component — Loader

import React, { Component } from 'react';
import {
StyleSheet,
View,
Modal,
ActivityIndicator
} from 'react-native';
const Loader = props => {
const {
loading,
...attributes
} = props;
return (
<Modal
visible={loading}></Modal>
)
}
const styles = StyleSheet.create({

});
export default Loader;

React Native Modal

Container Component

import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Dimensions
} from 'react-native';
import Button from 'MyButton';
import Loader from 'Loader';
...class ActivityIndicatorScreen extends Component {  constructor(props) {
super(props);
this.state = {
loading: true,
address: ''
}
}
getCoordinates(query) {
console.log('start loading animation');
}
render() {
return (
<View style={styles.container}>
<Loader
loading={this.state.loading} />
<Text
style={{fontSize: 24, paddingBottom: 20, fontWeight: 'bold'}}>Infinity Yoga Brookhaven</Text>
<Button
containerViewStyle={{width: '100%', marginBottom: 20}}
onPress={() => this.getCoordinates('infinity yoga brookhaven')}
title="Get Address"
fontWeight="bold"
buttonStyle={{borderRadius: 2}}
backgroundColor='#333333'
underlayColor="#cccccc" />
<Text
style={{fontSize: 18, paddingBottom: 10}}>{`${this.state.address}`}</Text>
</View>
);
}
}const styles = StyleSheet.create({
container: {
backgroundColor: '#CCCCCC',
height: Dimensions.get('window').height,
padding: 15,
display: 'flex',
alignItems: 'flex-start',
width: '100%',
paddingTop: 50
}
});
export default ActivityIndicatorScreen;
Left is with loading set to true, right is with loading set to false
...
<Modal
transparent={true}
animationType={'none'}
visible={loading}>
</Modal>
...
...
<Modal
transparent={true}
animationType={'none'}
visible={loading}>
<View style={styles.modalBackground}>
<View style={styles.activityIndicatorWrapper}>
<ActivityIndicator
animating={loading} />
</View>
</View>
</Modal>
...
...
async getCoordinates(query) {
this.setState({
loading: true
});
let coords = await this.search(query); setTimeout(() => {
this.setState({
loading: false,
address: coords.results[0].formatted_address
});
}, 2500);
}
...
async search(query) {
let encodedAddress = encodeURIComponent(query);
let url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodedAddress}`; try{
let response = await fetch(url);
if(response.status > 400){
return {};
} else {
return await response.json();
}
} catch(e) {
return {};
}
}
Android loading animation using ActivityIndicator

Developing is my craft, design is my recreation, learning is my always and forever. Developer @digitalscience.