Touchable Opacity messes up width in row container

Question

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.

Answer 1

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.