How to Change Color of an Image in React Native

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 property tintColor to your image component. You can change the color of an image in React Native as given below.

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

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, tintColor: 'blue'}}
        source={{
          uri: 'https://cdn.pixabay.com/photo/2017/01/10/14/48/umbrella-1969261_960_720.png',
        }}
      />
    </View>
  );
};

export default Home;

Following is the output of this react native example.

I hope this short tutorial on react native image color will be helpful for you.