diff --git a/src/ui/registration/components/handAnimation.tsx b/src/ui/registration/components/handAnimation.tsx index c671b49ae3..6aa251e325 100644 --- a/src/ui/registration/components/handAnimation.tsx +++ b/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