0

I have a react native app with two screens (actually too many): ScreenA and ScreenB. In ScreenA, I am doing some API calls and in ScreenB, I have some animation. I am using stack navigator to visit ScreenB from ScreenA. In ScreenB, I have some animation in my useEffect() hook and also from gestures. When I move away from ScreenB to ScreenA and then back to ScreenB, the state of the screen is not changed. It remains the same. I want the entire animation to reset, the useEffect() to be called again, but only for ScreenB. I want all my other mounted screens to be mounted, to avoid calling APIs and displaying data again but ScreenB to reset to its initial state if I move away from it. How can I achieve this in most efficient way possible? Thanks

yoyostar
  • 1
  • 1
  • Could you please provide your code? The useEffect is especially important. What is inside its dependency array? – David Scholz Feb 20 '22 at 20:17
  • I have loads of shared values and dependent values from reanimated in my useEffect(), these values are changed in the start, and animate for some time, or are changed with gestures such as scroll and tap. – yoyostar Feb 21 '22 at 15:23

1 Answers1

0

You could use useIsFocused in a useEffect and reset the animation with something like

const isFocused = useIsFocused();
useEffect(()=>{
  if(isFocused){
    // start your animations
  }
  else{
    // stop your animations
  }
},[isFocused])
PhantomSpooks
  • 2,877
  • 2
  • 8
  • 13
  • Thanks for your comment. How can I reset everything to its original state without explicitly changing the value of each variable? – yoyostar Feb 21 '22 at 15:22
  • You could call `cancelAnimation` in the else block, and start the animations in the if. I don't know if thats what you are looking for – PhantomSpooks Feb 21 '22 at 22:41