2

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.

Lineu Pastorelli
  • 502
  • 1
  • 8
  • 20
Peaked
  • 118
  • 14
  • Any errors? How did you make sure? You did not provide a dependency for `useEffect` is that on purpose? The rest looks reasonable. – F. Müller Oct 05 '21 at 21:20
  • I am experiencing the same problem now, Splash Screen not hiding with withAuthenticator – Tony Nov 23 '21 at 18:53

1 Answers1

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

MrCeRaYA
  • 581
  • 4
  • 6