Creating Loader React-Native

In this tutorial we will create a loader that can be easily used in our screens just by setting it to true to display and disable screen and false to hide. To archieve this we will create a file and name it Loader.js.

Loader.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  ActivityIndicator
} from 'react-native';

const Loader = props => {
  const {
    loading,
    ...attributes
  } = props;

  return (
    <Modal
      transparent={true}
      animationType={'none'}
      visible={loading}
      onRequestClose={() => {console.log('close modal')}}>
      <View style={styles.modalBackground}>
        <View style={styles.activityIndicatorWrapper}>
          <ActivityIndicator
            animating={loading} size="large" />
        </View>
      </View>
    </Modal>
  )
}

const styles = StyleSheet.create({
  modalBackground: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'space-around',
    backgroundColor: '#00000040'
  },
  activityIndicatorWrapper: {
    backgroundColor: '#FFFFFF',
    height: 80,
    awidth: 80,
    borderRadius: 10,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around'
  }
});

export default Loader;

To use this loader on any screen simply import the loader from your directory and set the state. Example can be seen below

constructor(props) {
super(props);
this.state = {
  loading: false
}
}

this will set the loader to hide because it is false. Lets say you want to call a Api u can set it to true while data is being fetched and hide it when data fetch is completed.

//Fetch Data

this.setState({ loading: true });

//Data fetch completed or Error

this.setState({ loading: false });

Thats it. You have your loader accesible anywhere in your project. You can also customise your loader based on your preference.