react-native-vishesh-animated-loader/src/index.js

This is the lottie based react-native loader screen

import React,{Component,useState,useEffect} from "react"
import {Modal,View,StyleSheet,TouchableOpacity,Text} from "react-native"
import LottieView from "lottie-react-native";

const Loader = props=>{
    const{visible,source,text,width,height,textStyle,loop,autoPlay,type} = props
    const[mainSource,setmainSource]= useState(source)
    
    useEffect(()=>{
      console.log("inside here ", type)
      switch(type){
        case 1:{
          console.log("case 1")
          setmainSource(require("../pulse-loader.json"))
          break;
        }
        case 2:{
          console.log("case 2")
          setmainSource(require("../loading1.json"))
          break;
        }
        case 3:{
          console.log("case 3")
          setmainSource(require("../loading2.json"))
          break;
        }
        case 4:{
          console.log("case 4")
          setmainSource(require("../loading3.json"))
          break;
        }
        case 5:{
          console.log("case 5")
          setmainSource(require("../loading4.json"))
          break;
        }
        default:{
          console.log("default")
          setmainSource(source)
        }
        
      }
    },[])
    console.log("this is main source",mainSource)
    return(
        <Modal
        animationType="fade"
        transparent={true}
        visible={visible}
        presentationStyle="overFullScreen"
        >
            <View style={{flex:1,alignItems:"center",justifyContent:"center"}}>
            <LottieView
            style={{ width:width||50, height:height||100}}
            source={mainSource}
            loop={loop?loop:true}
            autoPlay={autoPlay?autoPlay:true}
          />
          <Text style={textStyle}> {text}</Text>

            </View>

            </Modal>
    )
}
export default Loader;