How to add Color Filters to Image in React Native

Adding color filters to images can be a fun and creative way to enhance the appearance of an image in your mobile app. In this blog post, let’s learn how to apply color filters to an image easily in react native.

The react native color max image filters library helps us to apply simple color matrix filters to images. A color matrix filter allows you to adjust the colors of an image by multiplying the colors in the image with a matrix of values.

First of all, install the library using the instructions given here.

You can create multiple color filters using this library. Go through the following examples.

Black and White Filter

You can turn a color image to black and white by wrapping the GrayScale component from the library above the Image component.

import {StyleSheet, Image, View} from 'react-native';
import React from 'react';
import {Grayscale} from 'react-native-color-matrix-image-filters';
import cat from './cat.jpg';

const App = () => {
  return (
    <View style={styles.container}>
      <Grayscale>
        <Image style={styles.image} source={cat} />
      </Grayscale>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  image: {
    height: 250,
    width: 250,
  },
});
export default App;

You will get the following output with a black and white image.

Color Filter

Using the ColorMatrix component you can adjust contrast, saturation, etc to get the desired output.

import {StyleSheet, Image, View} from 'react-native';
import React from 'react';
import {
  ColorMatrix,
  concatColorMatrices,
  saturate,
  contrast,
} from 'react-native-color-matrix-image-filters';
import cat from './cat.jpg';

const App = () => {
  return (
    <View style={styles.container}>
      <ColorMatrix matrix={concatColorMatrices(saturate(2), contrast(2.5))}>
        <Image style={styles.image} source={cat} />
      </ColorMatrix>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  image: {
    height: 250,
    width: 250,
  },
});
export default App;

Following is the output.

Sepia Filter

You can apply a sepia filter to the image using the Sepia component.

import {StyleSheet, Image, View} from 'react-native';
import React from 'react';
import {Sepia} from 'react-native-color-matrix-image-filters';
import cat from './cat.jpg';

const App = () => {
  return (
    <View style={styles.container}>
      <Sepia>
        <Image style={styles.image} source={cat} />
      </Sepia>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  image: {
    height: 250,
    width: 250,
  },
});
export default App;

Vintage Filter

import {StyleSheet, Image, View} from 'react-native';
import React from 'react';
import {Vintage} from 'react-native-color-matrix-image-filters';
import cat from './cat.jpg';

const App = () => {
  return (
    <View style={styles.container}>
      <Vintage>
        <Image style={styles.image} source={cat} />
      </Vintage>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  image: {
    height: 250,
    width: 250,
  },
});
export default App;

Combine Multiple Filters

You can even combine multiple color filters using concatColorMatrices method.

import {StyleSheet, Image, View} from 'react-native';
import React from 'react';
import {
  ColorMatrix,
  concatColorMatrices,
  tint,
  vintage,
} from 'react-native-color-matrix-image-filters';
import cat from './cat.jpg';

const App = () => {
  return (
    <View style={styles.container}>
      <ColorMatrix matrix={concatColorMatrices(vintage(), tint(0.25))}>
        <Image style={styles.image} source={cat} />
      </ColorMatrix>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  image: {
    height: 250,
    width: 250,
  },
});
export default App;

Following is the output.

That’s how you add color filters to images in react native. I hope this tutorial is helpful for you.