Android does not scroll when I use it with @gorhom / react-native-bottom-sheet

[mehderilker]

Hi,

Works great on iOS devices when I use it with the @gorhom/react-native-bottom-sheet repo. But it does not scroll on Android devices.

IOS Working:

Simulator.Screen.Recording.-.iPhone.12.-.2022-01-28.at.18.14.49.mp4

Android Not Working:

android.mp4

Example Code:

import React, {useCallback,useRef,useMemo) from 'react'
import BottomSheet, {
  BottomSheetView
} from '@gorhom/bottom-sheet';
import WheelPicker from 'react-native-wheely';
const Example = () => {
  const snapPoints = useMemo(() => ['30%', '50%', '60%', '90%'], []);
  const renderBackdrop = useCallback(
    props => (
      <BottomSheetBackdrop
        disappearsOnIndex={-1}
        appearsOnIndex={0}
        {...props}
      />
    ),
    [],
  );

  const ref = useRef(null);
const handleSheetChanges = useCallback(index => {
    console.log('handleSheetChange', index);
  }, []);
  const handleSnapPress = useCallback((index, refId) => {
    console.log('handleSnapPress', index, refId);
    ref.current?.snapToIndex(index);
  }, []);
  const handleClosePress = useCallback(refId => {
    ref.current?.close();
  }, []);

return(
<View>
   <BottomSheet
        index={1}
        backdropComponent={backdropComponent}
        animateOnMount={true}
        enablePanDownToClose={true}
        keyboardBehavior="extend"
        handleIndicatorStyle={{
          backgroundColor: '#E4E7EC',
          width: scale(70),
        }}
        handleStyle={{backgroundColor: '#F9FAFB', borderRadius: 10}}
        ref={ref}
        snapPoints={snapPoints}
        onChange={handleSheetChanges}>
         <BottomSheetView>
  <WheelPicker
          selectedIndex={selectedIndex}
          containerStyle={styles.container}
          selectedIndicatorStyle={styles.selectedIndicator}
          itemTextStyle={styles.itemText}
          itemStyle={styles.item}
          options={options}
          onChange={onChange}
        />
  </BottomSheetView>

    </BottomSheet>
    </View>
)
}

Dependency:

    "@gorhom/bottom-sheet": "^4.1.5",
    "react-native-reanimated": "^2.3.1",
    "react-native-gesture-handler": "^2.1.1",
    "react-native-wheely": "^0.3.2",

[erksch]

Are you sure the problem is with react-native-wheely? Have you tried some other normal ScrollViews / FlatList on Android and verified that that works?

[SrBrahma]

Hi @erksch, I am also having the scroll issue with my modal using your wheely.

Check this: rheng001/react-native-wheel-scrollview-picker#14 (comment)

I have my own "wheely" but I wanted to try yours.

[erksch]

I have found the problem, it happens when the WheelPicker is used inside of some other pressable view that handles touch inputs.

You should be able to wrap the WheelPicker component like so:

<WheelPicker 
  ...
  containerProps={{ onStartShouldSetResponder: () => true }} 
  style={{ backgroundColor: 'transparent' }}
/>  

to catch gesture inputs and "reserve" them for the wheel picker.

[daxiangfei]

When I use setState to set the options property, However, the old values(by options control) in the view are not updated.

[kadirucsu]

<BottomModal enableContentPanningGesture={false} .... />

this way it works for me

[erksch]

It seems that a FlatList nested in another FlatList or ScrollView is not supported on Android. On iOS, it works fine.

[enestatli]

@erksch Try to wrap your BottomSheet children with <NativeViewGestureHandler style={styles.fill} ref={gestureRef}> and add waitFor={gestureRef} to your BottomSheet

[BagerYF]

BottomSheet set enableContentPanningGesture={false}
it works.

[erksch]

Seems like people found a solution! Closing this :)