Question 238139 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Navigation takes time to go to Home screen

I am trying to navigate to Home screen of user’s firstname is already present, else stay on this onboarding screen, but issue is even when firstname exists , it takes 1-2 second to navigate to home screen and before that loader does not show up, it shows the main content of onboarding screen for 1-2 secs and then navigates to home screen, how do I stop that from happening?

const userDetails = useSelector(state => state.auth.userDetails);

const [loader, setLoader] = useState(true);
  

  const navigateToHomeIfNeeded = () => {
    if (userDetails?.firstName && userDetails?.firstName.length > 0) {
      navigation.navigate('Home');
      setLoader(false);
      
    } else {
      setLoader(false);
      
    }
  };
  useEffect(() => {
     setLoader(true);
    
    navigateToHomeIfNeeded();
  });


 return (
    <>
      {loader  ? (
        <View
          style={{
            zIndex: 0,
            bottom: 0,
            left: width / 2 - 30,
            right: 0,
            top: 250,
            position: 'absolute',
          }}>
          <Lottie
            style={{
              maxWidth: 60,
              maxHeight: 60,
            }}
            source={require('./assets/loaderlottie.json')}
            autoPlay
            lo
          />
        </View>
      ) : (
//main content
)
}
Tags:

2

Answers


  1. 0

    you should use dependency with useeffect hooks as per react methodology

      useEffect(() => {
     setLoader(true);
    
    navigateToHomeIfNeeded();
  },[navigateToHomeIfNeeded]);

    now if your navigate function will change, useeffect will call and your performance will increase

    Login or Signup to reply.
  2. 0

    Use conditionally defined screens instead, see for Authentication flows details.

    hasFirstName ? (
  <>
    <Stack.Screen name="Home" component={HomeScreen} />
  </>
) : (
  <>
    <Stack.Screen name="Onboarding" component={OnboardingScreen} />
  </>
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search