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>
);

Answer 3

I couldn't find a react native package that does just that - converts to grayscale - so I've created one, but only for iOS for know, sorry. I'll add support for android soon.

https://github.com/gabrielpoliciuc/react-native-grayscale

It works with the base64 format input/output. But you can pass base64 to Image like this (please check also the example on github)

  <Image
    ...
    source={{ uri: base64ImageString }}
  />

Let me know if this works for you.

Answer 4

Doing this on the fly is not supported yet. If it is a static image, you could convert it e.g. in Photoshop.

Answer 5

import React, { useEffect, useState } from 'react'
import { Image } from 'react-native'
import Jimp from 'jimp/browser/lib/jimp'

function GrayscaleImage(props) {
  const [base64, setBase64] = useState()
  useEffect(() => {
    ;(async () => {
      const image = await Jimp.read(props.source.uri)
      image.grayscale()
      setBase64(await image.getBase64Async(image.getMIME()))
    })()
  }, [props])

  return base64 ? <Image {...props} source={{ uri: base64 }} /> : null
}

export default GrayscaleImage