[iOS] Fix Touchable animation ending in the wrong state (#4099)

## Description

When the layout of the touchable changed during the animation, it
resulted in the end frame of the view being wrong.

This PR updates the button behavior in two ways:
1. Not applying the resting state if none of the resting state props
were changed
2. Saving the in-flight transform during a frame update and restoring it
after

## Test plan

|Before|After|
|-|-|
|<video
src="https://github.com/user-attachments/assets/a631179e-1cef-4689-8d61-5d0a2bf08b65"
/>|<video
src="https://github.com/user-attachments/assets/827574cd-f9eb-4f06-a45f-fd304fe9998c"
/>|

<details>
<summary>Expand</summary>

```jsx
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Touchable } from 'react-native-gesture-handler';

export default function EmptyExample() {
  const [isActive, setIsActive] = useState(false);

  return (
    <View style={styles.container}>
      <Touchable
        style={[styles.button, isActive && styles.buttonActive]}
        onPress={() => console.log('pressed')}
        onPressIn={() => setIsActive(true)}
        onPressOut={() => setIsActive(false)}
        activeScale={1.2}>
        <Text style={styles.label}>{isActive ? 'Highlighted' : 'Press me'}</Text>
      </Touchable>
      <Text style={styles.hint}>
        Press the button, then slowly drag your pointer away from it.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
    gap: 24,
  },
  button: {
    backgroundColor: '#ddd',
    paddingHorizontal: 32,
    paddingVertical: 16,
    borderRadius: 8,
  },
  buttonActive: {
    backgroundColor: '#f97316',
  },
  label: {
    fontSize: 20,
    fontWeight: '600',
  },
  hint: {
    textAlign: 'center',
    opacity: 0.6,
    fontSize: 14,
  },
});

```

</details>

Author: j-piasecki

packages/react-native-gesture-handler/apple/RNGestureHandlerButtonComponentView.mm

@@ -111,7 +111,33 @@ - (void)updateLayoutMetrics:(const facebook::react::LayoutMetrics &)layoutMetric
   const LayoutMetrics buttonMetrics = [self buildButtonMetrics:layoutMetrics];
   const LayoutMetrics oldbuttonMetrics = [self buildButtonMetrics:oldLayoutMetrics];
 
+  // The press-in animation sets a scale transform on `self.layer` (animationTarget
+  // is this wrapper). RN's layout path sets `self.frame = frame`, which is undefined
+  // behavior when the layer's transform is non-identity, so mid-press child re-layouts
+  // get squished against the old bounds before snapping to the new ones. Neutralize
+  // the transform and any in-flight animation around super's frame update, then
+  // restore both atomically within the same transaction.
+  CATransform3D savedTransform = self.layer.transform;
+  CAAnimation *savedTransformAnimation = [[self.layer animationForKey:@"transform"] copy];
+  BOOL hasPendingTransform = !CATransform3DIsIdentity(savedTransform) || savedTransformAnimation != nil;
+
+  if (hasPendingTransform) {
+    [CATransaction begin];
+    [CATransaction setDisableActions:YES];
+    [self.layer removeAnimationForKey:@"transform"];
+    self.layer.transform = CATransform3DIdentity;
+  }
+
   [super updateLayoutMetrics:wrapperMetrics oldLayoutMetrics:oldWrapperMetrics];
+
+  if (hasPendingTransform) {
+    self.layer.transform = savedTransform;
+    if (savedTransformAnimation) {
+      [self.layer addAnimation:savedTransformAnimation forKey:@"transform"];
+    }
+    [CATransaction commit];
+  }
+
   [_buttonView updateLayoutMetrics:buttonMetrics oldLayoutMetrics:oldbuttonMetrics];
 }
 
@@ -134,8 +160,6 @@ - (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask
                                         right:borderMetrics.borderWidths.right
                                        bottom:borderMetrics.borderWidths.bottom
                                          left:borderMetrics.borderWidths.left];
-
-  [_buttonView applyStartAnimationState];
 }
 
 #pragma mark - RCTComponentViewProtocol
@@ -243,6 +267,17 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
 {
   const auto &newProps = *std::static_pointer_cast<const RNGestureHandlerButtonProps>(props);
 
+  // Re-apply the idle visual state only on first mount or when one of the default
+  // values actually changed. Doing it on every commit interrupts in-flight press
+  // animations whenever React re-renders the children mid-press.
+  BOOL shouldApplyStartAnimationState = !oldProps;
+  if (oldProps) {
+    const auto &oldButtonProps = *std::static_pointer_cast<const RNGestureHandlerButtonProps>(oldProps);
+    shouldApplyStartAnimationState = oldButtonProps.defaultOpacity != newProps.defaultOpacity ||
+        oldButtonProps.defaultScale != newProps.defaultScale ||
+        oldButtonProps.defaultUnderlayOpacity != newProps.defaultUnderlayOpacity;
+  }
+
   _buttonView.userEnabled = newProps.enabled;
   _buttonView.pressAndHoldAnimationDuration = newProps.pressAndHoldAnimationDuration;
   _buttonView.tapAnimationDuration = newProps.tapAnimationDuration > 0 ? newProps.tapAnimationDuration : 0;
@@ -279,7 +314,9 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
   }
 
   [super updateProps:props oldProps:oldProps];
-  [_buttonView applyStartAnimationState];
+  if (shouldApplyStartAnimationState) {
+    [_buttonView applyStartAnimationState];
+  }
 }
 
 #if !TARGET_OS_OSX