fix: start animate when rive onPlay ( ready ) cp-7.60.0

app/__mocks__/rive-react-native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
 import { View, ViewProps } from 'react-native';
 
 export interface RiveRef {
@@ -27,6 +27,7 @@
   alignment?: string;
   autoplay?: boolean;
   stateMachineName?: string;
+  onPlay?: () => void;
 };
 
 const DEFAULT_TEST_ID = 'mock-rive-animation';
@@ -48,12 +49,19 @@
 };
 
 const RiveMock = forwardRef<RiveRef, MockRiveProps>(
-  ({ testID = DEFAULT_TEST_ID, mockedMethods, ...viewProps }, ref) => {
+  ({ testID = DEFAULT_TEST_ID, mockedMethods, onPlay, ...viewProps }, ref) => {
     const methods = createMockedMethods(mockedMethods);
     updateLastMockedMethods(methods);
 
     useImperativeHandle(ref, () => methods, [methods]);
 
+    useEffect(() => {
+      if (onPlay) {
+        onPlay();
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     return <View testID={testID} {...viewProps} />;
   },
 );

app/components/UI/FoxAnimation/FoxAnimation.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { StyleSheet, Platform, View } from 'react-native';
 import Rive, { Alignment, Fit, RiveRef } from 'rive-react-native';
 import { useSafeAreaInsets, EdgeInsets } from 'react-native-safe-area-context';
@@ -77,6 +77,8 @@ const FoxAnimation = ({
   const insets = useSafeAreaInsets();
   const styles = createStyles(hasFooter, insets);
 
+  const [isPlaying, setIsPlaying] = useState(false);
+
   const showFoxAnimation = useCallback(async () => {
     if (foxRef.current && trigger) {
       try {
@@ -88,8 +90,10 @@ const FoxAnimation = ({
   }, [foxRef, trigger]);
 
   useEffect(() => {
-    showFoxAnimation();
-  }, [showFoxAnimation]);
+    if (isPlaying) {
+      showFoxAnimation();
+    }
+  }, [showFoxAnimation, isPlaying]);
 
   return (
     <View style={[styles.foxAnimationWrapper]}>
@@ -99,9 +103,11 @@ const FoxAnimation = ({
         source={FoxAnimationRive}
         fit={Fit.Contain}
         alignment={Alignment.Center}
-        autoplay={false}
         stateMachineName="FoxRaiseUp"
         testID="fox-animation"
+        onPlay={() => {
+          setIsPlaying(true);
+        }}
       />
     </View>
   );

app/components/UI/OnboardingAnimation/OnboardingAnimation.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { View, Animated, Easing, StyleSheet } from 'react-native';
 import Rive, { Fit, Alignment, RiveRef } from 'rive-react-native';
 
@@ -67,6 +73,8 @@ const OnboardingAnimation = ({
   const { themeAppearance } = useAppThemeFromContext();
   const styles = createStyles();
 
+  const [isPlaying, setIsPlaying] = useState(false);
+
   const moveLogoUp = useCallback(() => {
     Animated.parallel([
       Animated.timing(logoPosition, {
@@ -118,10 +126,10 @@ const OnboardingAnimation = ({
   ]);
 
   useEffect(() => {
-    if (startOnboardingAnimation) {
+    if (startOnboardingAnimation && isPlaying) {
       startRiveAnimation();
     }
-  }, [startOnboardingAnimation, startRiveAnimation]);
+  }, [startRiveAnimation, startOnboardingAnimation, isPlaying]);
 
   return (
     <>
@@ -141,9 +149,11 @@ const OnboardingAnimation = ({
             source={MetaMaskWordmarkAnimation}
             fit={Fit.Contain}
             alignment={Alignment.Center}
-            autoplay={false}
             stateMachineName="WordmarkBuildUp"
             testID="metamask-wordmark-animation"
+            onPlay={() => {
+              setIsPlaying(true);
+            }}
           />
         </Animated.View>
       </View>