React-native-reanimated-bottom-sheet: SectionList and Flatlist not scrolling inside reanimated-bottom-sheet

[rizshivalli]

I have added a SectionList (also tried with FlatList) and the scroll for SectionList or Flatlist is not working inside react-native-reanimated-bottom-sheet
` enabledInnerScrolling={true}
ref={fullScreen}
snapPoints={[450, '80%', '50%', '50%']}

    initialSnap={2}

     overdragResistanceFactor={1}

    renderContent={() => renderBottomContent() }

    enabledContentGestureInteraction={false}

  /> `

the SectionList is displaying but it is not scrolling as normal behaviour.

[jasonkw9]

Duplicate of #20

[Arvi128]

Here's my solution :
Bottom Sheet :

<BottomSheet snapPoints={[0, hp('60%'), ACTUAL_SCREEN_HEIGHT]} initialSnap={1} onOpenEnd={() => { this.setState({allowScrolling: true}); }} enabledInnerScrolling={true} onCloseStart={() => this.setState({allowScrolling: false})} onCloseEnd={() => this.props.onBackdropPress() } enabledGestureInteraction={true} overdragResistanceFactor={0} enabledHeaderGestureInteraction={true} enabledContentGestureInteraction={!this.state.allowScrolling} renderContent={this.renderContent} renderHeader={this.renderHeader} />

List :

<VirtualizedList showVerticalScrollIndicator={false} ref={ref => (this.scrollView = ref)} onScroll={event => { if (event.nativeEvent.contentOffset.y < 10) { this.setState({allowScrolling: false}); } }} data={this.props.options} getItemCount={data => this.props.options.length} getItem={(data, index) => { return data[index]; }} keyExtractor={(item, index) => { return item.id; }} onEndReached={() => console.log('End Reached')} renderItem={this.renderItem} />

If you want the inner content to be scrollable , make sure enabledContentGestureInteraction is set to false.