Cannot get SideMenu to appear or function

[markamccorkle]

Version

Tell us which versions you are using:

• react-native-router-flux v4.3.1
• react-navigation/drawer": "^6.1.4"
• react v17.0.1
• react-native v0.64.2

Expected behaviour

Menu to appear or function
I have migrated an older ReactNative project to the most currently compatible react-native-router-flux and components although I have attempted to get the side-menu to appear using examples I've found in this project but for some reason I cannot get the menu to appear or function. I've tried wrapping my entire Route in a NavigationContainer and anything else I can find so I must be missing something simple here. Can anyone spot the issue? I'd greatly appreciate it!

Actual behaviour

Swipe does no action nor does menu appear

Steps to reproduce

For non-obvious bugs, please fork this component, modify Example project to reproduce your issue and include link here.

1. Upgraded to 4.x and no longer see the menu nor it's function

  render() {
    return (
      <RouterWithRedux
        titleStyle={styles.navTitle}
        navigationBarStyle={styles.navBar}>
        <Stack key="root">
          <Scene key="setup">
            <Scene
              key="welcome"
              component={Welcome}
              title=""
              renderTitle={() => <Logo />}
              style={{ paddingTop: style.headerHeight }}
            />
            <Scene
              key="setupList"
              component={SetupTrailerSelection}
              title="Select Trailer"
              style={{ paddingTop: style.headerHeight }}
            />
            <Scene
              key="setupBumperPull"
              component={SetupBumperPull}
              title="Trailer Dimensions"
              style={{ paddingTop: style.headerHeight }}
            />
            <Scene
              key="setupLargeRV"
              component={SetupLargeRV}
              title="Trailer Dimensions"
              style={{ paddingTop: style.headerHeight }}
            />
          </Scene>
          <NavigationDrawer
            initial
            key="drawer"
            contentComponent={NavigationDrawer}
            open={false}
            hideNavBar>
            <Scene
              key="main"
              style={{ paddingTop: style.headerHeight }}
              type={ActionConst.REPLACE}>
              <Scene
                key="home"
                component={Home}
                title="Home"
                renderTitle={() => <Logo />}
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="showInstructions"
                component={Instructions}
                title="Instructions"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="showFAQ"
                component={FAQ}
                title="FAQs"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="showAboutUs"
                component={AboutUs}
                title="About Us"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="preferences"
                component={Preferences}
                title="Preferences"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="showHelp"
                component={GetHelp}
                title="Get Help"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="trailerList"
                component={TrailerSelection}
                title="Select Trailer"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="bumperPull"
                component={BumperPull}
                title="Trailer Dimensions"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="largeRV"
                component={LargeRV}
                title="Trailer Dimensions"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="setHome"
                component={HomePosition}
                title="Mount Position"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="setOrientation"
                component={LevelOrientation}
                title="Level Orientation"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="confirmation"
                component={Confirmation}
                title="Confirmation"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="startHomeMount"
                component={HomeSetupStart}
                title="Home Setup"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="mountLocation"
                component={MountLocation}
                title="Mount Location"
                renderRightButton={e => <Battery />}
              />
              <Scene
                key="showCalibration"
                component={Calibration}
                title="Factory Calibration"
                renderRightButton={e => <Battery />}
              />
            </Scene>
          </NavigationDrawer>
        </Stack>
      </RouterWithRedux>
    );
  }
}

import React, { Component } from 'react';
import { Actions, DefaultRenderer } from 'react-native-router-flux';
import Sidebar from './components/Sidebar';
import { deviceWidth } from './constants';
import Drawer from 'react-native-drawer';

export default class NavigationDrawer extends Component {
  render() {
    const state = this.props.navigationState;
    const children = state.children;
    // const Drawer = createDrawerNavigator();

    return (
      <Drawer
        ref="navigation"
        open={state.open}
        type="overlay"
        onOpen={() => Actions.refresh({ key: state.key, open: true })}
        onClose={() => Actions.refresh({ key: state.key, open: false })}
        content={<Sidebar />}
        tapToClose={true}
        openDrawerOffset={deviceWidth * 0.25}
        panOpenMask={50}>
        <DefaultRenderer
          navigationState={children[0]}
          onNavigate={this.props.onNavigate}
        />
      </Drawer>
    );
  }
}

Reproducible Demo

Please provide a minimized reproducible demonstration of the problem you're reporting.

Issues that come with minimal repro's are resolved much more quickly than issues where a maintainer has to reproduce themselves.

[MattyK14]

Seeing a similar issue where back buttons are not appearing, however swiping is working as expected. Menu button itself is also appearing and working as expected.

[1mehdifaraji]

I can't open the drawer also it's just doesn't open