How to Darken Background Image in React Native

Last Updated on December 15, 2020.

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 image in react native.

The ImageBackground has an opacity prop 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.

Class Component


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

class App extends Component {
  render() {
    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}>

          </View>
          </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({

  image: {
    width: '100%',
    height: '100%',
  },
  child: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)'
  }
});

//make this component available to the app
export default App;

Function Component

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.

react native dark image background example

That’s it, thank you for reading!

1 thought on “How to Darken Background Image in React Native”

Leave a Reply

%d bloggers like this: