instea / react-native-popup-menu

Popup menu component for React Native
ISC License
1.48k stars 250 forks source link

Incorrect position when using in FlashList #283

Open tmiyasa opened 11 months ago

tmiyasa commented 11 months ago

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.

AmanSafeer commented 9 months ago

I'm also facing this issue. Menu appears at the bottom of the Flatlist container in my app.

PopBot commented 6 months ago

Same here as of April 2024.

PopBot commented 6 months ago

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

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

muratcanyusufoglu commented 5 months ago

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

muratcanyusufoglu commented 5 months ago

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.

noon-ravi commented 4 months ago

Seems like this library is abandoned. Last change was 2 years ago.

AmanSafeer commented 4 months ago

Did any one find the solution?