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