React Native how to make Scroll View work inside Gesture Detector?

Question

I am trying to implement a list inside BottomSheet Feauture in React Native. Bottomsheet is done using Animated.View inside GestureDetector. Now I want to use a scroll view inside animated view so that user can scroll the lists if it overflows. But when I added that scroll view scrolling is disabled. I know the gesture detector is messing up the scroll view's function. But how to make it work.

<GestureDetector gesture={gesture}>
      <Animated.View style={[anStyle.anContainer, rBottomSheetStyle]}>
        <ScrollView>
          {list.map((item, index)=>{
           return (
              <Text>{item}</Text>
                  );
           })}
        </ScrollView>
      </Animated.View>
    </GestureDetector>

here the animated container has a height 3/4 of the screen. So of there are many texts inside the list the content overflow but the scroll view wont take effect.

Please help with the apt solution also with code.

Pavithra Os · Answer 1 · 2023-08-05T12:11:24.967

Kind of easiest way to deal with this would be to wrap the gesture detector with a view and put it inside the AnimatedView. Then the GestureDetector wouldn't really bother the ScrollView.

<Animated.View style={[anStyle.anContainer, rBottomSheetStyle]}>
    <GestureDetector gesture={gesture}>
        <View style={styles.randomStyles}>
            <Text>Scroll text from here</Text>
        </View>
    </GestureDetector>
    <ScrollView>
      {list.map((item, index)=>{
       return (
          <Text>{item}</Text>
              );
       })}
    </ScrollView>
</Animated.View>

React Native how to make Scroll View work inside Gesture Detector?

1 Answers1