react-native-tab-view ScrollView bug

App.js

import React, { useState } from 'react';
import {
  Dimensions,
  FlatList,
  SafeAreaView,
  ScrollView,
  Text,
  View,
} from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';

const flatListData = [...Array(100).keys()].map(n => ({
  key: n.toString(),
  name: `Item ${n}`,
}));

const FirstRoute = () => (
  <FlatList
    style={{ flex: 1, backgroundColor: '#ff4081' }}
    data={flatListData}
    renderItem={({ item }) => <Text>{item.name}</Text>}
    onEndReachedThreshold={0.5}
    onEndReached={() =>
      alert('onEndReached: should not fire without scrolling down')
    }
  />
);

const SecondRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#673ab7' }} />
);

const routes = [
  { key: 'first', title: 'First' },
  { key: 'second', title: 'Second' },
];

export default function App() {
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView>
        <TabView
          navigationState={{ index: activeTabIndex, routes }}
          renderScene={SceneMap({
            first: FirstRoute,
            second: SecondRoute,
          })}
          onIndexChange={setActiveTabIndex}
          initialLayout={{ width: Dimensions.get('window').width }}
        />
      </ScrollView>
    </SafeAreaView>
  );
}