The menu si rendered offscreen when clicked from the left button of the navigation bar

Question

Is there a way to have the menu render left-to-right instead of right-to-left? When clicked from the right button of the navigation bar, it's ok; instead from the left button, it's rendered off screen.

Can you post any code example to demonstrate your problem? – madox2 May 07 '17 at 14:47 — madox2, May 07 '17 at 14:47
@madox2 yes, here you are: https://pastebin.com/xvwK7V0B – Antonio Gallo May 08 '17 at 15:20 — Antonio Gallo, May 08 '17 at 15:20
which navigation do you use? react-navigation? – sodik May 08 '17 at 20:50 — sodik, May 08 '17 at 20:50
@sodik yes reactnavigation.org – Antonio Gallo May 09 '17 at 22:24 — Antonio Gallo, May 09 '17 at 22:24

madox2 · Answer 1 · 2017-05-11T09:11:45.637

Here is a short example how to use popup menu with react-navigation. The menu is rendered in both headerRight and headerLeft placeholders. It is displayed correctly on both sides:

import React from 'react';
import { AppRegistry, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Menu, {
  MenuContext,
  MenuOptions,
  MenuOption,
  MenuTrigger
} from 'react-native-popup-menu';

const NavigatorMenu = ({ navigation }) => (
  <Menu>
    <MenuTrigger text='...' />
    <MenuOptions>
      <MenuOption
        onSelect={() => navigation.navigate('Page2')}
        text='Navigate Page 2'
      />
      <MenuOption
        onSelect={() => navigation.navigate('Page3')}
        text='Navigate Page 3'
      />
    </MenuOptions>
  </Menu>
);

class Home extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'Home',
    headerRight: <NavigatorMenu navigation={navigation} />,
    headerLeft: <NavigatorMenu navigation={navigation} />,
  });
  render() {
    return <Text>Home Page</Text>;
  }
}

const Page2 = () => <Text>2nd Page</Text>;
const Page3 = () => <Text>3rd Page</Text>;

const TopStackNavigator = StackNavigator({
  Home: { screen: Home },
  Page2: { screen: Page2 },
  Page3: { screen: Page3 },
});

const App = () => (
  <MenuContext>
    <TopStackNavigator />
  </MenuContext>
);

AppRegistry.registerComponent('examples', () => App);

It was tested on android with:

react-native: 0.37.0
react-native-popup-menu: 0.7.3
react-navigation: 1.0.0-beta

thanks for your effort, i will try to see if there is any difference between my code but i don't use that kind of header because for that page it does not have one, since its a tab :) its just a "fake header", just a normal view with 3 buttons. I will let you know. Thank you so much meanwhile :) — Antonio Gallo, May 11 '17 at 09:58
@AntonioGallo you could provide some minimal runnalbe code so that I could reproduce it. Anyway, feel free to open new question or update this one. — madox2, May 11 '17 at 10:01
i confirm it does not work with react native 0.44.0 when on the left side its offscreen; right side its ok; also MenuContext need flex:1 to work otherwise it screw up. I will try again creating a new project from scratch without navigator and just adding popup menu. "react": "16.0.0-alpha.6", "react-native": "^0.44.0", "react-native-menu": "^0.20.2", "react-navigation": "^1.0.0-beta.9" — Antonio Gallo, May 11 '17 at 11:08
i think i found the problem in mixing 2 different menu library while testing :) i better remove node_modules and try again — Antonio Gallo, May 11 '17 at 11:14

score 0 · Answer 2 · edited May 11 '17 at 11:20

0

Solved. During testing i was mixing react-native-menu and react-native-popup-menu. I had both installed. And Webstorm pulled me in imports for both libraries mixing them up.

edited May 11 '17 at 11:20

madox2

49,493
17
99
99

answered May 11 '17 at 11:18

Antonio Gallo

178
2
8

So is it finally working with `react-native-popup-menu`? – madox2 May 11 '17 at 11:21
@madox2 yes! :) – Antonio Gallo May 11 '17 at 15:34

The menu si rendered offscreen when clicked from the left button of the navigation bar

2 Answers2