How to Change Color of an Image in React Native

Last Updated on December 10, 2020.

Well, you can also change the color of an image or icon in React Native. Precisely saying, you can change the color of all the non-transparent pixels of the image.

To achieve this, all you need is to add the style prop tintColor to your image component. You can change the color of an image in React Native as given below.

<Image style={{ width: 40, height: 40 }} 
                source={yourImage} 
                tintColor='red'  />

In the following react native example, I am using this image from Pixabay.

Now, I am going to change the tint color of this image to blue color using the following code.

import React from 'react';
import {Image, View} from 'react-native';

const Home = () => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Image
        style={{height: 360, width: 345}}
        source={{
          uri:
            'https://cdn.pixabay.com/photo/2017/01/10/14/48/umbrella-1969261_960_720.png',
        }}
        tintColor="blue"
      />
    </View>
  );
};

export default Home;

Following is the output of this react native example.

I hope this short tutorial will be helpful for you.

1 thought on “How to Change Color of an Image in React Native”

  1. Not good since this works only on android. pass the tintcolor attribute in the style prop and it will work both on android and ios!

Leave a Reply

%d bloggers like this: