lottie-react-native: Animation not shown when using Expo 50 with lottie-react-native 6.5.1
Description
I’ve recently upgraded to Expo 50 with lottie-react-native version 6.5.1 but haven’t had any success yet. The issue is that the animation is simply not showing - can’t really tell why since the implementation is fairly simple and no warnings/errors are shown. When I revert back to lottie-react-native version 5.1.6, everything works as expected.
Steps to Reproduce
"react-native": "0.73.2",
"expo": "^50.0.0"
"lottie-react-native": "6.5.1",
<LottieView
autoPlay={true}
style={{ width: '100%', height: '100%' }}
loop={true}
speed={2.2}
source={require('../assets/lottie/animation.json')}
/>
Expected behavior: Should show animation as expected
Actual behavior: Does not show the animation
React Native Environment
Using iPhone SE 3rd gen simulator. Using dev client & the hermes engine.
About this issue
- Original URL
- State: closed
- Created 5 months ago
- Reactions: 3
- Comments: 20
@matinzd
What I had as a problem was that I had to define a height without the width, and on version 5.1.4 I have no problem, but with version 6.5.1 the animation only works when I specify the height and width.
exemple code work on 5.1.4 but not on 6.5.1
const CartAnimation = () => { return ( <LottieView style={{ height: hp('6%')}} source={require('./cart.json')} autoPlay loop={false} /> ); };when i specify width on 6.5.1 it’s work
const CartAnimation = () => { return ( <LottieView style={{ height: hp('6%'), width: hp('6%') }} source={require('./cart.json')} autoPlay loop={false} /> ); };If you don’t want to set specific width/height values, you can also use:
<LottieView style={{ flex: 1, pointerEvents: 'none' }} resizeMode="cover" source={getLottie()} loop autoPlay />Flex: 1 seems to be working fine with
lottie-react-nativeversion6.5.1Hi! Sorry for the late reply, had no spare time. I figured out the issue was on my end - the styles defined in the LottieView were acting differently with the new version but after adjusting them, everything’s working fine now.
In my original version I used following styles which led to the LottieView to be out of “sight” in a particular edge case
so I adjusted the value to both 65 and works fine!
So it’s all good on your end, so I’m closing the issue. Thanks!
Hi @TheRogue76, will investigate & create a minimal reproducible repo by today.
Alrighty. We will take a look and see what we find
Sure! Following animation is in use: animation.json
Hi @eljubec. Can we have the lottie file in question so we can check things out?