React Native FlatList Horizontal Scroll Not Working with Gesture Handler Pinch Zoom on Android Tablet (Android 14) - Stack Overf

admin管理员组

文章数量:1434949

I am using a horizontal FlatList combined with react-native-gesture-handler to implement pinch-to-zoom functionality. The pinch gesture works as expected, allowing me to zoom in and out of the content. However, the horizontal scroll of the FlatList is not working properly.

Problem: Initially, scrolling does not work when zoomed out. Scrolling starts working only after zooming in significantly.

 <NativeViewGestureHandler disallowInterruption={true}>
      <View style={styles.container} onLayout={onContainerLayout}>
        <PinchGestureHandler onGestureEvent={handlePinch} onHandlerStateChange={handlePinchEnd}>
          <View style={{ overflow: "hidden" }}>
            <Animated.View style={[animatedStyle]}>
              <FlatList
                data={[{ labels, bars }]}
                contentContainerStyle={styles.scrollViewContent}
                scrollToOverflowEnabled
                showsHorizontalScrollIndicator={false}
                keyExtractor={(item, index) => `label-${index}`}
                horizontal
                onTouchStart={() => setOuterScrollEnabled(false)}
                onTouchEnd={() => setOuterScrollEnabled(true)}
                onTouchCancel={() => {
                  setOuterScrollEnabled(true);
                }}
                onStartShouldSetResponder={() => true}
                onMoveShouldSetResponder={() => true}
                onScroll={onScroll}
                nestedScrollEnabled
                decelerationRate="fast"
                scrollEventThrottle={16}
                renderItem={({ item }) => {
                  return (
                    <View style={[styles.timelineContainer, { minWidth: xScale(to!) }]}>
                      <View style={[styles.timeLabelsContainer]}>{renderLabels(item.labels)}</View>
                      <View style={[styles.barsContainer]}>{renderBars(item.bars)}</View>
                    </View>
                  );
                }}
              />
            </Animated.View>
          </View>
        </PinchGestureHandler>
      </View>
    </NativeViewGestureHandler>

What I’ve Tried: Updated react-native-gesture-handler and react-native-reanimated to the latest versions. Wrapped the entire FlatList inside a GestureHandlerRootView. Checked that scrollEnabled is dynamically set based on the zoom state. Verified that the contentContainerStyle of the FlatList is correctly set.

本文标签：