nested ScrollView is not working inside PagerView

[Jubayer-cmd]

Nested scrollView is not working when I try to show the products inside pagerView as a nested. If I give the height of the pagerView, like 3000, then it scrolls; otherwise, it does not scroll, but other Views become also 3000. How can I fix this issue?

    <View className=''>
      <View className='flex-row justify-around items-center border-b border-gray-300 py-3'>
        {['Products', 'Info', 'Reviews'].map((title, index) => (
          <TouchableOpacity key={index} onPress={() => handleTabPress(index)}>
            <Text
              className={`font-bold text-lg ${
                activeTab === index
                  ? 'text-black border-b-2 border-black'
                  : 'text-gray-400'
              }`}
            >
              {title}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      <ScrollView>
        <PagerView
          ref={pagerViewRef}
          className='w-full h-full' //if i give height h-[3000] then its scrollable 
          initialPage={0}
          onPageSelected={handlePageChange}
          scrollEnabled
        >
          <ScrollView key='1'>
            <StoreAllProducts products={products} />
          </ScrollView>
          <View key='2' className=''>
            <Text>Info</Text>
          </View>
          <View key='3' className=''>
            <Text>Reviews</Text>
          </View>
        </PagerView>
      </ScrollView>
    </View>

[atultiwaree]

Any update guys ??

[lnbin]

same problem +1

[phanthaoIT]

I have the same issue +1

[MrRefactor]

👀

[MrRefactor]

Please provide a repro repo.

[levepic]

same issue

[wei916159659]

same issue + 1. is there any ways to solve this problem? now i have to nested a ScrollView with props horizontal and pagingEnabled rather than use the PagerView

[thblt-thlgn]

Not ideal but you can implement a workaround using a GestureDetector on the PagerView to track vertical panning, and from there update the contentOffset props of an Animated.Scrollview.

Here is an example of what I mean by that:

import { View, StyleSheet, Dimensions } from "react-native";
import PagerView from "react-native-pager-view";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  useSharedValue,
  useAnimatedScrollHandler,
  type SharedValue,
  useAnimatedProps,
} from "react-native-reanimated";

const ScreenWidth = Dimensions.get("window").width;

const ScrollableContainer = () => {
  const translateY = useSharedValue(0);
  const handleScroll = useAnimatedScrollHandler((event) => {
    translateY.set(event.contentOffset.y);
  });

  return (
    <Animated.ScrollView
      style={styles.scrollView}
      onScroll={handleScroll}
      scrollEventThrottle={16}
      animatedProps={useAnimatedProps(() => ({
        contentOffset: { x: 0, y: translateY.get() },
      }))}
    >
      {Array.from({ length: 5 }, (_, index) => (
        <View style={styles.pageContainer} key={index.toString()}>
          <Pager translateY={translateY} />
        </View>
      ))}
    </Animated.ScrollView>
  );
};

type PagerProps = { translateY: SharedValue<number> };
const Pager = ({ translateY }: PagerProps) => {
  const initialOffset = useSharedValue(0);
  const gesture = Gesture.Pan()
    .onStart(() => {
      initialOffset.set(translateY.value);
    })
    .onUpdate((e) => {
      translateY.set(Math.max(initialOffset.get() - e.translationY, 0));
    });

  return (
    <GestureDetector gesture={gesture}>
      <AnimatedPagerView
        style={styles.pagerView}
        initialPage={0}
        orientation="horizontal"
        overScrollMode="never"
      >
        <View style={[styles.page, { backgroundColor: "red" }]} />
        <View style={[styles.page, { backgroundColor: "green" }]} />
        <View style={[styles.page, { backgroundColor: "blue" }]} />
      </AnimatedPagerView>
    </GestureDetector>
  );
};
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    backgroundColor: "#f8f8f8",
  },
  pageContainer: {
    height: 300,
    marginVertical: 10,
  },
  pagerView: {
    flex: 1,
    width: ScreenWidth,
  },
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default ScrollableContainer;

Hope that helped 🤷‍♂️

[jstr]

For my case, a vertical scroll view nested inside the pager view, updating from 6.5.1 to 6.8.1 fixed the issue.