instea/react-native-popup-menu

Incorrect position when using in FlashList

tmiyasa opened this issue · 7 comments

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.
image

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.

Same here as of April 2024.

I am getting better luck when using renderers.Popover:
image

Ex: import {..., renderers} from 'react-native-popup-menu'. <Menu renderer={renderers.Popover} ...

I'm also have same issue. Is there any solution for this?

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.