Fix transform handling

Author: j-piasecki

apps/basic-example/src/ContentsButton.tsx

@@ -22,6 +22,7 @@ export default function ComplexUI() {
             <SpacingTests />
             <VisualEffects />
             <ComplexCombinations />
+            <Transforms />
           </View>
         </ScrollView>
       </SafeAreaView>
@@ -189,6 +190,19 @@ function ComplexCombinations() {
   );
 }
 
+function Transforms() {
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>Transform</Text>
+      <View style={styles.complexGrid}>
+        <MyButton style={styles.transformButton}>
+          <Text style={styles.buttonText}>Transform</Text>
+        </MyButton>
+      </View>
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -484,6 +498,17 @@ const styles = StyleSheet.create({
     marginTop: 10,
   },
 
+  // Transform styles
+  transformButton: {
+    width: '48%',
+    height: 100,
+    backgroundColor: '#38ACDD',
+    borderRadius: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+    transform: [{ translateX: 100 }, { rotate: '15deg' }, { scale: 1.1 }],
+  },
+
   // Text styles
   buttonText: {
     color: 'white',

packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx

@@ -62,6 +62,8 @@ export default function GestureHandlerButton({
     start,
     end,
     overflow,
+    transform,
+    transformOrigin,
     zIndex,
 
     // Visual properties
@@ -123,9 +125,18 @@ export default function GestureHandlerButton({
     [flattenedStyle]
   );
 
+  const wrapperStyle = useMemo(
+    () => ({
+      zIndex,
+      transform,
+      transformOrigin,
+    }),
+    [zIndex, transform, transformOrigin]
+  );
+
   return (
     <RNGestureHandlerButtonWrapperNativeComponent
-      style={[styles.contents, { zIndex }]}>
+      style={[styles.contents, wrapperStyle]}>
       <View
         collapsable={false}
         style={[