Scroll after switching tabs does not register properly

[tdekoning]

Current behavior

This is an issue that, as far as i can see, is only occurring on Android.

In the situation where you have 2 (or more) tabs that have content which is scrollable, and the tab-view has swipeEnabled={true}. When the user switches from 1 tab to the other (see video), the first scroll interaction is not picked up by the scrollview inside the tab, but is captured by react-native-tab-view.

The strange thing is, that in the expo snack that i've linked, the behavior isn't present. However, when creating a react-native project from scratch (using react-native cli), and using the following code, the issue does happen.

Package.json:

"dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.0",
    "react-native-pager-view": "^5.4.1",
    "react-native-tab-view": "^3.1.1"
  }

App.js:

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

const FirstRoute = () => (
  <ScrollView style={{ flex: 1, backgroundColor: '#ff4081' }}>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
  </ScrollView>
);

const SecondRoute = () => (
  <ScrollView style={{ flex: 1, backgroundColor: '#673ab7' }}>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
    <Text style={styles.text}>This is text</Text>
  </ScrollView>
);

const renderScene = SceneMap({
  first: FirstRoute,
  second: SecondRoute,
});

export default function TabViewExample() {

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);

  return (
    <TabView
      style={{marginTop: 32}}
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      swipeEnabled={true}
    />
  );
}

const styles = StyleSheet.create({
  text: {fontSize: 50, marginBottom: 64}
})

Expected behavior

I expect that a vertical scroll (and keeping in mind that users don't scroll 100% vertical) is picked up by the component inside of the tab (such as the scrollview in my example), so that the user can access all the content that is available.

Reproduction

https://snack.expo.dev/@ted-q42/tabbar-scrollview

Platform

• [X] Android
• [ ] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.4.1
react-native	0.65.1
expo	(not using expo)
node	v14.16.0
npm or yarn	6.14.11

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.63.0, latest: 0.65.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[tdekoning]

Expo isn't used in my project

[Guuz]

I tested this in my team's app as wel. We are still using v2 of react-native-tab-view. But as soon as we upgrade to v3, that uses the pager-view package, this happens. The scroll/swipe down is registered as a vertical swipe. This is a major UX-problem and prevents us from upgrading.

[nericode]

I have same issue, in my case i use:

<FlatList
  data={data}
  style={{flex: 1, backgroundColor: 'white'}}
  keyExtractor={(_, index) => index}
  renderItem={({item, index}) => <Component />}
/>

Environment

"dependencies": {
  "react": "17.0.1",
  "react-native": "0.64.2",
  "react-native-pager-view": "^5.4.0",
  "react-native-tab-view": "^3.1.1",
}

[arturovv]

Same issue here. It prevents us from upgrading as well. Easily reproducible on device, not always on simulator. Android only issue.

"dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/material-top-tabs": "^6.0.2",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "react": "17.0.2",
    "react-native": "0.65.1",
    "react-native-pager-view": "^5.4.1",
    "react-native-safe-area-context": "^3.3.0",
    "react-native-screens": "^3.6.0",
    "react-native-tab-view": "^3.1.1",
  }

[christianstefaniw]

same issue

[thorewi]

same issue

[mikesoko]

I have the same issue on Android

[imavipatel]

same issue @satya164 please resolve this sir

[stratus1011]

I'm seeing the same behavior. Any update on this?

[okwasniewski]

@tdekoning Hey, can you test it with the latest version of tab-view and pager-view. If the issue still persist please provide a valid reproduction.

[github-actions[bot]]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then please provide the repro in a GitHub repository.

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.