How can I remove tintColor of Image component after setting it?

Question

I'm creating a simple app for my bachelor thesis in react native and I have these PNG images that the user can move around.

The images can also change tintColor, which works fine and they start out with their original color. The problem happens when I set a tintColor and then try to "reset" it again, then the image just becomes invisible.

Image when it is added Image after changing to a color then to null again

As you can see in the images below, the picture is still there, but just not visible.

The code to set the tintColor in the style looks something like this:

             <Animated.Image
                    source={source}
                    resizeMode={'contain'}
                    style={[
                        styles.item,
                        tintColor === null ? {} : { tintColor: tintColor },
                        {
                            transform: [{ scale: imgScale }],
                        },
                    ]}
                />

When the images loads, and the value is null, it doesn't set any tintColor, but if I set the tintColor and then go back to null, it just completely removes any colors on it. I've tried different things and so far nothing has worked. I want the user to be able to "reset" back to the original PNG colors, especially for some of them that already have their own colors set.

The images are loaded dynamically from a list when I add them and are draggable.

Answer 1

Give them a key={Math.random} if you wont to reset. But if you want to tint you must give them a static key. This will solve your problem.

Edit: key={this.state.tintIt?Math.random:'a12'}