Customized ActivityIndicator in React Native App Loading

In this tutorial, we will learn how to make a customize activity indicator with Lottieview. To follow this tutorial you don't have too much react native knowledge. I will explain everything step by step how to do react native activityindicator.

Install and Import Lottie

You need to install LottieView using the below command in your expo project

expo install lottie-react-native

Once you installed it just import it like

import LottieView from 'lottie-react-native';

To know more about LottieView you can visit expo website

We have used three state variables to keep track of button state, downloading the content through fetch request and hiding the touchable button.

Touchable Button

First state variable loading and showData are all false, so we that we are able to show the touchable button.

After the initial render, we see the button first, because loading and showData are false. So react executes the below code

<View style={styles.buttonContainer}>
            <TouchableOpacity onPress={handleLoad}>
              <Text style={styles.text}>
                Tap me
              </Text>
            </TouchableOpacity>
</View>

TouchableOpacity works as a view and contains button property. With this component we can make more customized button. This is better than default <Button> component in react native. Once the button has been cliked, setLoading is set to true, the data loading starts and the button disappears.

Data Fetch Request

The touchable button triggers a fetch request and loading becomes false. Since it's more like react native hook, and the value change of a state, causes rerender of the component and view.

 const handleLoad=async()=>{
    setLoading(true);
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const json = await response.json();
    setData(json);
    setShowData(true);
 }

As you can see from the above code we invoke an await function,

 const response = await fetch('https://jsonplaceholder.typicode.com/posts');

The await function blocks rendering of the data of the next code and the same time the showData is still false. As it's false we execute the LottieView component and we can see the loading view.

You also have to remember that we can see the loading view, since the state variable changed. Any changes of state variables causes rerender of the view.

Once the data has been fetched, react executes the rest of the code and showData becomes true and and we show the data that has been fetched through fetch request in flat list. The variable showData is a state variable, it causes the rerender again.

The complete code

import React, { useState } from 'react';
import LottieView from 'lottie-react-native';
import { Text, View, TouchableOpacity, StyleSheet, ActivityIndicator, Button, FlatList} from 'react-native';


export default function App() {

  const [loading, setLoading] = useState(false);
  const [showData, setShowData] = useState(false);
  const [data, setData] = useState([]);
  const handleLoad=async()=>{
    setLoading(true);
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const json = await response.json();
    setData(json);
    setShowData(true);
 
  }



  return (
    <View style={styles.container}>
      {
        loading?(
          showData?(
            <View style={{paddingTop:100}}>
              <FlatList
                data={data}
                keyExtractor={(item)=>item.title}
                renderItem={({item})=>
                <View style={{margin:10}}>
  
                  <Text>{item.title}</Text>
                  </View>
              }
              />
              </View>
                  ):(<LottieView autoPlay loop source={require("./loader.json")}/>)
            ):(
          <View style={styles.buttonContainer}>
            <TouchableOpacity onPress={handleLoad}>
              <Text style={styles.text}>
                Tap me
              </Text>
            </TouchableOpacity>
          </View>
        )
      }
    </View>
      

  )
};

const styles = StyleSheet.create({
  buttonContainer:{
    backgroundColor:"#fc5c65",
    padding:10,
    width:100,
    borderRadius:50,
    alignItems:"center",
    justifyContent:"center",
    alignItems:"center",
    alignSelf:"center",
    top:"50%"
  },  
  container:{
    flex:1,

    backgroundColor:"white"
  },
  text:{
    fontWeight:"600",
    fontFamily:"Avenir",
    fontSize:18,
    color:"#d1d3d4"
  }
});

Build a mobile app with Laravel backend