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.
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