Touchable onPress does not response: when coexists with a FlatList under the same Tab of react-native-scrollable-tab-view and the FlatList is scrolling

MockScreen.js

import React from "react";
import PropTypes from "prop-types";
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  Platform,
  StyleSheet,
} from "react-native";

const mockList = new Array(100).fill(0).map((zero, index) => ({ key: index, title: 'Test' }));

export default class extends React.Component {

  constructor(props) {
    super(props);
    this.scrollToTop = this.scrollToTop.bind(this);
    this.scrollToEnd = this.scrollToEnd.bind(this);
  }

  scrollToTop() {
    console.log('scrollToTop');
    this._flatList.scrollToOffset({offset: 0});
  }

  scrollToEnd() {
    console.log('scrollToEnd');
    this._flatList.scrollToEnd();
  }

  render() {
    const itemList = (
      <FlatList
        ref={(list) => {
          this._flatList = list
        }}
        style={styles.container}
        data={mockList}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => {console.log('row item pressed');}}
          >
            <View style={styles.item}>
              <Text style={styles.itemText}>{item.title}</Text>
            </View>
          </TouchableOpacity>
        )}
      />
    );

    return (
      <View style={{flex: 1}}>
        <View style={{ alignSelf: 'stretch', justifyContent: 'center', flexDirection: 'row', justifyContent: 'space-between' }}>
          <TouchableOpacity onPress={this.scrollToTop} style={{width: 100, height: 30, backgroundColor: 'blue'}}>
            <Text style={{color: 'white', fontWeight: 'bold'}}>scrollToTop</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.scrollToEnd} style={{width: 100, height: 30, backgroundColor: 'blue'}}>
            <Text style={{color: 'white', fontWeight: 'bold'}}>scrollToEnd</Text>
          </TouchableOpacity>
        </View>
        {itemList}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  },
  item: {
    backgroundColor: "#fff",
    borderBottomColor: "#ccc",
    borderBottomWidth: StyleSheet.hairlineWidth,
    justifyContent: "space-between",
    alignItems: "center",
    flexDirection: "row",
    ...Platform.select({
      ios: { marginLeft: 15, paddingRight: 15, paddingVertical: 15 },
      android: { padding: 15 }
    })
  },
  itemText: {
    fontSize: 16
  }
});

SimpleExample.js

import React from 'react';
import {
  Text,
} from 'react-native';

import ScrollableTabView, {DefaultTabBar, } from 'react-native-scrollable-tab-view';

import MockScreen from './MockScreen';

export default () => {
  return <ScrollableTabView
    style={{marginTop: 20, }}
    initialPage={1}
    renderTabBar={() => <DefaultTabBar />}
  >
    <MockScreen tabLabel='Tab1'/>
    <MockScreen tabLabel='Tab2'/>
    <MockScreen tabLabel='Tab3'/>
  </ScrollableTabView>;
}