How to add side menu icon in wix-react-native-navigation v2?

Question

I am new to react-native. i want to add side menu icon like the following image

in wix-react-native-navigation v1 was fairly simple. We need to just add

{
  tabs:[
    screen: "myscreenName",
    label: "MyLabel",
    icon: require('icon-url')
  ]
}

But in V2 documentation they said if you add to side menu use this but they didn't say about how to add icon.

{
  root: {
    sideMenu: {
      left: {
        component: {
          name: 'sideDrawer'
        }
      },
      center: {
        bottomTabs: {
          .....
        }
      }
    }
  }
}

As a result a side drawer is appear if i dragged from left side but the icon is missing. Any idea ho do i add a icon like this on wix-react-native-navigation v2

Answer 1

You can check this link https://github.com/wix/react-native-navigation/issues/796

The hamburger button is no longer added by default since a lot of users asked to control when it's displayed and when not. In every screen you'd like to have the hamburger button, add it explicitly:

static navigatorButtons = { leftButtons: [ { id: 'sideMenu' } ] };

Answer 2

You can try the below code. This creates a tab based screen. If you want as screen, you can use Navigation.startSingleScreenApp(...)

    Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      sideMenu: {
        id: "sideMenu",
        left: {
          component: {
            id: "Drawer",
            name: "navigation.Drawer"
          }
        },
        center: {
          stack: {
            id: "AppRoot",
            children: [{
              component: {
                id: "App",
                name: "navigation.AppScreen"
              }
            }]
          }
        }
      }
    }
  });
}

Answer 3

You can add this static function with different configs in your screen:

export default class Screen extends Component {

  static get options() {
    return {
      topBar: {
        title: {
          text: 'Screen',
        },
        leftButtons: [
          {
            icon: require('../../../assets/icons/burgerMenu.png'),
            id: 'toggleDrawer',
          },
        ],
      },
    };
  }
}

The complete list of options can be found in the docs in this link: topBar options