react-native-bottom-sheet
react-native-bottom-sheet copied to clipboard
[v4] | [v2] BottomSheetFlatList not rendering items on screen
Bug
<I'm using gorhoms BottomSheetFlatlist inside of my BottomSheetModal, but it seems like its not rendering anything (but works fine when i use a normal FlatList from the 'react-native-gesture-handler'. I installed the lib using: npx expo install react-native-reanimated react-native-gesture-handler and npx expo install @gorhom/bottom-sheet@^4>
Environment info
Library | Version |
---|---|
@gorhom/bottom-sheet | "4" |
react-native | "0.73.2" |
react-native-reanimated | "~3.6.2" |
react-native-gesture-handler | "~2.14.0" |
Steps To Reproduce
`import { View, Text, } from 'react-native'; import {BottomSheetFlatList, BottomSheetModal} from '@gorhom/bottom-sheet' import { forwardRef, useMemo, useRef } from 'react'; import { FlatList } from 'react-native-gesture-handler';
const CustomModal = ()=> {
const snapPoints= useMemo(()=>['90%'], [])
const data= ["one","two","three"]
const ref= useRef(null);
return (
<BottomSheetModal ref={ref} snapPoints={snapPoints} index={0} backgroundStyle={{borderRadius:0, backgroundColor:'white'}}>
<View style={{padding:100}}>
<BottomSheetFlatList
data={data}
renderItem={({ item }) => {
return (<Text style={{fontSize: 20}}>{item}</Text>)
}}
/>
</View>
</BottomSheetModal>
);
};
export default CustomModal;`
1.use a BottomSheetModal 2.use a BottomSheetFlatList inside of it 3. use whatever data you want
Describe what you expected to happen:
1.I expect that i see items provided to the FlatList to be rendered on the screen on both android and Iphone.
Reproducible sample code
<
Bottom Sheet issue snack template https://snack.expo.dev/qmNwoUtzbXf1RzpTLr8QC
I'm also facing the same issue. Any update?
Thanks :)
same issue
Same but its working with regular FlatList
I guess it is a simple fix if you are using a view inside the BottomSheetModal
try adding flex: 1
to it.
Same issue here and @k3sha7's solution worked for me. Thanks mate!
This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.
This issue was closed because it has been stalled for 5 days with no activity.
Same issue here
Same but its working with regular FlatList
I'm facing the same issue, and with the regular FlatList that works.