Implement styleTransition

apps/common-app/src/examples/LayoutAnimations/BasicStyleTransition.tsx

@@ -0,0 +1,113 @@
+import Animated, { LinearStyleTransition } from 'react-native-reanimated';
+import { Button, StyleSheet, View } from 'react-native';
+import React from 'react';
+import { SelectorRow } from '../commonComponents/RowButtonSelector';
+
+export default function BasicLayoutAnimation() {
+  const [currentStyleIdx, setCurrentStyleIdx] = React.useState(0);
+  const [useLayout, setUseLayout] = React.useState(true);
+
+  const viewStyles = [
+    styles.googleColors,
+    styles.rainDrop,
+    styles.leaf,
+    styles.squareFrame,
+    styles.arcFrame,
+  ];
+
+  function incrementStyle() {
+    let newStyleIdx = currentStyleIdx + 1;
+    if (newStyleIdx >= viewStyles.length) {
+      newStyleIdx = 0;
+    }
+    setCurrentStyleIdx(newStyleIdx);
+  }
+
+  const transitionProp = useLayout
+    ? { layout: LinearStyleTransition.duration(1000) }
+    : { styleTransition: LinearStyleTransition.duration(1000) };
+
+  return (
+    <View style={styles.container}>
+      <SelectorRow
+        firstButtonLabel="Layout Transition"
+        secondButtonLabel=" Style Transition"
+        selectedFirstButton={useLayout}
+        setSelectedFirstButton={setUseLayout}
+      />
+
+      <Button onPress={incrementStyle} title="Update" />
+      <Animated.View
+        {...transitionProp}
+        style={[styles.box, viewStyles[currentStyleIdx]]}
+      />
+      <View style={[styles.box, viewStyles[currentStyleIdx]]} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  googleColors: {
+    borderTopColor: 'orangered',
+    borderLeftColor: 'gold',
+    borderBottomColor: 'green',
+    borderRightColor: 'dodgerblue',
+    borderRadius: 100,
+    borderWidth: 40,
+  },
+  rainDrop: {
+    borderWidth: 60,
+    borderTopWidth: 40,
+    borderLeftWidth: 40,
+    borderRadius: 100,
+    borderTopLeftRadius: 0,
+    borderColor: 'deepskyblue',
+    backgroundColor: 'skyblue',
+    width: 150,
+    height: 150,
+    transform: [{ translateX: 40 }, { rotateZ: '45deg' }],
+  },
+  leaf: {
+    borderWidth: 60,
+    borderTopWidth: 50,
+    borderLeftWidth: 50,
+    borderTopLeftRadius: 90,
+    borderBottomRightRadius: 100,
+    borderColor: 'darkgreen',
+    borderBottomColor: 'green', // on Android this is overwritten with borderColor
+    borderRightColor: 'green',
+    backgroundColor: 'lime',
+    transform: [{ rotateZ: '30deg' }, { translateX: 40 }],
+  },
+  squareFrame: {
+    borderWidth: 40,
+    borderColor: 'goldenrod',
+    borderBlockColor: 'darkgoldenrod', // on Android this looks different than on IOS, both the transform and borders
+    transform: [{ matrix: [1, 0.1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1] }],
+  },
+  arcFrame: {
+    borderRadius: 20,
+    borderTopRightRadius: 80,
+    borderTopLeftRadius: 80,
+    borderWidth: 40,
+    borderBottomWidth: 60,
+    borderTopWidth: 10,
+    borderColor: 'goldenrod',
+    borderBlockEndColor: 'darkgoldenrod',
+    borderBlockStartColor: 'darkgoldenrod',
+    transform: [
+      { matrix: [0.5, 5, 0, 0, -1, 0.5, 0, 0, 0, 0, 1, 0, 100, 100, 100, 4] },
+    ],
+  },
+
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  box: {
+    width: 200,
+    height: 200,
+    opacity: 0.5,
+    margin: 50,
+  },
+});

apps/common-app/src/examples/PendulumExample.tsx

