How to convert an image to grayscale in react native?

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: