react-native-pager-view icon indicating copy to clipboard operation
react-native-pager-view copied to clipboard

Android - PagerView item in horizontal ScrollView is not scrolling

Open GoktuqCan opened this issue 2 years ago • 3 comments

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,
  },
});
  • iOS - working

https://github.com/callstack/react-native-pager-view/assets/15637944/571d994d-6693-4ee3-ac5e-19d837df87e1

  • Android - not working

https://github.com/callstack/react-native-pager-view/assets/15637944/ad190229-f181-4257-bb4d-a886cb9f0b01

Reproducible Demo

Put above component in any component.

GoktuqCan avatar Nov 09 '23 21:11 GoktuqCan

Some problems, any ideas ?

SarviroRoman avatar Nov 15 '23 07:11 SarviroRoman

same issue

JuEunSung avatar Nov 27 '23 05:11 JuEunSung

same issue

TomWq avatar Dec 21 '23 03:12 TomWq