React Native touchableOpacity and ScrollView not working as expected on ios or android

Question

I'm creating a list with ScrollView and trying to use touchable opacity on all of the rendered items. There is only 6 items in the list but I can only get touchableOpacity to work on the last 2 items.

I'm using touchableOpacity in a components folder and then importing it into a ScrollView on another screen. Any idea what I'm doing wrong or how I can fix the issue?

component code below

const FlatBench = (props) => {
  return (
    <View>
      <ImageBackground
        style={Styles.secondaryImages}
        source={require("../assets/images/FlatBenchPress.png")}
      >
        <TouchableOpacity style={Styles.textContainer}>
          <Text style={Styles.text}>Flat Bench</Text>
        </TouchableOpacity>
      </ImageBackground>
    </View>
  );
};

const Styles = StyleSheet.create({
  secondaryImages: {
    width: "90%",
    height: "80%",
    marginTop: 200,
    shadowColor: "black",
    shadowOffset: { width: 1, height: 2 },
    shadowRadius: 6,
    shadowOpacity: 0.26,
    padding: 10,
    width: 160,
    height: 100,
    borderRadius: 18,
  },
  textContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "black",
  },
  text: {
    color: "#F5EDED",
    fontSize: 20,
    textAlign: "center",
  },
});`

Screen ScrollView Code Below

    const StatsScreen = (props) => {
  return (
    <View style={Styles.container}>
      <View style={Styles.head}>
        <BodyPartsImage style={Styles.top} />

        <View style={Styles.top}>
          <BigButton title="Body Parts" />
        </View>
      </View>

      <ScrollView style={Styles.scrollContainer}>
        <View style={Styles.bottom}>
          <View style={Styles.topItem}>
            <TouchableOpacity>
              <FlatBench />
            </TouchableOpacity>
          </View>
          <View style={Styles.topItem}>
            <FlatBench />
          </View>
          <View style={Styles.bottomItem}>
            <FlatBench />
          </View>
          <View style={Styles.bottomItem}>
            <FlatBench />
          </View>
          <View style={Styles.bottomItem}>
            <FlatBench />
          </View>
          <View style={Styles.bottomItem}>
            <FlatBench />
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

const Styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContainer: {},
  top: {
    flex: 1,
    height: "1%",
    alignItems: "center",
    justifyContent: "center",
  },
  bottom: {
    height: "50%",
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: -100,
  },
  bottomItem: {
    width: "50%",
    height: "50%",
    padding: 5,
    marginBottom: -40,
    shadowColor: "white",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.26,
    shadowRadius: 6,
    elevation: 1,
    justifyContent: "center",
  },
  topItem: {
    width: "50%",
    height: "50%",
    padding: 5,
    marginBottom: 10,
    shadowColor: "white",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.26,
    shadowRadius: 6,
    elevation: 1,
    marginTop: -30,
  },

  buttonA: {
    marginTop: -70,
    marginLeft: "12%",
    borderWidth: 5,
    borderColor: "#d72323",
    alignItems: "center",
    justifyContent: "center",
    width: 120,
    height: 40,
    backgroundColor: "#00000000",
    borderRadius: 10,
  },
  head: {
    paddingBottom: -100,
  },
});

Answer 1

You need to refactor your spacings and find a better combination: you have fixed height for every FlatBench but you are putting them in a fluid height container and doing negative margins. So the FlatBench height and its (very big) margin are covering each other.

If you remove the following lines you can achieve your layout with positive margins on (bottom, bottomItem, topItem)

FlatBench style fix:

secondaryImages: {
    // width: '90%',
    // height: '80%',
    // marginTop: 200,
    shadowColor: 'black',
    shadowOffset: { width: 1, height: 2 },
    shadowRadius: 6,
    shadowOpacity: 0.26,
    padding: 10,
    width: 160,
    height: 100,
    borderRadius: 18,
}

StatsScreen styles fix:

  bottom: {
    height: "50%",
    flexDirection: "row",
    flexWrap: "wrap",
    // marginTop: -100,
  },
  bottomItem: {
    width: "50%",
    // height: '50%',
    padding: 5,
    // marginBottom: -40,
    shadowColor: "white",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.26,
    shadowRadius: 6,
    elevation: 1,
    justifyContent: "center",
  },
  topItem: {
    width: "50%",
    // height: '50%',
    padding: 5,
    // marginBottom: 10,
    shadowColor: "white",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.26,
    shadowRadius: 6,
    elevation: 1,
    // marginTop: -30,
  }