CODEWITHSUNDEEP
react-nativemobile-applicationtouchableopacity
sophos
sophos

Reputation: 51

Touchable Opacity messes up width in row container

I'm trying to make these two Card components appear next to each other in a row as shown here which seems to work when I wrap the component in a View, but appears like this with a bunch of unnecessary space in between when I try it with a TouchableOpacity.

Here is my code for the Card component (currently with TouchableOpacity on and the View wrapper commented out):

  export const NavCard = ({
  title,
  height = 200,
  onPress = null,
  background = null,
}) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={[
        { height: height },
        background ? styles.cardImage : styles.noImage,
      ]}
    >
      {/* <View
        style={[
          { height: height },
          background ? styles.cardImage : styles.noImage,
        ]}
      > */}
      <Image
        source={background}
        resizeMode="cover"
        style={{
          height: height,
          width: "100%",
          borderRadius: 15,
          position: "absolute",
          top: 0,
          right: 0,
        }}
      />
      <View style={{ padding: 15 }}>
        <Text style={styles.title}>{title}</Text>
        <Image
          style={styles.arrow}
          source={require("../assets/arrow-right.png")}
        />
      </View>
      {/* </View> */}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  cardImage: {
    flexGrow: 1,
    margin: "2%",
    borderRadius: 15,
  },
  noImage: {
    flexGrow: 1,
    margin: "2%",
    borderRadius: 15,
    backgroundColor: "#333436",
  },
  title: {
    fontSize: 24,
    color: "#E4E5EA",
    fontWeight: "bold",
    shadowColor: "#000000",
    shadowOffset: { width: 2, height: 2 },
    shadowOpacity: 1,
    shadowRadius: 4,
  },
  arrow: {
    width: 15,
    height: 15,
    resizeMode: "contain",
    position: "absolute",
    top: 22,
    right: 20,
  },
});

Here is the code for the screen:

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <View style={styles.rowContainer}>
        <NavCard
          title="Map"
          height={180}
          onPress={() => navigation.navigate("Map")}
          background={require("../assets/pvdx1.png")}
        ></NavCard>
        <NavCard
          title="CAD"
          height={180}
          background={require("../assets/pvdx1.png")}
          onPress={() => navigation.navigate("CADScreen")}
        ></NavCard>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 10,
    padding: 4,
    flex: 1,
  },
  rowContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  body: {
    paddingTop: 10,
    fontSize: 16,
    color: "#E4E5EA",
  },
});

export default HomeScreen

Does anyone know why it's messing up the width of both components if the styles of the View and TouchableOpacity are exactly the same? I'm using React Native.

Edit: Have updated to use Image instead of ImageBackground (code now reflects this), but the result is the same.

Upvotes: 2

Views: 1585

Answers (3)

MobileMon
MobileMon

Reputation: 8661

for me i had to also set the width on the TouchableOpacity (and the view within)

 <TouchableOpacity
    style={{flex: 1, width: '100%'}}

Upvotes: 0

sophos
sophos

Reputation: 51

I figured out the issue: I was importing TouchableOpacity from react-native-gesture-handler instead of react-native. Changed it and it works just fine.

Upvotes: 3

Masoud Bidar
Masoud Bidar

Reputation: 156

Probably the problem is in your <ImageBackground /> , Because I replaced that with native <Image /> and it's working. here is how my Image looks, you can compare with your code:

<Image
        style={{
          height: height,
          borderRadius: 15,
          position: "absolute",
          top: 0,
          right: 0,
          width: "100%"
        }}
        resizeMode="cover"
        source={{ uri: "https://via.placeholder.com/250x150" }}
      />

Here you can check the working code

Upvotes: 0

Related Questions