fix(registration/handAnimation): stop looping after unmount

Clearing the timeout is not useful, it will have already fired.
The problem is with the recursive callbacks, which must be broken with a
flag

src/ui/registration/components/handAnimation.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import { StyleSheet, View, Animated } from 'react-native'
 import { HandIcon, SplashIcon } from 'src/resources/index'
 
@@ -21,6 +21,7 @@ export const usePulseForBoth = () => {
   // We need two changing values to use for the opacity,
   const handPV = useRef(new Animated.Value(0)).current
   const splashPV = useRef(new Animated.Value(0)).current
+  const [isPulsing, setIsPulsing] = useState(true)
 
   // here we define how these values change
   // in parallel, they change in sync
@@ -36,14 +37,17 @@ export const usePulseForBoth = () => {
       Animated.sequence(
         [1, 1, 1, 0, 0, 1, 1].map(n => Animated.timing(handPV, { toValue: n })),
       ),
+    ]).start(() => {
       // this must have itself as a callback to loop
-    ]).start(pulse)
+      // but only do that if we are stillPulsing
+      isPulsing && pulse()
+    })
 
   // this is react hook magic, whatever functional component this is called in
   // will start the loop and clean up when it's lifetime is over
   useEffect(() => {
-    const timeout = setTimeout(pulse, 0)
-    return () => clearTimeout(timeout)
+    pulse()
+    return () => setIsPulsing(false)
   })
 
   // return your shiny new looping animated values