Not able to hide react native splashscreen shown before AWS Authenticator

Question

I'm showing the react native splashscreen and trying to hide it in useEffect, but the useEffect doesn't get called if I'm using AWS Authenticator in App.js. It works fine when I don't use the authenticator.

App.js

import Amplify from 'aws-amplify';
import config from './src/aws-exports';
import { withAuthenticator } from 'aws-amplify-react-native';
import Auth from '@aws-amplify/auth';
import SplashScreen from 'react-native-splash-screen';
import { useEffect } from 'react';

function App (){
  useEffect(() => {
    SplashScreen.hide();
  });

  return ( 
    <View>
    </View>
  );
};
export default withAuthenticator(App); 

It works fine without the Authenticator if I remove the last line.

Answer 1

You need a state change in order to proc the useEffect. And the withAuthenticator takes care of the whole login process. So to include customization i suggest using the Authenticator (Which is the wrapped component in WithAuthenticator) instead. It has onStateChange prop that you can use to detect a change of authority.

Example:

<Authenticator 
   // Fired when Authentication State changes, use it to hide/show stuff
   onStateChange={(authState) => console.log(authState)} 
>
   // Default components can be customized/passed in as child components. 
   // Define them here if you used hideDefault={true}
</Authenticator>

Source: AWS amplify Authenticator