6.2.0 breaks vertical scrolling of ScrollView parent #722

jwh-hutchison · 2023-05-03T13:11:21Z

Environment

"react-native": "0.71.6",
"react-native-pager-view": "6.2.0",
"react-native-tab-view": "^3.5.1",

Description

I was trying to render TabView of react-native-tab-view inside of a ScrollView, but after upgrading to v6.2.0 for pager-view, the vertical scrolling of the scroll view would lock and only adjust if I didn't select the element that was being rendered as a child under the render() function of the PagerViewAdapter; so if I tried scrolling when selecting a TabBar it would scroll correctly - if I switched out the render(<SceneView/>) for a generic View I could scroll fine.

Inside react-native-tab-view/src/TabView:

return (
  <React.Fragment>
    {tabBarPosition === 'top' &&
      renderTabBar({
        ...sceneRendererProps,
        navigationState,
      })}
    {render(
      navigationState.routes.map((route, i) => {
        return (
          <SceneView
            {...sceneRendererProps}
            addEnterListener={addEnterListener}
            key={route.key}
            index={i}
            lazy={typeof lazy === 'function' ? lazy({ route }) : lazy}
            lazyPreloadDistance={lazyPreloadDistance}
            navigationState={navigationState}
            style={sceneContainerStyle}
          >
            {({ loading }) =>
              loading
                ? renderLazyPlaceholder({ route })
                : renderScene({
                    ...sceneRendererProps,
                    route,
                  })
            }
          </SceneView>
        );
      })
    )}
    {tabBarPosition === 'bottom' &&
      renderTabBar({
        ...sceneRendererProps,
        navigationState,
      })}
  </React.Fragment>
);

