FlatList not working inside BottomSheet on Android

Question

I am using gorhom/react-native-bottom-sheet

The issue I am facing:

I have a FlatList inside a BottomSheet, I am able to scroll in FlaLlist on ios but it is not working on android.

Answer 1

After a lot of research, I was able to resolve the issue by using BottomSheetFlatList instead of FlatList from the same package.

import { BottomSheetFlatList } from "@gorhom/bottom-sheet";

<BottomSheetFlatList
        ref={ref}
        initialNumToRender={3}
        keyExtractor={(item) => item?.id}
        showsVerticalScrollIndicator={false}
        maxToRenderPerBatch={3}
        windowSize={7}
        data={dat}
        renderItem={renderItem}
      />

By doing so, it started working fine on android too.

But as I also wanted my Flatlist to auto-scroll using ref on a particular event.

After some research and because of the great documentation of @gorhom/bottom-sheet. I found out the solution in the troubleshooting section of the docs.

But as a developer, StackOverflow is our first go-to place for every issue. So, I decided to post the answer here.

ANSWER

Due to wrapping the content and handle with TapGestureHandler & PanGestureHandler, any gesture interaction would not function as expected.

To resolve this issue, please use ScrollView & FlatList from react-native-gesture-handler provide instead react-native.

import {
  ScrollView,
  FlatList
} from 'react-native-gesture-handler';

find the original answer here- https://gorhom.github.io/react-native-bottom-sheet/troubleshooting