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

Question

I cannot seem to get the colorFilter prop working with my .json file. There are no errors but the colours are clearly not changing.

<LottieView
     style={{
         width: 90,
         height: 90,
     }}
     colorFilters={
       [
         {
         keypath: "asdf",
         color: "#abcdef",
         }
       ]
     }
     source={badge.icon}
     loop={false}
/>

I'm importing the .json from After Effects using BodyMovin but am I changing the layer name correctly? If not why on earth is this not working?

Matti

Hi, have you found a solution for this? – Danidania

Nope, still nothing – Matti

I've found a workaround, now I post it, hope that help you – Danidania

Answer 1

I can't get colorFilters to work but you can try doing the following:

import myAnimation from "./../img/myAnimation.json";

in the render part use LottieView with the import and not with the require inline

<LottieView        
  //source={require("./../img/radius.json")}
  source={myAnimation}
/>

Now you can manipulate the properties directly from the json object, just for example here I manipulate the color based on the actual color (from black to white or from white to black)

myAnimation.layers[1].shapes[0].it[1].c.k = myAnimation.layers[1].shapes[0].it[1].c.k[0] == 0 ?  [1,1,1,1] : [0,0,0,1];

To find out what is the property you need, check the json, it is not very clear but with some trial and error you can understand the structure.

Danidania

Thanks. Yes I guess this would work. Shame there's no easier way to do it. – Matti

Unfortunately I think this is the way. So I made a tool to help - colorize-react-native-lottie.netlify.app – Wooldridge

@Wooldridge this is best thing I have seen so far (considering how weird are the names of the layers sometimes)! Thank you so much!!! – Emmet

Answer 2

Just try with react native, and it's work fine for me

keypaths are extracted from nm keys (in my experience within the layers key) in the .json lottie file.

    <LottieView
                style={style.heartLootie}
                source={require("../../assets/animations/favorite_animation.json")}
                progress={animationProgress}
                colorFilters={[
                    { keypath: "Red Heart", color: themeColors.PRIMARY },
                    { keypath: "Grey Heart", color: themeColors.SECONDARY },
                ]}
            />

Underbrush

How can I find the key path? should I look into the Lottie json file? is it a namespace of the color or the layers? – League

Aha I've got it, in the json file there's a layer array which inside it you can see a property name "nm", so we can change the layer's color by their name. – League

Answer 3

This is an outstanding issue, I have opened an issue here and will work with the devs to hopefully resolve this issue. It is probably the biggest bottleneck for React Native adoption right now.

Ruinous

Answer 4

After some research I've found out that there are few ways of changing color of Lottie AnimationObject.

You can directly modify animtions JSON content as someone already described here: https://mcmap.net/q/1883890/-how-do-i-use-colorfilter-with-react-native-lottie.

But I think the easiest way would be to use color filters. I created a function that takes AnimationObject or array of them and returns keypath names so you can check if you named your keypath correctly. I tested it with animations that I made in Figma. Some of them are only vectors some of them are groups of rectangles, vectors etc. And it seems to be working for every icon I tested. Just wanted to share since it made my coding lot easier.

import { AnimationObject } from "lottie-react-native";

export const getAnimationKeypaths = (animations: AnimationObject[] | AnimationObject) => {
let keypaths: Set<string> = new Set();

if(!Array.isArray(animations)) {
    animations.layers.map((l , i) => keypaths.add(l.nm));
} else {
    animations.map((a, i) => {
        a.layers.map((l , i) => keypaths.add(l.nm));
    })
}

return Array.from(keypaths);
}

And then in LottieView component use it like this:

import HomeAnimation from "../../../assets/lottie/bottomTabs/home.json";

const source = HomeAnimation;

<LottieView
        ref={ref}
        source={source}
        style={{
          // your styles
        }}
        colorFilters={getAnimationKeypaths(source).map(
          (keypath, i) => ({
            keypath,
            color: theme.colors.primary
          })
        )}
        autoPlay={false}
        loop={false}
      />

Minorite