My react-native scrollview container is only touchable in about the top 30% of it. Normally in a scroll view you can scroll from anywhere in the entire ScrollView container but mine only recognizes scrolling touches at the top.

I created a scrollview in react-native that renders a list of pressable text containers inside of it.

Why is my touch target area in my scrollview so small?

P.S I have tried most combinations of passing style={{flex: 1}}} down from parents.

Here is the code and styling I am using...

<View style={styles.pickerContainer}>
                  <ScrollView style={styles.timeIntervalScrollView}>
                    {minuteTimeIntervals.map(timeInterval => {
                      return (
                        <Pressable
                          onPress={() => handleChange(timeInterval, "minute")}
                          style={styles.timeInterval}>
                          <Text style={styles.inputText}>{timeInterval}</Text>
                        </Pressable>
                      );
                    })}
                  </ScrollView>
                </View>

const styles = StyleSheet.create({
  pickerContainer: {
    height: 250 * size,
    width: 128 * size,
    borderWidth: 1,
    borderColor: "#ECE9E9",
  },
  timeInterval: {marginTop: 24 * size},
  inputText: {
    textAlign: "center",
    ...Fonts.xsmall,
    ...Fonts.blackGreen,
    borderWidth: 1,
  },
  timeIntervalScrollView: {
    backgroundColor: "white",
    borderWidth: 1,
    borderColor: "blue",
    width: "100%",
    height: "100%",
  },
});

This is what the scrollview component visually looks like...The Red Dashed box represents the only touchable area that lets me scroll