Touchable Highlight desconfigures Image in React Native

Question

I'm facing a problem involving Touchable Highlights and Images in React Native. When I don't use the TH (Touchable Highlight) my Image's styles work perfectly.1

But when I add a TH to work on Navigation in my app, the Image desconfigures totally, and I don't know why. It doesn't appear.2

This is my code.

<TouchableHighlight onPress={() => this.props.navigation.navigate("Catalog")}>
  <ImageBackground
    source={require("../assets/supermercados.png")}
    style={{ flex: 1, width: imageWidth, marginBottom: 10 }}
  >
    <View style={styles.view}>
      <Image
        source={require("../assets/iconSupermercados.png")}
        style={styles.icons}
      />
      <Text style={styles.text}>SUPERMERCADOS</Text>
    </View>
  </ImageBackground>
</TouchableHighlight>;

Thanks for all your help!

score 0 · Answer 1 · answered Mar 16 '20 at 12:58

add styles to TouchableHighlight check

<TouchableHighlight style={{flex: 1, width: imageWidth, marginBottom: 10}} onPress={() => this.props.navigation.navigate('Catalog')}>
     <ImageBackground source={require('../assets/supermercados.png')} style={{ flex:1 }}>
         <View style={styles.view}>
             <Image source={require('../assets/iconSupermercados.png')} style={styles.icons} />
                 <Text style={styles.text}>SUPERMERCADOS</Text>
         </View>
     </ImageBackground>
</TouchableHighlight>

Touchable Highlight desconfigures Image in React Native

1 Answers1