React Native Navigation Wix V2 Top bar button action

Question

I am using WIX V2 navigation, I want to create a leftButton to toggle the sideMenu and make it visible when pressed, I am implementing my navigation stack as follows:

Navigation.setRoot({
    root: {
        sideMenu: {
            left: {
                component: {
                    name: 'app.Drawer',
                    enabled: false,
                    visible: false,
                },
            },
            center: {
                stack: {
                    children: [{
                        component: {
                            name: 'app.Screen',
                        },
                    }, ],
                },
            },
        },
    },
});

In my screen that has a toggle menu and I've created the options and events as follows:

    import { Navigation } from "react-native-navigation";

    export default class Screen extends Component {
      constructor(props) {
        super(props);
        Navigation.events().bindComponent(this);
      }
      static get options(passProps) {
        return {
          topBar: {
            title: {
              text: 'Screen',
            },
            leftButtons: [
              {
                icon: require('../../../assets/icons/burgerIcon.png'),
                id: 'toggleMenu',
              },
            ],
          },
        };
      }

  navigationButtonPressed({ buttonId }) {
    Navigation.mergeOptions('app.Drawer', {
      sideMenu: {
        left: {
          visible: true, 
        },
      },
    });
  }

I tried to follow the docs here but the event is not being captured by the event listener navigation button pressed event docs

score 0 · Answer 1 · answered Dec 29 '18 at 22:58

Navigation.mergeOptions() should be given the id, not the name

I'm not sure, but I also think that enabled & visible are in the wrong place

Navigation.setRoot({
    root: {
        sideMenu: {
            left: {
                component: {
                    name: 'app.Drawer',
                    id: 'app.Drawer'      // <--- ADD THIS
                },
            },
            center: {
                stack: {
                    children: [{
                        component: {
                            name: 'app.Screen',
                        },
                    }, ],
                },
            },
        },
    },
});

score 0 · Answer 2 · answered Apr 13 '19 at 06:45

You can try the code below. Hope it helps.

Your Home or App screen:

import React, { Component } from 'react'
import { Navigation } from "react-native-navigation";

export default class HomeScreen extends Component {
  static get options() {
    return {
      topBar: {
        title: {
          text: 'Screen',
        },
        // Configure your button style here
        leftButtons: [
          {
            id: "sideMenu",
            icon: require('../../../assets/icons/burgerIcon.png'),
          }
        ]
      }
    };
  }

  constructor(props) {
    super(props);
    Navigation.events().bindComponent(this);
  }

  navigationButtonPressed({ buttonId }) {
    try {
      Navigation.mergeOptions("app.Drawer", {
        sideMenu: {
          left: {
            visible: true,
          },
        },
      });  
    } catch (error) {
      //
    }
  }

  render() {
    return (
      <View >
        <Text>Hello from Home screen.</Text>
      </View>
    )
  }
}

For Navigation:

Navigation.setRoot({
  root: {
    sideMenu: {
      id: "sideMenu",
      left: {
        component: {
          id: "app.Drawer",
          name: "app.Drawer",
        }
      },
      center: {
        stack: {
          id: "App",
          children: [{
            component: {
              id: "app.Screen",
              name: "app.Screen"
             }
          }]
        }
      }
    }
  }   
});

package version: "react-native": "0.59.4", "react-native-navigation": "^2.17.0",

Welcome to Stack Overflow! Please explain the essential parts of your code, without explanation your answer is likely to get deleted. Here you find our guid [How to write a good answer](https://stackoverflow.com/help/how-to-answer). Thanks! — David, Apr 13 '19 at 06:56

Simon Imanigirimpuhwe · Answer 3 · 2022-08-25T17:40:24.913

You can use react-native-navigation-hooks which has useNavigationButtonPress like this:

import { useNavigationButtonPress } from "react-native-navigation-hooks"
import { Navigation } from "react-native-navigation"

export const useMenu = (componentId) => {
     return useNavigationButtonPress((e) => {
          if (e.buttonId === 'sideMenu') {
             Navigation.mergeOptions(e.componentId, {
                 sideMenu: {
                  left: {
                    visible: true,
                  }
             }
          }
    }
}

After, import this useMenu hook to your component and call it with the component Id

N.B: Make sure to install those packages first by doing :

yarn add react-native-navigation-hooks 
yarn add react-native-navigation

or

npm install react-native-navigation-hooks 
npm install react-native-navigation

React Native Navigation Wix V2 Top bar button action

3 Answers3