React Native - How to Make ImageBackground darker

How to Make ImageBackground darker in React Native

August 09, 2019


React Native provides ImageBackground component which is similar to background-image in the web.

With this component, we can set various things over the image like text or other images.

return (
  <ImageBackground source={} style={{width:100%, height:100%}}>

I wanted to set background image darker to popup text, but applying style on ImageBackground component doesn't work since it's a wrapper of image and cannot apply rgba() to inline style.


Use custom Darken component

<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
// Note that I am using styled-component
const DarkenImg = styled.View`
  flex: 1;
  background-color: rgba(0, 0, 0, 0.4);