CODEWITHSUNDEEP
react-nativereact-native-navigationreact-native-popup-menu
ugendrang
ugendrang

Reputation: 281

Context popup menu in wix/react-native-navigation navbar

Is it possible to set three dot context menu using "react-native-popup-menu" in "react-native-navigation" navbar? or do we have any other approach to set three dot context menu in both IOS and Android with "react-native-navigation" navbar?

Upvotes: 5

Views: 3731

Answers (3)

Karl Mösenbacher
Karl Mösenbacher

Reputation: 1

I actually made my own context menu with this library: https://github.com/react-native-community/react-native-modal

So basically it is a modal with its background completely transparent. The content of the modal is rendered just below the "three dot context menu" - button. By using their onBackdropPress function, you can dismiss the context menu if the user press outside the menu.

Upvotes: 0

konse
konse

Reputation: 1075

I've been wondering about this as well, and found a solution: Generally, all the Menu parts have to be inside of the Menu tag, so the MenuTrigger as well. You can style the MenuTrigger but I didn't get it into the top bar with that.

Good news: It's even easier than that, simply place the whole Menu into your navigationOptions like this:

static navigationOptions = ({navigation}) => ({
  title: 'Uploaded Videos',
  drawerLockMode: 'locked-closed',
  headerRight: 
    <Menu renderer={SlideInMenu} style={{ zIndex: 10 }}>
      <MenuTrigger text="open menu"/>
      <MenuOptions style={{ flex: 1 }}>
        <Text>Menu</Text>
        <MenuOption onSelect={() => { console.log("clicked") text="Click me" />
      </MenuOptions>
    </Menu>

Caveat: navigationOptions are static, so in your menu you can't use functions of the component. But there are ways around that, see for one example this issue at react-native-navigation. Generally, you should probably use redux for that.

Hopefully this still helps you!

Upvotes: 0

guy.gc
guy.gc

Reputation: 3501

You can control the priority and positioning of each button (On Android) using the showAsAction property. See the docs for more details.

In short, the following snippet will add two buttons to the menu and one outside:

static navigatorButtons = {
  rightButtons: [
    {
      id: 'btn1',
      title: 'Menu button 1'
      showAsAction: 'never'
    },
    {
      id: 'btn2',
      title: 'Menu button 2'
      showAsAction: 'never'
    },
    {
      id: 'btn3',
      title: 'Regular Button'
      icon: require('./img/button.jpeg'),
      showAsAction: 'always'
    }
  ]
);

This isn't available on iOS since on iOS an action sheet is usually used instead of a menu.

Upvotes: 3

Related Questions