Problem with slider inside BottomSheet on Android

Hi, I’ve got problem with slider inside BottomSheet. Everything works fine on iOS, but on Android I can’t use horizontal scrolling. I had more problems in android (because I’m using ScrollView inside BottomSheet), but with this thread (https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/16) I resolved most problems without that one. Slider (react-native-snap-carousel) works only when I set enabledContentGestureInteraction={false} but then I lose major functionality.

Is there any solution for that? Does somebody use another slider with this library? (but I’m guessing this is problem occurring with BottomSheet) I saw that what I need is in TODO section probably, but maybe someone has some idea, because lib is great 😃

[tuanngocptn]

I have the same problem when try using ScrollView with horizontal inside BottomSheet And I solve it after change import from react-native to react-native-gesture-handler. 👯 👯 👯 👯 👯

[DonWasyl]

Ok I found temporary and working solution 😃

In my example I’m using reanimated-bottom-sheet with react-native-snap-carousel inside ScrollView.

I had to add state which we will be using to enable/disable gesture interaction and enable it during onTouchStart on container with that element.

Simple example

this.state = {
   isHorizontalScrollingEnabled: false,
}

--

 _handleHorizontalScrollingEnable = () => {
  this.setState({
    isHorizontalScrollingEnabled: true,
  });
};

  _handleHorizontalScrollingDisable = () => {
  this.setState({
    isHorizontalScrollingEnabled: false,
  });
};

--

<BottomSheet
  [...]
  enabledGestureInteraction={!this.state.isHorizontalScrollingEnabled}
  renderContent={() => (
    <PanGestureHandler
      activeOffsetY={5}
      failOffsetY={-5}
      onGestureEvent={this._onScrollDown}
      [...]
    >
      <ScrollView [...]>
        <View onTouchStart={this._handleHorizontalScrollingEnable}>
           // Our part of code with horizontal scrolling - in my case react-native-snap-carousel
        </View>
      </ScrollView>
    </PanGestureHandler>
  )}
/>

I didn’t check if that work with native scroll, but with react-native-snap-carousel In renderContent section works 😃 PanGestureHandler is the approach from there: https://github.com/software-mansion/react-native-gesture-handler/issues/420#issuecomment-457499442 and in onScrollDown function i disabling horizontal scrolling.

Maybe that will be helpful for someone