Home > Mobile >  Change lottie fill colour react native
Change lottie fill colour react native

Time:08-20

I want to change the fill colour on a single element in a lottie.json file conditionally. How can I access the fill of 'circle' and update the colour?

I currently have this

<LottieView
          source={require('../assets/splash_logo_2.json')}
          autoPlay
          loop={false}
          onAnimationFinish={() => {
            progress.value = 1;
          }}
          colorFilters={[
            {
              keypath: 'circle',
              color: progress.value === 1 ? '#85AA82' : '#B5FFAF',
            },
          ]}
        />

CodePudding user response:

Check this answer:

How do I use ColorFilter with React-Native-Lottie?

and also this tool to help you to identify it better:

https://colorize-react-native-lottie.netlify.app/

  • Related