instea
Incorrect position when using in FlashList
When using FlashList, major library for high performance list, and using Menu in reneder() function, the popup displays at incorrect position (display near the first item of the list). https://docs.expo.dev/versions/latest/sdk/flash-list/
It can be reproduced just by replacing FlatList by FlashList in the exmaple. https://github.com/instea/react-native-popup-menu/blob/master/examples/InFlatListExample.js
return (
<MenuProvider style={styles.container}>
<FlashList
data={data}
renderItem={({ item }) => (
<Menu onSelect={(value) => Alert.alert(value)}>
<MenuTrigger text={"Select option " + item.value} />
<MenuOptions>
<MenuOption value="A" text="A" />
<MenuOption value="B" text="B" />
<MenuOption value="C" text="C" />
</MenuOptions>
</Menu>
)}
style={{ height: 200 }}
/>
</MenuProvider>
When clicking item 30, popup appears at the top.
FlashList is one of the major RN library for list, so I'd appreciate if you could handle this.
I'm also facing this issue. Menu appears at the bottom of the Flatlist container in my app.
I am getting better luck when using renderers.Popover:
Ex: import {..., renderers} from 'react-native-popup-menu'. <Menu renderer={renderers.Popover} ...
I found a partial solution to the issue. When MenuProvider is placed outside the FlashList, it tends to cover the entire screen. However, when MenuProvider is used inside the renderItem function, it only covers the size of the respective item. This change resolves the problem for my situation.
