React Native FlatList only responds to touches sometimes

Question

I have used FlatList in multiple places in my app previously without any issues, but now when I created a new one it doesn't seem to register touches/swipes correctly. Only like 1/6 touches seem to register.

See the video here: https://photos.app.goo.gl/NZCtVYX6GLVCQN392

This is how I use the FlatList:

render() {
        return (
            <Container>
                ...
                <FlatList
                    data={this.state.exercises}
                    renderItem={({item}) =>
                        <SetsRepsAndWeightItem exercise={item}/>
                    }
                    keyExtractor={item => item.name}
                    style={style.list}
                />
            </Container>
        );
}

And the SetsRepsAndWeightItem:

render() {
        return (
            <View style={style.container}>
                <View style={style.header}>
                    <Text style={style.headerText}>{this.props.exercise.name}</Text>
                </View>
                <View style={style.about}>
                    <TouchableWithoutFeedback onPress={this.handleSetsPressed}>
                        <StatisticNumber metric="Sets" value={7}/>
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback onPress={this.handleRepsPressed}>
                        <StatisticNumber metric="Reps" value={5}/>
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback onPress={this.handleWeightPressed}>
                        <StatisticNumber metric="kg" value={35}/>
                    </TouchableWithoutFeedback>
                </View>
            </View>
        );
}

handleSetsPressed = () => {
    console.log("sets pressed");
}

handleRepsPressed = () => {
    console.log("reps pressed");
}

handleWeightPressed = () => {
    console.log("weight pressed");
}

Also: the TouchableWithoutFeedback elements are not calling their onPress functions when they are touched.

The Container is as simple as this:

export default class Container extends Component {
  static propTypes = {
    children: Proptypes.any,
    backgroundColor: Proptypes.string
  };

  render() {
    const containerStyles = StyleSheet.flatten([
      style.container,
      this.props.backgroundColor ? { backgroundColor: this.props.backgroundColor } : null,
    ]);

    return (
        <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
            <View style={containerStyles}>
              {this.props.children}
            </View>
        </TouchableWithoutFeedback>
    );
  }
}

Answer 1

The following two fixes solved the issues for me:

1. Remove the onPress={() => Keyboard.dismiss()} from the Container component

2. Move the TouchableWithoutFeedback into the StatisticNumber component, and pass onPress as a prop from SetsRepsAndWeightItem