Can a FlatList be scrollable within a BottomSheet?

[cymen]

Ask your Question

I wanted something similar to the map view in the examples except with a BottomSheet that only opens at most 1/2 of the screen height. I got this to work just fine however the FlatList within the bottom sheet is not scrollable (although I could get the "pull from top" to refresh action to happen on Android).

I think looked closer at the map example and observed the list is only scrollable when the modal BottomSheet is fully expanded. I updated my usage to be like the map example w/ the modal variant of BottomSheet and I do see that working when the list is fully expanded (I changed mine so a "whole screen" snap point was present).

I thought perhaps this was a simultaneous gestures issue so I tried doing that but it didn't seem to help. I also tried switching to the FlatList from this module and that didn't seem to make a difference either.

I was left wondering if I was "doing it wrong" and that just isn't how it works. If that is the case, that is fine just was confused. I'm tried up to version 3.6.0 (I am on reanimated v2). I'll try 3.6.1 but wanted to ask in case I should change my approach.

[gorhom]

are you using BottomSheetFlatList ?

https://gorhom.github.io/react-native-bottom-sheet/scrollables#bottomsheetflatlist

[mechaadi]

Hey, I am also trying to implement scrollview inside the bottom sheet but for some reasons it's not working as it should because I am not able to scroll, no matter what.

Here's how the page looks like: https://prnt.sc/1103qgs And here's the code of my homepage: https://pastebin.com/CG3QQLSb

Please help me.

[gorhom]

@mechaadi look at the docs https://gorhom.github.io/react-native-bottom-sheet/scrollables/#bottomsheetflatlist

[mechaadi]

Hey, ofcourse I've tried all four scrollables but none of them are working. I am unable to scroll in the drawer with any of the four scrollables given in the docs.

[mechaadi]

Okay so update, I tried using the bottom sheet directly on app.js file and it worked but when I use it on other pages of my app like the home page then it is not scrolling. I am using a stack navigator with a bottom navigation bar, is that something to do with the scroll issues?

I am attaching both app.js file and home.js file. The app.js file contains the navigator and home.js file contains the bottom sheet.

App.js: https://pastebin.com/uyFsBTLA Home.js: https://pastebin.com/vvQwnNbA

[BlameFelix]

@mechaadi it looks like you're trying to import ScrollView from 'react-native'. As stated in the docs you're supposed to use the one from 'react-native-gesture-handler'

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

see this

[mechaadi]

@BlameFelix It worked, thank you so much. I didn't notice, my bad.

Anyways, thanks for this great library, cheers. :)

[cymen]

I've still got some odd behavior but I think the root cause of my problem was missing this step (I'm using @react-navigation/native along with @react-navigation/bottom-tabs):

https://docs.swmansion.com/react-native-gesture-handler/docs/#with-wixreact-native-navigation

The odd thing was it was working for a while without that but I probably upgraded a module or multiple modules and broke it without realizing the cause. I'm going to close this as I think the root cause is clear (mistake on my end).

[jorgegvallejo]

@mechaadi it looks like you're trying to import ScrollView from 'react-native'. As stated in the docs you're supposed to use the one from 'react-native-gesture-handler'

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

see this

This worked. Also, anybody looking to implement a SectionList see how to do it here

[TowhidKashem]

@mechaadi it looks like you're trying to import ScrollView from 'react-native'. As stated in the docs you're supposed to use the one from 'react-native-gesture-handler'

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

see this

This is confushing, so don't use the BottomSheetFlatList component from @gorhom/bottom-sheet and use the FlatList from gesture handler?

Using the one from gesture handler fixed the not being able to scroll issue for me but I thought we should be using all the scrollable components from here:

https://ui.gorhom.dev/components/bottom-sheet/scrollables

hey @gorhom sorry to tag you but could you confirm that the above is the way to go or are we missing something here?

[brianwachira]

@mechaadi it looks like you're trying to import ScrollView from 'react-native'. As stated in the docs you're supposed to use the one from 'react-native-gesture-handler' import { ScrollView, FlatList } from 'react-native-gesture-handler'; see this

This is confushing, so don't use the BottomSheetFlatList component from @gorhom/bottom-sheet and use the FlatList from gesture handler?

Using the one from gesture handler fixed the not being able to scroll issue for me but I thought we should be using all the scrollable components from here:

https://ui.gorhom.dev/components/bottom-sheet/scrollables

hey @gorhom sorry to tag you but could you confirm that the above is the way to go or are we missing something here?

Yes, it is very strange. Importing FlatList from react-native-gesture-handler fixes the issue.