Photoshop Question posted in
The official user guide can be found here.

Darken an image in React Native – Photoshop

Darken an image in React Native.

What I want: I want to make my image appear darker, I don’t want to do it by photoshop or anything like that.

Research so far: Some suggestions were to use backgroundColor: "rgba(0,0,0,0.5)", but that does not work since I am not using ImageBackground. I also have seen the Opacity prop used, but that doesn’t work for my scenario.

The closest I got was tintColor, but I wasnt able to change the opacity on that with the prop and RGBA didn’t work either.

The image: (I want to make my white text pop more!)

The image I want to darken

Small code snippet:

{/* Image */}

    <View style={styles.workoutImageContainer}>
      <Image
        source={item.photo}
        resizeMode="cover"
        style={styles.workoutImage}
      />

      <View style={styles.workoutTitleContainer}>
        <Text style={styles.workoutTitle}>{item.name}</Text>
      </View>
    </View>
  </TouchableOpacity>
Tags:

2

Answers


  1. 0

    You could reduce the opacity of the image and wrap it in a black-ish container.

    This is not darkening in a photo editing maner, where you would keep brighter whites. This is plain fade to black.

    div {
  display: inline-block;
  background: black;
}

img {
  opacity: .6
}
    <div>
 <img src="https://www.placecage.com/320/200"/>
</div>
    Login or Signup to reply.
  2. 0

    I suggest trying to apply a CSS filter rule. Brightness is the one I think you would want. I do know some CSS rules have limited support in React-Native though.

    img.darker {
  filter: brightness(50%);
}
    <img src="https://picsum.photos/200/300"/>
<img class="darker" src="https://picsum.photos/200/300"/>

    Here’s an Expo Snack, but yeah, appears to not work so well on the native side so you’ll likely need to resort to using an overlay or similar approach.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search