I fetch the token on app start and if auth is not available I start the animation and at end of the animation I navigate the user to login. But if auth is present the animation should not run and the user should navigate inside the app instead of loginscreen. But what I can see here is that the callback of withTiming is getting triggered on render of the component(Due to this the user is always navigated to the login screen.) instead of getting ideally triggered only if startAnimation get invoked and further animation end.
const startApp = async () => { try { await fetchAuth(); if (isJwtTokenPresent.current) { navigate("insideApp") else { //since user is logged in this function do not get invoked >. here startAnimation(); } catch (e) { console.log("failed"); financierFailed(); } };
const startAnimation = () => { setTimeout(() => { xOffset.value = 50; kredOffset.value = -350; scaleOffSet.value = 13 / 10; }, 250); };
const animatedProps = useAnimatedStyle(() => { return { transform: [ { translateX: withTiming(xOffset.value, configTranslate), }, { scale: withTiming(scaleOffSet.value, configScale, (finished) => { //this is getting triggered even though start animation haven't been invoked if (finished) { runOnJS(goToLogin)(null); } }), }, ], }; });
const goToLogin=()=>{ navigate("loginPage"); }
//UI COMPONENT return( AnimatedX style={[{}, animatedProps]} /> )
A hack I've put is that I added an additional check above the callback function, that even though the callback gets triggered if the token is not present(user is not logged-in) then and only then trigger the go to login method.
But, this check fails if the internet is not active and to handle that I need to put in more addition checks.
if (finished) { if(tokenIsNotPresent){ runOnJS(goToLogin)(null); } }
This is a horrible workaround. I want the callback to get ideally triggered only and only if the startAnimation function is invoked and the animation end.
Asked
Active
Viewed 148 times
0

Adarsh Jaiswal
- 39
- 7