Android - PagerView item in horizontal ScrollView is not scrolling

GoktuqCan commented 12 months ago

Environment

"react-native": "0.71.8" "react-native-pager-view": "^7.0.0-rc.0" "react-native-gesture-handler": "^2.10.1"

Description

I've add PagerView inside of a horizontal ScrollView based on this example. On iOS it works well but on Android, pager is not scrolling.

import PagerView from "react-native-pager-view";
import React from "react";
import { View, StyleSheet, Animated, Dimensions } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
// Also tried ScrollView from "react-native"

const { width } = Dimensions.get("window");
const HEIGHT = 300;

const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);

const COLORS = ["red", "green", "blue", "yellow"];

export function ScrollablePagerViewExample() {
  return (
    <View>
      <ScrollView style={styles.flex} horizontal nestedScrollEnabled>
      {/* Also tried <ScrollView style={styles.flex} horizontal> */}
        {COLORS.map((item) => (
          <AnimatedPagerView
            key={`pager-${item}`}
            style={{ height: HEIGHT, width: width - 70, marginLeft: 40 }}
          >
            {COLORS.map((color) => (
              <View
                key={color}
                style={{
                  backgroundColor: color,
                  width: "100%",
                  height: "100%",
                }}
              />
            ))}
          </AnimatedPagerView>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
});