Add boxSizing prop support

apps/common-app/src/apps/css/examples/animations/routes.ts

@@ -147,6 +147,11 @@ const layoutAndPositioningRoutes = {
         name: 'Aspect Ratio',
         Component: animatedProperties.layoutAndPositioning.others.AspectRatio,
       },
+      BoxSizing: {
+        name: 'Box Sizing',
+        labelTypes: ['web'],
+        Component: animatedProperties.layoutAndPositioning.others.BoxSizing,
+      },
     },
   },
 } satisfies Routes;

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/layoutAndPositioning/others/BoxSizing.tsx

@@ -0,0 +1,63 @@
+import { StyleSheet, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import { ExamplesScreen, VerticalExampleCard } from '@/apps/css/components';
+import { colors, radius, sizes, spacing } from '@/theme';
+
+export default function BoxSizing() {
+  return (
+    <ExamplesScreen
+      CardComponent={VerticalExampleCard}
+      buildAnimation={() => ({
+        animationDuration: '1s',
+        animationIterationCount: 'infinite',
+        animationName: {
+          from: {
+            boxSizing: 'border-box',
+          },
+          to: {
+            boxSizing: 'content-box',
+          },
+        },
+        animationTimingFunction: 'linear',
+      })}
+      renderExample={({ animation }) => (
+        <View style={[styles.common, styles.parent]}>
+          <Animated.View style={[styles.common, styles.child, animation]} />
+        </View>
+      )}
+      sections={[
+        {
+          description:
+            "`boxSizing` is a **discrete** property. That means, it **can't be smoothly animated** between values. However, we can still change this property in the animation keyframes but the change will be **abrupt**.",
+          examples: [
+            {
+              // 'In this example, the component in the **foreground** is rendered inside of the component in the **background** with some offset applied. The part that is **outside** of the **background** component is **clipped**.',
+              title: 'Changing Box Sizing',
+            },
+          ],
+          labelTypes: ['web'],
+          title: 'Box Sizing',
+        },
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  child: {
+    borderColor: colors.primary,
+    height: sizes.lg,
+    width: '100%',
+  },
+  common: {
+    borderRadius: radius.md,
+    borderWidth: spacing.sm,
+  },
+  parent: {
+    backgroundColor: colors.primaryLight,
+    borderColor: colors.primaryDark,
+    height: sizes.xxl,
+    width: sizes.xxl,
+  },
+});

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/layoutAndPositioning/others/index.ts

@@ -1,11 +1,13 @@
 import AspectRatio from './AspectRatio';
+import BoxSizing from './BoxSizing';
 import Display from './Display';
 import Overflow from './Overflow';
 import Position from './Position';
 import ZIndex from './ZIndex';
 
 export default {
   AspectRatio,
+  BoxSizing,
   Display,
   Overflow,
   Position,

apps/tvos-example/ios/Podfile.lock

@@ -1888,7 +1888,7 @@ SPEC CHECKSUMS:
   ReactCommon: 387c81ac0d7efbc9818b07e05ffae71ee356aa91
   RNReanimated: 0ac2a2f20448fd74996312fdd9845816af2f2b95
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Yoga: 2b0e5affb9ab46e4ebad33530df829c153c323d8
+  Yoga: 651e5fd560c7e408ab9d9ca44b8de1b622d7f0cc
 
 PODFILE CHECKSUM: 79e1477a8eb76b717bdd7c1610f7f8e6772536a9
 

packages/react-native-reanimated/Common/cpp/reanimated/CSS/registry/CSSAnimationsRegistry.cpp

@@ -1,8 +1,11 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #include <reanimated/CSS/registry/CSSAnimationsRegistry.h>
+#include <worklets/Tools/JSISerializer.h>
 
 namespace reanimated {
 
+using namespace worklets;
+
 bool CSSAnimationsRegistry::hasUpdates() const {
   return !runningAnimationsMap_.empty() || !delayedAnimationsManager_.empty();
 }
@@ -114,6 +117,8 @@ void CSSAnimationsRegistry::updateViewAnimations(
     const auto updates = animation->update(rt, timestamp);
     const auto newState = animation->getState(timestamp);
 
+    LOG(INFO) << "updates: " << stringifyJSIValue(rt, updates);
+
     if (newState == AnimationProgressState::Finished) {
       // Revert changes applied during animation if there is no forwards fill
       // mode

packages/react-native-reanimated/src/css/managers/CSSAnimationsManager.web.ts

@@ -129,6 +129,7 @@ export default class CSSAnimationsManager {
       const rule = processedAnimation.keyframesRule;
       if (rule.processedKeyframes) {
         // We always call insert as it will insert animation only if it doesn't exist
+        console.log('insertCSSAnimation', rule.name, rule.processedKeyframes);
         insertCSSAnimation(rule.name, rule.processedKeyframes);
       }
       newAttachedAnimations[rule.processedKeyframes] = processedAnimation;

packages/react-native-reanimated/src/css/platform/native/config.ts

@@ -102,7 +102,7 @@ export const PROPERTIES_CONFIG: StyleBuilderConfig<PlainStyle> = {
   overflow: true,
   zIndex: true,
   aspectRatio: { process: processAspectRatio },
-  boxSizing: false, // TODO
+  boxSizing: false, // web only
 
   /** Appearance */
   // COLORS

packages/react-native-reanimated/src/css/platform/web/config.ts

@@ -103,7 +103,7 @@ export const PROPERTIES_CONFIG: StyleBuilderConfig<PlainStyle> = {
   overflow: true,
   zIndex: true,
   aspectRatio: true,
-  boxSizing: false, // TODO
+  boxSizing: true,
 
   /** Appearance */
   // COLORS

packages/react-native-reanimated/src/propsAllowlists.ts

@@ -89,6 +89,7 @@ export const PropsAllowlists: AllowlistsHolder = {
     textShadowOffset: true,
     letterSpacing: true,
     aspectRatio: true,
+    boxSizing: true,
     columnGap: true, // iOS only
     end: true, // number or string
     flexBasis: true, // number or string