How to stop scrolling sliding when switching to another tab?

Question

Environment:

"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.2",
"react-native-reanimated": "^1.4.0",
"react-native-tab-view": "^2.11.0"

Problem:

How to stop scrolling sliding when switching to another tab?

Example:

When I scroll the content and remove my finger from the screen, the content continues to scroll, that is, slide. I need that when I switch to another tab, this scroll slide stops instantly. That is, the content in that tab did not scroll in the background.

App.js

import * as React from 'react';
import {FlatList, Text, View, StyleSheet, Dimensions} from 'react-native';
import {TabView, SceneMap} from 'react-native-tab-view';

const DATA = Array.from(Array(1000).keys());

const renderFlatList = () => {
  const renderItem = ({item, index}) => {
    return <Text>{index}</Text>;
  };

  const keyExtractor = (item, index) => index.toString();

  return (
    <FlatList data={DATA} renderItem={renderItem} keyExtractor={keyExtractor} />
  );
};
const FirstRoute = () => (
  <View style={[styles.scene, {backgroundColor: '#ff4081'}]}>
    {renderFlatList()}
  </View>
);

const SecondRoute = () => (
  <View style={[styles.scene, {backgroundColor: '#673ab7'}]}>
    {renderFlatList()}
  </View>
);

export default class TabViewExample extends React.Component {
  state = {
    index: 0,
    routes: [{key: 'first', title: 'First'}, {key: 'second', title: 'Second'}],
  };

  render() {
    return (
      <View style={styles.container}>
        <TabView
          navigationState={this.state}
          renderScene={SceneMap({
            first: FirstRoute,
            second: SecondRoute,
          })}
          onIndexChange={index => this.setState({index})}
          initialLayout={{width: Dimensions.get('window').width}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 36,
  },
  scene: {
    flex: 1,
  },
});

Answer 1

Per the comment by OP @Sergey React Navigation is used. It may be a problem with react-native-tab-view itself. However, React Navigation bottom tabs do swap without waiting for the scroll to finish.

https://snack.expo.dev/@trajano/scrolling-and-tab-switch shows this in action. You can do momentum scroll (and I slowed down the deceleration) so you can swap to the next tab