@@ -3,13 +3,7 @@ import Animated, {
   useAnimatedStyle,
   withSpring,
 } from 'react-native-reanimated';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { StyleSheet, TextInput, Text, View } from 'react-native';
 import type { Dispatch, SetStateAction } from 'react';
 import React, { useState } from 'react';
 import type {
@@ -21,6 +15,7 @@ import {
   GestureDetector,
   GestureHandlerRootView,
 } from 'react-native-gesture-handler';
+import { SelectorRow } from './commonComponents/RowButtonSelector';
 
 const NAVY = '#001A72';
 const LIGHT_NAVY = '#C1C6E5';
@@ -118,40 +113,13 @@ export default function SpringExample() {
 
   return (
     <GestureHandlerRootView style={styles.container}>
-      <View style={styles.buttonRow}>
-        <TouchableOpacity
-          style={
-            useConfigWithDuration
-              ? styles.selectedButton
-              : styles.notSelectedButton
-          }
-          onPress={() => setUseConfigWithDuration(true)}>
-          <Text
-            style={
-              useConfigWithDuration
-                ? styles.selectedButtonText
-                : styles.notSelectedButtonText
-            }>
-            with duration
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={
-            !useConfigWithDuration
-              ? styles.selectedButton
-              : styles.notSelectedButton
-          }
-          onPress={() => setUseConfigWithDuration(false)}>
-          <Text
-            style={
-              !useConfigWithDuration
-                ? styles.selectedButtonText
-                : styles.notSelectedButtonText
-            }>
-            without duration
-          </Text>
-        </TouchableOpacity>
-      </View>
+      <SelectorRow
+        firstButtonLabel="with duration"
+        secondButtonLabel="without duration"
+        selectedFirstButton={useConfigWithDuration}
+        setSelectedFirstButton={setUseConfigWithDuration}
+      />
+
       <GestureDetector gesture={gesture}>
         <View style={styles.pendulumContainer}>
           <Animated.View style={[styles.pendulum, style]}>
@@ -234,33 +202,4 @@ const styles = StyleSheet.create({
     height: 160,
     marginBottom: -5,
   },
-  buttonRow: {
-    flexDirection: 'row',
-    height: 40,
-    width: '80%',
-    margin: 20,
-    marginBottom: 0,
-    borderWidth: 2,
-    borderColor: NAVY,
-  },
-  selectedButton: {
-    backgroundColor: NAVY,
-    width: '50%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  notSelectedButton: {
-    backgroundColor: 'white',
-    width: '50%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  selectedButtonText: {
-    color: 'white',
-    fontSize: 20,
-  },
-  notSelectedButtonText: {
-    color: NAVY,
-    fontSize: 20,
-  },
 });

apps/common-app/src/examples/SharedElementTransitions/ChangeTheme.tsx

@@ -41,7 +41,9 @@ function getTheme(theme: boolean, disabled: boolean) {
       height: withSpring(values.targetHeight, config),
       originX: withSpring(values.targetOriginX, config),
       originY: withSpring(values.targetOriginY, config),
-      borderRadius: withSpring(values.targetBorderRadius, config),
+      borderRadius: values.targetBorderRadius
+        ? withSpring(values.targetBorderRadius, config)
+        : undefined,
     };
   })
     .progressAnimation((values, progress) => {
@@ -68,11 +70,14 @@ function getTheme(theme: boolean, disabled: boolean) {
           values.targetOriginY,
           values.currentOriginY
         ),
-        borderRadius: getValue(
-          progress,
-          values.targetBorderRadius,
-          values.currentBorderRadius
-        ),
+        borderRadius:
+          values.targetBorderRadius && values.currentBorderRadius
+            ? getValue(
+                progress,
+                values.targetBorderRadius,
+                values.currentBorderRadius
+              )
+            : undefined,
       };
     })
     .defaultTransitionType(SharedTransitionType.ANIMATION);

