Using CSS filters in react-native

Question

It seems that react-native doesn't implement CSS' filter property.

Is there a way to replicate those? Specifically I am looking for a way to change the following to an image, without creating a special image just for that:

• Brightness
• Hue
• Saturation
• Blur

Answer 1

Blur for images is already supported by RN via blurRadius prop. The remaining filters you can find in my react-native-color-matrix-image-filters library:

import { Image } from 'react-native';
import { Saturate } from 'react-native-color-matrix-image-filters';

const SaturatedImage = ({ saturate, ...imageProps }) => (
  <Saturate value={saturate}>
    <Image {...imageProps} />
  </Saturate>
);