react-native-navigation-v2

How I could add an icon to my sideMenu in react-native-navigation v2?


I've read a lot of comments about it, but I didn't resolve my problem. So my navigation code looks like this


    export function pushScreens() {
    Navigation.setRoot({
       root: {
    sideMenu: {
    id: 'sideMenu',
    left: {
    visible: true,
    component: {
      id: 'Drawer',
      name: SIDE_DRAWER,
    },
    },
    center: {
    bottomTabs: {
    children: [{
    stack: {
      children: [{
        component: {
          name: HOME_SCREEN,
          passProps: {
            text: 'Home'
          },
        }
      }],
      options: {
        bottomTab: {
          text: 'Home',
          icon: HomeIcon,
          testID: 'FIRST_TAB_BAR_BUTTON'
        },
      }
    }
    },
    {
    component: {
      name: PROFILE_SCREEN,
      passProps: {
        text: 'Profile'
      },
      options: {
        bottomTab: {
          text: 'Profile',
          icon: HomeIcon,
          testID: 'SECOND_TAB_BAR_BUTTON'
        },
      }
    }
    },
    {
    component: {
      name: POSTS_SCREEN,
      passProps: {
        text: 'Posts'
      },
      options: {
        bottomTab: {
          text: 'Posts',
          icon: HomeIcon,
          testID: 'SECOND_TAB_BAR_BUTTON'
        }
      }
    }
    }]
    }
    }
    }
    }
    });
    }

I can pull the drawer from the left side of the screen by default, but how I could add the icon for that?


Solution

  • On the view that you wish to have the hamburger button, add:

    static get options() {
      topBar: {
        leftButtons: [
          {
            color: colors.white,
            id: TOOLBAR_HUMBERGER_BUTTON_ID,
            icon: require("../resources/hamburger_topBar_button.png")
          }
        ]
      };
    return topBar;
    }
    

    and then handle it like every other button of topBar:

    navigationButtonPressed({ buttonId }) {
      if (buttonId == TOOLBAR_HUMBERGER_BUTTON_ID) {
        Navigation.mergeOptions(SIDEMENU_ID, {
          sideMenu: {
            left: {
              visible: true
            }
          }
        });
      } 
    }