Amplify-js: Amplify withAuthenticator React Native createSwitchNavigator Auth.signout() does not return to Sign In page

[hszeto]

packages:

    "aws-amplify": "^1.1.6",
    "aws-amplify-react-native": "^2.0.6",
    "expo": "^30.0.1",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
    "react-navigation": "^2.16.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",

My project was created by expo init partyTime with default tab navigators.

withAuthenticator works. However, Auth.signout doesn't go back to sign in page.

I've tried suggestions in here https://github.com/aws-amplify/amplify-js/issues/1529 , but without success.

There is no this.props.onStateChange in the MainScreen component.

How do I pass onStateChange from App.js export default withAuthenticator(App); through <AppNavigators /> and into the Main component?

[hszeto]

I figured it out. In App.js, add screenProps to AppNavigator component:

<AppNavigator screenProps={{...this.props}} />

screenProps will be passed to the Tab Navigator in the app.

Add a logout button somewhere in the app. On press:

Auth.signOut()
      .then(() => {
         this.props.screenProps.onStateChange('signedOut', null);
      })
      .catch(err => console.log(err));

[kirkryan]

You @hszeto are a legend. Thank you, this has been bugging me for months!

[Jobel91]

Thanks, exactly what I was looking for !

[anirudh-goyal]

Does anyone know how to do this now when we must use an AppContainer like

App = createAppContainer(TabNavigator);
export default withAuthenticator(App);

So we can't use the AppNavigator inside a render function like this

[QuantJames]

Does anyone know how to do this now when we must use an AppContainer like

App = createAppContainer(TabNavigator);
export default withAuthenticator(App);

So we can't use the AppNavigator inside a render function like this

You need to define a custom navigator which imports the built-in navigator, then you can render it normally and add the props needed to set auth state from a child component. Something like:

import React from 'react'
import { MainTabNavigator } from './TabNavigatorSetup'

class BespokeReactNavigationNavigator extends React.Component {
  static router = MainTabNavigator.router

  render() {
    return (
      <MainTabNavigator screenProps={{...this.props}} navigation={this.props.navigation} />
    )
  }
}

export default BespokeReactNavigationNavigator

See also: https://medium.com/@benfox_63249/share-state-between-screens-with-custom-navigators-in-react-navigation-62a34e3c7f97