Skip the entering transition on the first render of ButtonSolid (#…

…374) ## Short description This PR adds a skip of the `entering` transition on the first render of `ButtonSolid` ## List of changes proposed in this pull request - Restore previous code to avoid `entering` transition ### Preview The `entering` transition in the first render we'd like to remove (play at **0.25/0.5×**) https://github.com/user-attachments/assets/b394559b-555e-455c-a4ca-37f7495bac2f ## How to test Go to the **Buttons** page in the example app and check if there's any difference between `main` and this branch
pagopa · Dec 20, 2024 · a2b813e · a2b813e
1 parent 783f4b9
commit a2b813e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps, useCallback } from "react";
+import React, { ComponentProps, useCallback, useEffect, useRef } from "react";
 import {
   GestureResponderEvent,
   Pressable,
@@ -186,6 +186,17 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
       [isExperimental]
     );
 
+    /* Prevent the component from triggering the `isEntering' transition
+       on the on the first render. Solution from this discussion:
+       https://github.com/software-mansion/react-native-reanimated/discussions/2513
+    */
+    const isMounted = useRef(false);
+
+    useEffect(() => {
+      // eslint-disable-next-line functional/immutable-data
+      isMounted.current = true;
+    }, []);
+
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => {
       // Link color states to the pressed states
@@ -255,7 +266,9 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
           {loading && (
             <Animated.View
               style={buttonStyles.buttonInner}
-              entering={enterTransitionInnerContentSmall}
+              entering={
+                isMounted.current ? enterTransitionInnerContentSmall : undefined
+              }
               exiting={exitTransitionInnerContent}
             >
               <LoadingSpinner color={foregroundColor} />
@@ -271,7 +284,9 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
                    reverse flex property to invert the position */
                 iconPosition === "end" && { flexDirection: "row-reverse" }
               ]}
-              entering={enterTransitionInnerContent}
+              entering={
+                isMounted.current ? enterTransitionInnerContent : undefined
+              }
             >
               {icon && (
                 <Icon

diff --git a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
@@ -300,7 +300,6 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
     }
   >
     <View
-      entering={[Function]}
       style={
         [
           {
@@ -1038,7 +1037,6 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
     }
   >
     <View
-      entering={[Function]}
       style={
         [
           {
-Original file line number
+Diff line change
@@ Expand Up @@
         }
       >
         <View
-          entering={[Function]}
           style={
             [
               {
@@ Expand Down Expand Up @@
         }
       >
         <View
-          entering={[Function]}
           style={
             [
               {
@@ Expand Down @@