CODEWITHSUNDEEP
javascriptreact-native
jrs
jrs

Reputation: 175

Darken an image in React Native

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>

Upvotes: 0

Views: 2543

Answers (2)

Drew Reese
Drew Reese

Reputation: 202872

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.

Upvotes: 0

GuCier
GuCier

Reputation: 7425

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>

Upvotes: 2

Related Questions