Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot get SideMenu to appear or function #3792

Open
markamccorkle opened this issue Sep 3, 2021 · 2 comments
Open

Cannot get SideMenu to appear or function #3792

markamccorkle opened this issue Sep 3, 2021 · 2 comments

Comments

@markamccorkle
Copy link

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants