lottie-react-native: Animation not showing, lottie-react-native

is it working now <LottieView style={{flex:1}} source={require(‘./anim’)} autoplay loop/> here is my code

I had to add progress to the Lottie component before it worked and animated it with Animated.timing

constructor(props) { super(props); this.progress1 = new Animated.Value(0); this.state = { progress: new Animated.Value(0), }; } componentDidMount() { this.load() Animated.timing(this.state.progress, { toValue: 1, duration: 4000, easing: Easing.linear, }).start();

} load(){ this.progress1.setValue(0); Animated.timing(this.progress1, { toValue: 1, duration: 2000, easing: Easing.linear, }).start(()=> this.load()); } render() { return ( <ImageBackground resizeMode={‘cover’} style={{ width: ‘100%’, height: ‘100%’, }} source={require(‘…/bg.png’)}> <LottieView source={require(‘…/data.json’)} progress={this.state.progress} imageAssetsFolder=‘lottie/images’ /> <LottieView source={require(‘…/load.json’)} progress={this.progress1} style={{position: ‘absolute’, alignSelf: ‘center’, bottom: 30, width: 100, height: 100}} /> ); } }

Tried everything for 3 hours until I did this and it worked!! though I used Animated.Loop with the useNativeDriver flag set to true. For those on older react-native versions you could try updating to see if it fixes the issue. The code below is how I got it working.

import React,{useState} from 'react'
import {Animated,Easing} from 'react-native'
import LottieView from 'lottie-react-native'

const [lottieProgress] = useState(new Animated(0))

useEffect(() => {
    Animated.loop(
      Animated.timing(lottieProgress, {
        toValue: 1,
        duration: 5000,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
    ).start();
  }, []);

//Then in your LottieView
 <LottieView
          progress={lottieProgress}
          loop={true}
          autoPlay
          speed={1}
           style={{
              alignSelf: 'center',
                  height: 200,
                }}
            //Source to your lottie animation
            source={require('../assets/animations/double-tap.json')}
            renderMode={'SOFTWARE'}
              />

Is this issue still open? Animations are showing in iOS but not in Android for me…

I guess this is because your lottie file size is over 100kb. In my case, it works well after I changed smaller lottie file

Sharing my experience to maybe help anyone who is currently having this problem. After migrating from react-native 0.66.5 to react-native 0.72.4, I also updated lottie-react-native to version 6.2.0 (last one as of today) and after that my animations disappeared. After some tries I solved it by inserting style={{ height:250, width: 400}}. In my case I need these values.

Coming back here to clarify where the error was.

Basically for animation to run you need to have a Wrapper/View around the LottieContent.

Use it this way:

<View>
   <LottieContent>
         <LottieView
              source={require('../../assets/animation/not-found.json')}
              autoPlay
              loop
          />
    </LottieContent>
</View>

After spending some time fixing this, mine started working. Description: import LottieView from “lottie-react-native”;

LottieView code structure:

<LottieView style={{ width: 400, height: 400, }} source={require(“…/…/assets/lottie-checked-done.json”)} autoPlay={false} loop={false} ref={animation => { // @ts-ignore this.animation = animation; }} />

Activate the animation in componentDidMount:

componentDidMount() { // @ts-ignore this.animation.play(); }

NB: Make sure to give some style to your LottieView such width and height.

Learn more here: https://github.com/lottie-react-native/lottie-react-native

This still does not work for me. I can see the LottieView but the animation does not start. Even with @Adokiye’s tips. Anyone else?

I had to add progress to the Lottie component before it worked and animated it with Animated.timing

constructor(props) { super(props); this.progress1 = new Animated.Value(0); this.state = { progress: new Animated.Value(0), }; } componentDidMount() { this.load() Animated.timing(this.state.progress, { toValue: 1, duration: 4000, easing: Easing.linear, }).start();

} load(){ this.progress1.setValue(0); Animated.timing(this.progress1, { toValue: 1, duration: 2000, easing: Easing.linear, }).start(()=> this.load()); } render() { return ( <View style={{flex: 1}}> <StatusBar backgroundColor='transparent' translucent={true} barStyle='light-content'/> <ImageBackground resizeMode={‘cover’} style={{ width: ‘100%’, height: ‘100%’, }} source={require(‘…/bg.png’)}> <LottieView source={require(‘…/data.json’)} progress={this.state.progress} imageAssetsFolder=‘lottie/images’ /> <LottieView source={require(‘…/load.json’)} progress={this.progress1} style={{position: ‘absolute’, alignSelf: ‘center’, bottom: 30, width: 100, height: 100}} /> </ImageBackground> </View> ); } }

@ViniciusGabriel92 I think this is because they remove the default styling at V6, https://github.com/lottie-react-native/lottie-react-native/releases/tag/v6.0.0 , see breaking changes section

the animation wasn’t playing for me in react native Android. I just wrapped the LottieView inside a View and it worked haha!