React Native: How do I programmatically make images black-and-white-filtered?-CodePudding

Is there any way to make images black-and-white-filtered programmatically in React Native? I have a few images with white backgrounds and colored letters on them. I want those letters to be all black, so that they stand out easily.

CodePudding user response：

Hi @Jinwook Kim,

You need to style prop to apply a grayscale filter to the image. Here is an example of how you could do this:

import React from 'react';
import { Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  image: {
    filter: 'grayscale(100%)',  // You can adjust the intensity of the grayscale accoding. value of 0% will produce a normal images.
  },
});

the grayscale(100%) filter in the Image component, which will make black and white.

const MyImage = () => {
  return (
    <Image
      source={require('./my-image.png')}
      style={styles.image}
    />
  );
};

export default MyImage;