How to Darken Background Image in React Native

In react native, ImageBackground component is used to set a background image for a screen. The ImageBackground component should be the parent and all other components should be its children.

Sometimes, we might need to tweak the background images to create visually beautiful screens. In this blog post, I will explain how to darken background images in react native.

The ImageBackground has an opacity property but in order to darken the image, you need to change the alpha color value of the image.

To do that, you have to add a View component as the child of ImageBackground. Then change the background color by adding some alpha factor. See the react native example to darken the background image below.

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

const App = () => {
  return (
    <ImageBackground
      style={styles.image}
      source={{
        uri: 'https://cdn.pixabay.com/photo/2018/08/16/18/44/model-3611078_960_720.jpg',
      }}>
      <View style={styles.child} />
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  image: {
    width: '100%',
    height: '100%',
  },
  child: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

export default App;

You may have noticed the background color of the view is rgba(0,0,0,0.5). Here 0.5 is the value that darkens the image. You can adjust the value as you wish to darken the image properly.

Here’s the output of react native example.

That’s it. That’s how you darken the background image in react native.