Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect position when using in FlashList #283

Open
tmiyasa opened this issue Dec 6, 2023 · 7 comments
Open

Incorrect position when using in FlashList #283

tmiyasa opened this issue Dec 6, 2023 · 7 comments

Comments

@tmiyasa
Copy link

tmiyasa commented Dec 6, 2023

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
Copy link

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

@PopBot
Copy link

PopBot commented Apr 8, 2024

Same here as of April 2024.

@PopBot
Copy link

PopBot commented Apr 8, 2024

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

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

@muratcanyusufoglu
Copy link

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

@muratcanyusufoglu
Copy link

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
Copy link

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

@AmanSafeer
Copy link

Did any one find the solution?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants