How to convert an image to grayscale in React Native?

Sometimes, we want to convert an image to grayscale in React Native.

In this article, we’ll look at how to convert an image to grayscale in React Native.

How to convert an image to grayscale in React Native?

To convert an image to grayscale in React Native, we can add the same image twice, with one set to a different opacity than the other one, and add the tintColor prop.

For instance, we write:

import * as React from 'react';
import { Image, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
import { Icon } from 'react-native-elements';

export default function App() {
  return (
    <View>
      <Image
        source={{ uri: 'https://picsum.photos/200/300' }}
        style={{ tintColor: 'gray', height: 300, width: 200 }}
      />
      <Image
        source={{ uri: 'https://picsum.photos/200/300' }}
        style={{ position: 'absolute', opacity: 0.3, height: 300, width: 200 }}
      />
    </View>
  );
}

to set the tintColor to 'gray' to add the grayscale tint.

Then we add the same image with the position set to 'absolute' to put it over the gray image.

And we set the opacity to 0.3 to we can see the image.

Conclusion

To convert an image to grayscale in React Native, we can add the same image twice, with one set to a different opacity than the other one, and add the tintColor prop.