apps/common-app/src/examples/commonComponents/RowButtonSelector.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+const NAVY = '#001A72';
+
+export function SelectorRow({
+  firstButtonLabel,
+  secondButtonLabel,
+  selectedFirstButton,
+  setSelectedFirstButton,
+}: {
+  firstButtonLabel: string;
+  secondButtonLabel: string;
+  selectedFirstButton: boolean;
+  setSelectedFirstButton: (selectedFirstButton: boolean) => void;
+}) {
+  return (
+    <View style={styles.buttonRow}>
+      <TouchableOpacity
+        style={
+          selectedFirstButton ? styles.selectedButton : styles.notSelectedButton
+        }
+        onPress={() => setSelectedFirstButton(true)}>
+        <Text
+          style={
+            selectedFirstButton
+              ? styles.selectedButtonText
+              : styles.notSelectedButtonText
+          }>
+          {firstButtonLabel}
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={
+          !selectedFirstButton
+            ? styles.selectedButton
+            : styles.notSelectedButton
+        }
+        onPress={() => setSelectedFirstButton(false)}>
+        <Text
+          style={
+            !selectedFirstButton
+              ? styles.selectedButtonText
+              : styles.notSelectedButtonText
+          }>
+          {secondButtonLabel}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttonRow: {
+    flexDirection: 'row',
+    height: 40,
+    width: '80%',
+    margin: 20,
+    marginBottom: 0,
+    borderWidth: 2,
+    borderColor: NAVY,
+  },
+  selectedButton: {
+    backgroundColor: NAVY,
+    width: '50%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  notSelectedButton: {
+    backgroundColor: 'white',
+    width: '50%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  selectedButtonText: {
+    color: 'white',
+    fontSize: 20,
+  },
+  notSelectedButtonText: {
+    color: NAVY,
+    fontSize: 20,
+  },
+});

apps/common-app/src/examples/index.ts

@@ -14,6 +14,7 @@ import AnimatedTextWidthExample from './AnimatedTextWidthExample';
 import ArticleProgressExample from './ArticleProgressExample';
 import BabelVersionCheckExample from './BabelVersionCheckExample';
 import BasicLayoutAnimation from './LayoutAnimations/BasicLayoutAnimation';
+import BasicStyleTransition from './LayoutAnimations/BasicStyleTransition';
 import BasicNestedAnimation from './LayoutAnimations/BasicNestedAnimation';
 import BasicNestedLayoutAnimation from './LayoutAnimations/BasicNestedLayoutAnimation';
 import BokehExample from './BokehExample';
@@ -622,6 +623,10 @@ export const EXAMPLES: Record<string, Example> = {
     title: '[LA] Basic layout animation',
     screen: BasicLayoutAnimation,
   },
+  StyleTransition: {
+    title: '[LA] Basic style transition',
+    screen: BasicStyleTransition,
+  },
   BasicNestedAnimation: {
     title: '[LA] Basic nested animation',
     screen: BasicNestedAnimation,

packages/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationType.h

@@ -6,4 +6,5 @@ typedef enum LayoutAnimationType {
   LAYOUT = 3,
   SHARED_ELEMENT_TRANSITION = 4,
   SHARED_ELEMENT_TRANSITION_PROGRESS = 5,
+  LAYOUT_AND_STYLE = 6
 } LayoutAnimationType;

packages/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsManager.cpp

@@ -24,6 +24,11 @@ void LayoutAnimationsManager::configureAnimationBatch(
         enteringAnimationsForNativeID_[tag] = config;
         continue;
       }
+      if (type == LAYOUT_AND_STYLE) {
+        doLayoutAnimationContainStyle_[tag] = true;
+      } else {
+        doLayoutAnimationContainStyle_.erase(tag);
+      }
 #endif
       if (config == nullptr) {
         getConfigsForType(type).erase(tag);
@@ -70,6 +75,18 @@ bool LayoutAnimationsManager::hasLayoutAnimation(
     auto end = ignoreProgressAnimationForTag_.end();
     return ignoreProgressAnimationForTag_.find(tag) == end;
   }
+
+  if (type == LAYOUT_AND_STYLE) {
+    // LAYOUT_AND_STYLE is a subset of LAYOUT animations, therefore
+    // hasLayoutAnimation(tag of view with LAYOUT_AND_STYLE animation, LAYOUT) =
+    // true hasLayoutAnimation(tag of view with LAYOUT animation,
+    // LAYOUT_AND_STYLE) = false
+
+    auto includesAnimation = collection::contains(layoutAnimations_, tag);
+    bool includesStyle =
+        collection::contains(doLayoutAnimationContainStyle_, tag);
+    return includesAnimation && includesStyle;
+  }
   return collection::contains(getConfigsForType(type), tag);
 }
 
@@ -217,6 +234,7 @@ LayoutAnimationsManager::getConfigsForType(const LayoutAnimationType type) {
     case EXITING:
       return exitingAnimations_;
     case LAYOUT:
+    case LAYOUT_AND_STYLE: // a subset of LAYOUT
       return layoutAnimations_;
     case SHARED_ELEMENT_TRANSITION:
     case SHARED_ELEMENT_TRANSITION_PROGRESS: