React-native-router-flux: undefined is not an object (evaluating 'route.routeName')

Created on 19 Dec 2017 · 5Comments · Source: aksonov/react-native-router-flux

Version

Tell us which versions you are using:

react-native-router-flux v4.0.0-beta.24 (v3 is not supported)
react-native v0.51.0

get this error when using Drawer in my app.js

undefined is not an object (evaluating 'route.routeName') !!?

capture

My App.js is simple and it is a fresh react native installation only with router flux, and error happens when i use contentComponent in Drawer

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View} from 'react-native';
import {Router , Scene }  from 'react-native-router-flux';
import Home from './src/components/Home';
import About from './src/components/About';
import SideMenu from './src/components/SideMenu';
import splashScreen from './src/components/splashScreen';

export default class App extends Component {
  render() {
    return (
      <Router>
          <scene hideNavBar>
              <Scene key="root">
                    <Scene key="drawer" drawer contentComponent={SideMenu}>
                      <Scene key="Home" component={Home} title="HomePage" initial/>
                      <Scene key="About" component={About} title="Second Page"/>
                    </Scene>
              </Scene>
          </scene>
      </Router>
    );
  }
}

it made me crazy !! any one has facing this issue !!?

Source

Shariaty

Most helpful comment

try this drawer component
hideNavBar
key='drawer'
contentComponent={DrawerContent}
drawerWidth={250}
drawerOpenRoute = 'DrawerOpen' //maybe these 3 are missing so the problem
drawerCloseRoute = 'DrawerClose'
drawerToggleRoute = 'DrawerToggle'>

vibhavagarwal5 on 28 Dec 2017

❤1 🎉1 👍1

All 5 comments

You've got a typo in your code (you wrote scene with a lowercase S at a point.

Still, it's a duplicate of #2718 and it looks like the error is from react-navigation.

Blapi on 19 Dec 2017

I have the same issue with this code:-
react-native-router-flux: 4.0.0-beta.22
react-native: 0.49.3

<Router
    backAndroidHandler={() => Actions.pop()}
    sceneStyle={styles.sceneStyle}
  >
    <Scene key="root">
      <Scene
        key="scene1"
        component={Scene1}
        title="Scene 1"
        navigationBarStyle={styles.navigationBarStyle}
        navBarButtonColor={styles.navBarButtonColor}
        titleStyle={styles.titleStyle}
        initial
      />
      <Drawer
        hideNavBar
        key="dashboard"
        drawerImage={Images.menuIcon}
        contentComponent={Navigation}
        drawerWidth={styles.drawerWidth}
      >
        <Scene
          key="dashboard"
          component={Dashboard}
          title={strings.dashboard}
          navigationBarStyle={styles.navigationBarStyle}
          navBarButtonColor={styles.navBarButtonColor}
          titleStyle={styles.titleStyle}
          renderRightButton={renderNotificationButton}
        />
      </Drawer>
    </Scene>
  </Router>