Force withAuthenticator(App) to wait until loading other App components

Question

I'm a newbie in AWS Amplify, and just couldn't figure out how to make my App class wait for the user to sign in before loading all other navigation components and then make the authentication component disappear as well. I'm exporting my app with the withAuthenticator function. What would be the best way to do this? Tkx!

Tried to find examples of post-login operations, without success.

class App extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
                <Navigator />
        );
    }
}

export default withAuthenticator(App);

Navigation components are loaded over the Sign In screen. The sign in screen does not disappear after the user is signed in, being overlapped by other components.

Answer 1

I think I figured out the best way of doing that is using Authenticator instead of withAuthenticator:

class AppWithAuth extends Component {
    state = {
    authState: ''
 };

render() {
    return (
      <View style = { styles.container }>  
      <Authenticator
         amplifyConfig = {awsconf}
         onStateChange = {authState => this.setState({ authState })}
      >

      {this.state.authState === 'signedIn' && <App />}
     </View>
...
}

class App extends Component {

   render() {
   return (
     <View style = { styles.container }>
      <Navigator />
     </View>
    );
 }
}