How to convert an image to grayscale in react native?

Question

Is there a way to manipulate an image in react native so it appears as grayscale? I want to try something like: filter: grayscale(1)

Thanks.

Answer 1

Working on a previously deleted answer, this is possible by having an image, with the other image positioned absolute over the top.

The "back" image is using tintColor, as defined here https://facebook.github.io/react-native/docs/image.html, this will turn all pixels that aren't transparent into that color.

The "front" image gets an opacity added to it, which brings the "back" color forward, leaving you with a "greyscale" image

Before:

<React.Fragment>    <Image source={<something>} /> </React.Fragment> 

After (With a backing image):

<React.Fragment>    <Image source={<something>} style={{ tintColor: 'gray' }} />    <Image source={<something>} style={{ position: 'absolute', opacity: 0.3}} /> </React.Fragment> 

'red' as tintColor:

Answer 2

You can use my react-native-color-matrix-image-filters library:

import { Image } from 'react-native'; import { Grayscale } from 'react-native-color-matrix-image-filters';  const GrayscaledImage = (imageProps) => (     <Grayscale>         <Image {...imageProps} />     </Grayscale> );