how to play Lottie animations with uri in react native?

Question

how can i play Lottie animations from server(uri) in react native? i could play animations from my project assets but when i use source={{uri:"https://...data here..."}} i face an error... even i downloaded json files to phone and try to play then from phone storage but faced an error too! here the code:

<LottieView style={{ width: "28%", marginTop: "5%", alignContent: "center", alignItems: "center", 
 alignSelf: "center" }}
 source={{uri:"file://///data/user/0/com.duststudio/files/vv/test2.json"}} 
 autoPlay
 loop />

i really need it...i would be so happy and thankful if anyone knows how to do it :)

Answer 1

i found it...i just found the way :') you just need to fetch JSON of Lottie Animation then set a state for it, check this out:

 import React, { useState, useEffect } from 'react';
    import { Text, View, TouchableOpacity } from 'react-native';
    import LottieView from 'lottie-react-native';


   export default function App(){
     const [LottieAnim, setLottieAnim] = useState()
    
     useEffect(() => {
            fetch('https://test.ir/test.json', {
                method: "GET",
            })
                .then((response) => response.json())
                .then((responseData) => {
                    console.log(responseData);
                    setLottieAnim(responseData)
                })
                .catch((error) => {
                    console.log(error);
                })
        }, [])

return(

        <View style={{ flex: 1 }}>
              {LottieAnim ? <LottieView source={LottieAnim} style={{ width: "50%" }} autoPlay loop /> : (null)}
         </View>

)}