Image inside TouchableOpacity not showing

user_6873322 0
Viewed 4389

I'm currently trying to set up an image inside TouchableOpacity. It isn't showing and I'm stuck on why that is. Please let me know if you can help. TIA!

I've basically copied this: https://facebook.github.io/react-native/docs/touchableopacity from the official docs, but to no avail.

Thought maybe my TouchableOpacity element wasn't full screen but that's not the case (when I set the background color, I see it fill the screen).

<TouchableOpacity style={styles.button} onPress={this.onWaitingButtonPress.bind(this)}>
    <Image style={styles.imagestyle} source={{uri: "https://www.dollargeneral.com/media/catalog/product/cache/image/e9c3970ab036de70892d86c6d221abfe/0/0/00870101.jpg"}}/>
</TouchableOpacity>

const styles = {
  button: {
    flex: 1,
    alignItems: "stretch",
    backgroundColor: "red"
  },
  imageStyle: {
    flex: 1,
    resizeMode: "contain"
  }
};

I get the red background to fill the whole screen, but the image does not.

touchableopacity react-native image
2 Answers

flex: 1 cover the entire width and height of its container. probably your view's dimensions are 0.

if your touchable is showing, try this;

imageStyle: {
   width: "100%",
   height: "100%"
}

if it's not;

button: {
   width: 100,
   height: 100
}

or,

button: {
   width: "100%,
   height: "100%"
}

so, you can understand the difference between them when trying these

user_59899330

Flex:1 in parent covers entire area but flex1 in image cover only height of entire screen. Here width becomes 0 since flex direction is column by default. Try setting some width lfor image ike "100%' 0r any other value.

Edited after the comment:

If it doesn't not work then add width to touchableopacity also

user_116659080
Related