react-native-bottom-sheet icon indicating copy to clipboard operation
react-native-bottom-sheet copied to clipboard

[v4] | [v2] BottomSheetFlatList not rendering items on screen

Open fofa-rgb opened this issue 11 months ago • 6 comments

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

fofa-rgb avatar Feb 29 '24 21:02 fofa-rgb

I'm also facing the same issue. Any update?

Thanks :)

Abhishek2250 avatar Mar 01 '24 15:03 Abhishek2250

same issue

ZakirBangash avatar Mar 11 '24 09:03 ZakirBangash

Same but its working with regular FlatList

keshavvgts avatar Mar 15 '24 05:03 keshavvgts

I guess it is a simple fix if you are using a view inside the BottomSheetModal try adding flex: 1 to it.

k3sha7 avatar Mar 27 '24 04:03 k3sha7

Same issue here and @k3sha7's solution worked for me. Thanks mate!

esorinas avatar Apr 06 '24 09:04 esorinas

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.

github-actions[bot] avatar May 06 '24 09:05 github-actions[bot]

This issue was closed because it has been stalled for 5 days with no activity.

github-actions[bot] avatar May 12 '24 09:05 github-actions[bot]

Same issue here

dgreasi avatar Jun 26 '24 09:06 dgreasi

Same but its working with regular FlatList

I'm facing the same issue, and with the regular FlatList that works.

winterdouglas avatar Sep 30 '24 08:09 winterdouglas