title: React Native FlatList only responds to touches sometimes
body: <p>I have used <code>FlatList</code> 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.</p>
  
  <p>See the video here: <a href="https://photos.app.goo.gl/NZCtVYX6GLVCQN392" rel="nofollow noreferrer">https://photos.app.goo.gl/NZCtVYX6GLVCQN392</a></p>
  
  <p>This is how I use the <code>FlatList</code>:</p>
  
  <pre><code>render() {
          return (
              &lt;Container&gt;
                  ...
                  &lt;FlatList
                      data={this.state.exercises}
                      renderItem={({item}) =&gt;
                          &lt;SetsRepsAndWeightItem exercise={item}/&gt;
                      }
                      keyExtractor={item =&gt; item.name}
                      style={style.list}
                  /&gt;
              &lt;/Container&gt;
          );
  }
  </code></pre>
  
  <p>And the <code>SetsRepsAndWeightItem</code>:</p>
  
  <pre><code>render() {
          return (
              &lt;View style={style.container}&gt;
                  &lt;View style={style.header}&gt;
                      &lt;Text style={style.headerText}&gt;{this.props.exercise.name}&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={style.about}&gt;
                      &lt;TouchableWithoutFeedback onPress={this.handleSetsPressed}&gt;
                          &lt;StatisticNumber metric="Sets" value={7}/&gt;
                      &lt;/TouchableWithoutFeedback&gt;
                      &lt;TouchableWithoutFeedback onPress={this.handleRepsPressed}&gt;
                          &lt;StatisticNumber metric="Reps" value={5}/&gt;
                      &lt;/TouchableWithoutFeedback&gt;
                      &lt;TouchableWithoutFeedback onPress={this.handleWeightPressed}&gt;
                          &lt;StatisticNumber metric="kg" value={35}/&gt;
                      &lt;/TouchableWithoutFeedback&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          );
  }
  
  handleSetsPressed = () =&gt; {
      console.log("sets pressed");
  }
  
  handleRepsPressed = () =&gt; {
      console.log("reps pressed");
  }
  
  handleWeightPressed = () =&gt; {
      console.log("weight pressed");
  }
  </code></pre>
  
  <p>Also: the <code>TouchableWithoutFeedback</code> elements are not calling their <code>onPress</code> functions when they are touched.</p>
  
  <p>The <code>Container</code> is as simple as this:</p>
  
  <pre><code>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 (
          &lt;TouchableWithoutFeedback onPress={() =&gt; Keyboard.dismiss()}&gt;
              &lt;View style={containerStyles}&gt;
                {this.props.children}
              &lt;/View&gt;
          &lt;/TouchableWithoutFeedback&gt;
      );
    }
  }
  </code></pre>