react-native-pager-view
react-native-pager-view copied to clipboard
Android - PagerView item in horizontal ScrollView is not scrolling
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.
Some problems, any ideas ?
same issue
same issue