CODEWITHSUNDEEP
react-nativereact-navigation
UpsetPopcorn
UpsetPopcorn

Reputation: 97

undefined is not an object (evaluating 'component.router.getStateForAction')

I'm seeing the following error when I load my react native app on my simulators. It appears to be related to my usage of react-navigation. But in googling the error, I'm unable to find what I'm missing.

error

It is calling out the "wrappedComponent" in this code snippet.

function WithAuth(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        ready: false,
        session: null,
      };

      this.handleOnSignIn = this.handleOnSignIn.bind(this);
      this.handleOnSignUp = this.handleOnSignUp.bind(this);
      this.handleOnSignOut = this.handleOnSignOut.bind(this);
    }

    async componentDidMount() {
      await LocalStorage.init();
      let session;
      try {
        session = await Auth.currentSession();
      } catch (err) {
        console.log(err);
        session = null;
      }
      this.setState({
        session,
        ready: true,
      });
    }

    handleOnSignIn(session) {
      this.setState({ session });
    }

    handleOnSignUp() { }

    handleOnSignOut() {
      Auth.signOut();
      this.setState({ session: null });
    }

    render() {
      const { ready, session } = this.state;
      console.log('Rendering HOC', ready, !!session);
      const {
        onSignIn,
        onSignUp,
        doSignOut,
        ...otherProps
      } = this.props;

      return (
        ready && (
          <WrappedComponent
            session={session}
            onSignIn={onSignIn || this.handleOnSignIn}
            onSignUp={onSignUp || this.handleOnSignUp}
            doSignOut={doSignOut || this.handleOnSignOut}
            auth={Auth}
            {...otherProps}
          />
        )
      );
    }
  }
}

export default WithAuth;

which is utilizing the following app.js code: 

Amplify.configure(awsmobile);

const App = createDrawerNavigator({
  FirstScreen: {
    screen: props => <First rootNavigator={props.navigation} screenProps={{ ...props.screenProps }} />,
    navigationOptions: {
      drawerLabel: ' ',
    },
  },
}, { initialRouteName: 'FirstScreen' });


const AppContainer = createAppContainer(props => <App screenProps={{ ...props }} />);

export default WithAuth(AppContainer);

(the export is what calls the WithAuth.)

This some of this code was pulled from an app using react-navigation 2.0 and I've updated to 3.0 and am thinking I'm missing something that is now required, however, I can't find it.

Any help is appreciated!

Upvotes: 4

Views: 6217

Answers (2)

Julian K
Julian K

Reputation: 2001

createAppContainer needs to directly wrap the navigator component. Updating your code, it looks like this:

Amplify.configure(awsmobile);

const App = createDrawerNavigator({
  FirstScreen: {
    screen: props => <First rootNavigator={props.navigation} screenProps={{ ...props.screenProps }} />,
    navigationOptions: {
      drawerLabel: ' ',
    },
  },
}, { initialRouteName: 'FirstScreen' });


const AppContainer = createAppContainer(App);

export default WithAuth(AppContainer);

Upvotes: 3

Aadil Mehraj
Aadil Mehraj

Reputation: 2614

Set AppContainer as your root component, like this:

const AppContainer = createAppContainer(props => WithAuth(_ => <App screenProps={{ ...props }} />));

export default AppContainer;

Upvotes: 0

Related Questions