React-native-paper: Menu position wrong when anchored to upper right corner view

[HolySamosa]

Environment

Paper v2.15.2

Description

My project is presently using React Native Navigation and I would like to display a Menu when a button is clicked in the native top navigation bar / app bar. Since the top bar is native, it's button can't serve as an anchor for the Menu, so I planned to instead anchor to an invisible View immediately below the native toolbar button.

Unfortunately, when the Menu renders it does not appear below the anchor view in the top-right corner. I'm assuming that the Menu _should_ display immediately below this anchor, so this would be a bug? Is there a better way to accomplish the effect I am after?

Thanks!

Reproducible Demo

I've created a snack which demonstrates the issue:
https://snack.expo.io/@holysamosa/c16159

Screenshot

Here's an example:
(I've given the anchor view a red background for visibility)

[iyadthayyil]

I don't know why this issue is caused.

As a quick workaround wrap the menu in another view with position styles.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  row: {
    width: '100%',
    backgroundColor: 'green',
  },
  mainMenuAnchor: {
    width: 24,
    height: 5,
    backgroundColor: 'red',
  },
  menuWrapper: {
    alignSelf: 'flex-end',
    margin: 8,
  }
});

<Provider>
        <View style={[styles.container]}>
          <View style={[styles.row]}>
          <View style={styles.menuWrapper}>
            <Menu
              visible={this.state.visible}
              onDismiss={this._closeMenu}
              anchor={
              <View style={[styles.mainMenuAnchor]} />
              }
            >
              <Menu.Item onPress={() => {}} title="Item 1" />
              <Menu.Item onPress={() => {}} title="Item 2" />
            </Menu>
            </View>
          </View>
        </View>
        <Button style={[styles.button]} onPress={this._openMenu}>Show menu</Button>
</Provider>

[HolySamosa]

@iyadthayyil Thanks for the work around!

[ferrannp]

Wdyt @Trancever ?

[HolySamosa]

Also, while the suggested work-around of wrapping the Menu in a positioned view does move the menu to the right edge of the screen, the menu is still appearing a significant distance below the anchor (as also seen in the original image).

Any ideas?

[iyadthayyil]

@HolySamosa can you provide a snack?
It looks fine for me: https://snack.expo.io/@iyadthayyil/menu-position-bug

[HolySamosa]

@iyadthayyil: Looks like it renders correctly in Expo, but the additional vertical spacing appears when using vanilla React Native on iOS (Android is untested).

Here's the rendering of the same come from your snack running under vanilla React Native:

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[Trancever]

@HolySamosa There was some work done with Menu in recent versions of Paper. Can you tell us if this issue still occurs in v3.4.0?

[HolySamosa]

Thanks, @iyadthayyil. The affected project has been on the backburner and I'm presently working to get another app out the door, but I'll test this out in the next couple of weeks and let you know.