Treating DrawerNavigation like any other route results in error

[rrrodzilla]

The comments in the DrawerNavigation example say to treat it like any other route. My setup uses StackNavigation to move between my walkthrough, login and sign up screens. After login or signup, I should be able to call something like the following:

this.props.navigator.replace(Router.getRoute('drawerNav'));

where drawerNav is a route pointing to a page which is using the example DrawerNavigation code. The intention being that I don't want the DrawerNav experience until someone has signed in. However when I do that I receive an error saying:

Route definition must either be a function that returns a ReactElement, or an object with a render function.

Clearly the example DrawerNavigation code has a render function. Any ideas what might be happening?

[JulianKingman]

What does your Router definition look like?

[rizwanellahi]

@rrrodzilla : I am facing same issue

[rizwanellahi]

@rrrodzilla : Did you fixed this issue ? I am stuck badly

[JulianKingman]

Post code?

[rizwanellahi]

import React, {Component} from "react"; import { View, Text, StyleSheet, } from "react-native"; import { createRouter, NavigationProvider, StackNavigation } from "@expo/ex-navigation";

import HomePage from "./Home"; import AboutPage from "./About";

const Router = createRouter(() => ({ home: () => HomePage, about: () => AboutPage, }));

class App extends Component { render() { return ( <NavigationProvider router={Router}> <StackNavigation initialRoute={Router.getRoute('home')} /> </NavigationProvider> ) } } export default App;

[JulianKingman]

Where's the drawer component?

[rizwanellahi]

import React, {Component} from "react";
import {
 View,
 Text,
 StyleSheet,
} from "react-native";
import {
 createRouter,
 NavigationProvider,
 StackNavigation
} from "@expo/ex-navigation";

import HomePage from "./Home";
import AboutPage from "./About";

const Router = createRouter(() => ({
 home: () => HomePage,
 about: () => AboutPage,
}));

class App extends Component {
 render() {
  return (
   
   
   
  )
 }
}
export default App;

[JulianKingman]

Is Homepage, the drawer, if so, can you show the code for that? If not, can you show where it is? I don't see it.

[Rakonda]

If you wrote your imported classes like this class HomePage extends React.Component, class AboutPage extends React.Component then try to change them to export default class HomePage extends React.Component, export default class AboutPage extends React.Component.

I faced the same issue today but it works after i added export default to the imported classes.