This PagerView adapter inherits PagerViewProps props from react-native-pager-view and after downgrading the library (to "react-native-pager-view": "6.1.4"), the entire page can scroll fine again, I was originally going to pin the bug on react-native-tab-view but it seems that this issue has happened with other components that depend on the library (see: #713)

Reproducible Demo

When you use the following code and try to scroll vertically on any elements rendered inside of _renderTab nothing will happen. If you downgrade react-native-pager-view to 6.1.4 it will work.

import React, {Component} from 'react';
import {TabBar, TabView} from 'react-native-tab-view';

_renderTab = (tab) => {
  return (
    <View>{...some stuff to render}</View>
  )
}

_renderTabBar = (props) => {
  return (
    <TabBar
      {...props}
      renderLabel={({route}) => (
        <View>
          <Text style={styles.textStyles}>{route.title}</Text>
        </View>
      )}
    />
  );
};

_renderScene = ({route, jumpTo}) => {
    switch (route.key) {
      case 'day':
        return this._renderTab("day");
      case 'week':
        return this._renderTab("week");
      case 'month':
        return this._renderTab("month");
    }
};

render() {
  return (
    <ScrollView
      contentContainerStyle={{flexGrow: 1}}
      nestedScrollEnabled={true}
      scrollEnabled={true}>
      <View>
        <TabView
          navigationState={this.state}
          onIndexChange={(index) => {
            this.setState({index});
          }}
          renderScene={this._renderScene}
          renderTabBar={this._renderTabBar}
        />
      </View>
    </ScrollView>
  )
}

The text was updated successfully, but these errors were encountered:

FadiAboMsalam · 2023-05-04T06:23:49Z

@jwh-hutchison I am facing same issue bro, same issue any update on this 🤔

jwh-hutchison · 2023-05-04T06:37:33Z

@jwh-hutchison I am facing same issue bro, same issue any update on this 🤔

I would recommend just reverting to version 6.1.4 for now, it definitely seems to be something to do with the way that the PanResponders code was changed in the last release https://github.com/callstack/react-native-pager-view/pull/705/files

caraneilwarner · 2023-05-08T23:11:56Z

We ran into the same thing (6.2.0 breaking vertical scroll on iOS) and had to roll back.

intergalacticspacehighway · 2023-06-05T13:55:31Z

Sorry, that's on me. Can you try these changes and let me know if it fixes the issue?

#734

efstathiosntonas · 2023-07-26T08:54:49Z

@intergalacticspacehighway i've patched it with your PR and it didn't work for this issue: #713

after installing [email protected] it worked though 🤷‍♂️

matt-oakes · 2023-11-16T18:40:35Z

Just to note that #734 works perfectly for me when patched in. You need to remember to rebuild the app through before testing it as it changes native code.

jatin-bhuva · 2024-05-14T05:45:31Z

Is there any solution? facing the same issue in 6.1.4 and also in the latest version.

jayharr-is · 2024-05-16T14:04:44Z

I'm also on 6.2.3, and I also get this issue immediately with a fresh expo app and:

<ScrollView>
   <PagerView>
    {...}
  </PagerView>
</ScrollView>

The PagerView scrolls horizontally, and the ScrollView scrolls vertically, but it's impossible to scroll the ScrollView vertically when swiping inside the PagerView.

jorgezerpa · 2024-06-17T19:09:12Z

I am facing the same issue, but I noticed that, when you scroll from up, and before the scroll stops you swiper again over the PagerView, then it scrolls vertically, but rather not horizontally.

leabaertschi · 2024-07-12T13:46:03Z

I am also facing this issue with version 6.3.0

shubhamguptadream11 · 2024-07-16T07:22:14Z

Facing the same issue. Fixed with [email protected].
When are we planning to release v7.x.x version? @intergalacticspacehighway

wilsolutions · 2024-07-25T16:55:12Z

Thanks @shubhamguptadream11

In case anyone ran into this issue, I've recently upgraded my App to RN 0.73.8 and got this error well but it was fixed bumping the RNPV to [email protected]

leabaertschi · 2024-08-22T13:53:24Z

[email protected] fixes this issue, but now it seems to be impossible to have elements in a page with an onPress, this is never called when clicking on a Pressable in a page

onyedikachi23 · 2024-09-12T15:45:44Z

@intergalacticspacehighway i've patched it with your PR and it didn't work for this issue: #713

after installing [email protected] it worked though 🤷‍♂️

Thanks a lot. This fixed my issue.

The issue I had was that using Material Top Tabs Navigator in my expo managed project kept showing the error:

Unable to resolve "./PagerViewNativeComponent" from "node_modules/react-native-pager-view/src/PagerView.tsx"

Though together with the version install, I also closed the metro server by doing Ctrl + C in the server terminal and running:

npx expo start -c

to start the server again with the bundler cache cleared, and also clearing cache in the Expo Go mobile app.

shubhamguptadream11 · 2024-11-13T07:16:08Z

@leabaertschi Can you provide a sample reproducer in order to validate this in v7.0.0-rc.2

…gerView inside ScrollView

intergalacticspacehighway mentioned this issue Jun 5, 2023

fix(ios): parent scroll view not able to scroll #734

Closed

3 tasks

intergalacticspacehighway mentioned this issue Sep 25, 2023

Revert "feat(ios): back gesture with full screen swipe (#705)" #771

Draft

3 tasks

marceloch2 mentioned this issue Nov 8, 2023

Does not work within a ScrollView #784

Open

trevorpfiz mentioned this issue Aug 9, 2024

Is it possible to allow gestures on both axes within a PagerView #849

Closed

viper4595 mentioned this issue Sep 23, 2024

Screen not scrolling when Tab is inside a Scrollview in iOS react-navigation/react-navigation#11719

Open

11 tasks

MateWW added a commit that referenced this issue Nov 21, 2024

fix(#722): revert not working back navigation gesture in favour of Pa…

41a7e80

…gerView inside ScrollView

MateWW added a commit that referenced this issue Nov 21, 2024

fix(#722): revert not working back navigation gesture in favour of Pa…

3e5ea73

…gerView inside ScrollView

MateWW linked a pull request Nov 21, 2024 that will close this issue

fix(#722): revert not working back navigation gesture in favour of PagerView inside ScrollView #919

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

6.2.0 breaks vertical scrolling of ScrollView parent #722

6.2.0 breaks vertical scrolling of ScrollView parent #722

jwh-hutchison commented May 3, 2023 •

edited

Loading

FadiAboMsalam commented May 4, 2023

jwh-hutchison commented May 4, 2023 •

edited

Loading

caraneilwarner commented May 8, 2023

intergalacticspacehighway commented Jun 5, 2023

efstathiosntonas commented Jul 26, 2023 •

edited

Loading

matt-oakes commented Nov 16, 2023

jatin-bhuva commented May 14, 2024 •

edited

Loading

jayharr-is commented May 16, 2024

jorgezerpa commented Jun 17, 2024

leabaertschi commented Jul 12, 2024

shubhamguptadream11 commented Jul 16, 2024 •

edited

Loading

wilsolutions commented Jul 25, 2024

leabaertschi commented Aug 22, 2024 •

edited

Loading

onyedikachi23 commented Sep 12, 2024

shubhamguptadream11 commented Nov 13, 2024

6.2.0 breaks vertical scrolling of ScrollView parent #722

6.2.0 breaks vertical scrolling of ScrollView parent #722

Comments

jwh-hutchison commented May 3, 2023 • edited Loading

Environment

Description

Reproducible Demo

FadiAboMsalam commented May 4, 2023

jwh-hutchison commented May 4, 2023 • edited Loading

caraneilwarner commented May 8, 2023

intergalacticspacehighway commented Jun 5, 2023

efstathiosntonas commented Jul 26, 2023 • edited Loading

matt-oakes commented Nov 16, 2023

jatin-bhuva commented May 14, 2024 • edited Loading

jayharr-is commented May 16, 2024

jorgezerpa commented Jun 17, 2024

leabaertschi commented Jul 12, 2024

shubhamguptadream11 commented Jul 16, 2024 • edited Loading

wilsolutions commented Jul 25, 2024

leabaertschi commented Aug 22, 2024 • edited Loading

onyedikachi23 commented Sep 12, 2024

shubhamguptadream11 commented Nov 13, 2024

jwh-hutchison commented May 3, 2023 •

edited

Loading

jwh-hutchison commented May 4, 2023 •

edited

Loading

efstathiosntonas commented Jul 26, 2023 •

edited

Loading

jatin-bhuva commented May 14, 2024 •

edited

Loading

shubhamguptadream11 commented Jul 16, 2024 •

edited

Loading

leabaertschi commented Aug 22, 2024 •

edited

Loading