Search code examples
react-nativelottie

Lottie Animation - Colors not showing on react native app


I have added a Lottie loading animation in my React native app, the animation is working so far but somehow colors are not showing but a white animation only.

Here is the code.

<View style={styles.lottieLoadingWrapper}>
  <LottieView
    style={styles.lottieLoading}
    source={require('../assets/loading-2.json')}
    autoPlay
    loop
  />
</View>

I have not done anything in the stylesheet. I have tried multiple animations but all are simple white. What could be the mistake I am making here?

Update: Following is the style code

lottieLoadingWrapper: {
  width: 50,
  height: 50,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: 'yellow',
  alignSelf: 'center',
},
lottieLoading:{
  width: 50,
  height: 50,
  backgroundColor: 'rgba(120, 120, 120, 0.66)',
  justifyContent: 'center',
  alignItems: 'center',
}

Following is the animation I am using

Lottie Animation Link


Solution

  • <View style={styles.lottieLoadingWrapper}>
      <LottieView
        style={styles.lottieLoading}
        source={require('../assets/loading-2.json')}
        autoPlay
        loop
      />
    </View> 
    
    
    Please Change the Color in JSON file, Find "sc":"#ffffff" and 
    Replace with your color