cancel animations on timeout

app/components/admin/homeComponents/analytics/analyticsToggle.js

@@ -3,6 +3,7 @@ import Animated, {
   useSharedValue,
   useAnimatedStyle,
   withTiming,
+  cancelAnimation,
 } from 'react-native-reanimated';
 import { useEffect } from 'react';
 import { COLORS } from '../../../../constants/theme';
@@ -33,6 +34,7 @@ export default function AnalyticsToggle({ denomination, onToggle }) {
         duration: 200,
       },
     );
+    return () => cancelAnimation(slideX);
   }, [isFiat]);
 
   const thumbStyle = useAnimatedStyle(() => ({

app/components/admin/homeComponents/analytics/balancePieChart.js

@@ -6,6 +6,7 @@ import Animated, {
   useAnimatedProps,
   withTiming,
   Easing,
+  cancelAnimation,
 } from 'react-native-reanimated';
 import { COLORS, SIZES } from '../../../../constants';
 import { useGlobalContextProvider } from '../../../../../context-store/context';
@@ -67,7 +68,10 @@ export default function BalancePieChart({ isBalanceHidden }) {
         easing: Easing.out(Easing.cubic),
       });
     }, delay);
-    return () => clearTimeout(timer);
+    return () => {
+      clearTimeout(timer);
+      cancelAnimation(animatedPct);
+    };
   }, [btcPct]);
 
   const animatedProps = useAnimatedProps(() => ({

app/components/admin/homeComponents/homeLightning/halfModalSendOptions.js

@@ -33,6 +33,7 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
+  cancelAnimation,
 } from 'react-native-reanimated';
 import {
   useProcessedContacts,
@@ -224,6 +225,9 @@ export default function HalfModalSendOptions({
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
+      cancelAnimation(contentOpacity);
+      cancelAnimation(contentTranslateX);
+      cancelAnimation(inputModeProgress);
     };
   }, []);
 

app/components/admin/homeComponents/pools/circularProgress.js

@@ -11,6 +11,7 @@ import Animated, {
   useAnimatedProps,
   withTiming,
   Easing,
+  cancelAnimation,
 } from 'react-native-reanimated';
 import ThemeIcon from '../../../../functions/CustomElements/themeIcon';
 
@@ -71,8 +72,9 @@ export default function CircularProgress({
   const trackColor = useAltBackground ? backgroundColor : backgroundOffset;
 
   useEffect(() => {
+    let timer;
     if (useFillAnimation) {
-      setTimeout(
+      timer = setTimeout(
         () => {
           animatedPercentage.value = withTiming(percentage, {
             duration: 600,
@@ -85,6 +87,10 @@ export default function CircularProgress({
     } else {
       animatedPercentage.value = percentage;
     }
+    return () => {
+      clearTimeout(timer);
+      cancelAnimation(animatedPercentage);
+    };
   }, [percentage]);
 
   const animatedProps = useAnimatedProps(() => {

app/functions/CustomElements/halfModal.js

@@ -50,6 +50,7 @@ import Animated, {
   useAnimatedStyle,
   withTiming,
   withSpring,
+  cancelAnimation,
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
@@ -217,6 +218,8 @@ export default function CustomHalfModal(props) {
         clearTimeout(closeTimerRef.current);
         closeTimerRef.current = null;
       }
+      cancelAnimation(translateY);
+      cancelAnimation(animatedHeight);
     };
   }, [shouldDismissKeyboardOnMount, slideIn]);
 

app/hooks/useHalfModalStepTransition.js

@@ -3,6 +3,7 @@ import {
   useSharedValue,
   useAnimatedStyle,
   withTiming,
+  cancelAnimation,
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 
@@ -47,6 +48,13 @@ export default function useHalfModalStepTransition(page, order) {
     );
   }, [page]);
 
+  useEffect(() => {
+    return () => {
+      cancelAnimation(opacity);
+      cancelAnimation(translateX);
+    };
+  }, []);
+
   const pageAnimatedStyle = useAnimatedStyle(() => ({
     opacity: opacity.value,
     transform: [{ translateX: translateX.value }],

app/screens/inAccount/receiveBtcPage.js

@@ -30,6 +30,7 @@ import Animated, {
   useSharedValue,
   withTiming,
   useAnimatedStyle,
+  cancelAnimation,
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import CustomSettingsTopBar from '../../functions/CustomElements/settingsTopBar';
@@ -427,6 +428,10 @@ function BtcUsdToggle({ endReceiveType, onToggle, theme, darkModeType }) {
     );
   }, [endReceiveType, pillWidth]);
 
+  useEffect(() => {
+    return () => cancelAnimation(thumbX);
+  }, []);
+
   const thumbAnimStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: thumbX.value }],
   }));
@@ -670,6 +675,13 @@ function QrCode({ addressState, qrContainerSize, qrInnerSize, isUsingLnurl }) {
     addressState.errorMessageText,
   ]);
 
+  useEffect(() => {
+    return () => {
+      cancelAnimation(qrOpacity);
+      cancelAnimation(loadingOpacity);
+    };
+  }, []);
+
   const handleFadeOutComplete = newAddress => {
     if (newAddress) {
       previousAddress.current = newAddress;