[v4] | Horizontal scrollView not working on Android

Bug

I used react-native-swipper as carousel image. It’s a horizontal scrollView The scrolling only works on iOS but not on Android

Environment info

Library	Version
@gorhom/bottom-sheet	^4.1.4
react-native	0.66.3
react-native-reanimated	2.2.4
react-native-gesture-handler	1.10.3

Steps To Reproduce

index.js

 <BottomSheetModalProvider>
                                <App />
</BottomSheetModalProvider>

<BottomSheetModal
                backdropComponent={renderBackdrop}
                ref={modalRef}
                index={0}
                snapPoints={snapPoints}
                handleComponent={() => <></>}
                backgroundComponent={() => <></>}
                onAnimate={(fromIndex, toIndex) => {
                    if (fromIndex === -1 && toIndex === 0) {
                        Keyboard.dismiss();
                    }
                }}
            >
                <>
                    {header}
                    <View style={styles.container}>
                        <View style={styles.wrapperSwiper}>
                            <SwiperComponent
                           >
                                {images.map((image) => (
                                   
                                ))}
                            </SwiperComponent>
                        </View>
                    </View>
                </>
            </BottomSheetModal>

[engee-nl]

Just wanted to toss in that using FlatList from react-native-gesture-handler fixed things in the Android emulator, but it still doesn’t work on a physical device unless you do a perfectly horizontal swipe

try adding this to the BottomSheet component, it works well for me.

activeOffsetX={[-999, 999]} activeOffsetY={[-5, 5]}

<BottomSheet name="A" ref={oBottomSheetFilterRef} index={1} snapPoints={aSnapPointsFilter} animatedPosition={oAnimatedPosition} activeOffsetX={[-999, 999]} activeOffsetY={[-5, 5]} >

So BottomSheet will only activate the gesture handler if you move more than 5 points upwards or downwards (in this case travel more than 10 points on the y axis), and it will activate when you move 999 points leftwards or rightwards (x axis). Usually you don’t move that much leftwards or rightwards on your phone, and it will thus not activate the bottom sheet handler. By not activating the bottom sheet handler (when moving leftwards or rightwards) the gesture handler will be passed down to the FlatList component.

This problem doesn’t occur on the emulator. On some physical devices where this problem occur the above code will solve it.

[ktroitsky]

Update: despite scrolling after replacing the regular ScrollView with BottomSheetScrollView, it still didn’t work quite well on Android. Sometimes it scrolled fine, but sometimes the scrollable lost its offset, and snapped to the beginning of the view. Solved by importing the ScrollView from react-native-gesture-handler (similar to @AlexArendsen’s update)