feat: Support for remaining SVG stroke properties in CSS (#7808)

## Summary

This PR adds support and examples for the remaining RN SVG stroke
properties:
- `strokeDashoffset`
- `strokeLinecap`
- `strokeLinejoin`
- `strokeMiterlimit` (this one seems to have no effect and likely
doesn't work at all in `react-native-svg` - even when I tested without
any animation on examples from
[this](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-miterlimit)
website)
- `vectorEffect1`

## Example recording


https://github.com/user-attachments/assets/3f788f37-9e29-45e8-9c85-2dbd38255f41

Author: MatiPl01

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/common/Stroke.tsx

@@ -1,37 +1,54 @@
-import type { CSSAnimationKeyframes } from 'react-native-reanimated';
+import type {
+  CSSAnimationKeyframes,
+  CSSAnimationProperties,
+} from 'react-native-reanimated';
 import Animated from 'react-native-reanimated';
-import { Circle, type CircleProps, Svg } from 'react-native-svg';
+import type { StrokeProps } from 'react-native-svg';
+import { Circle, Path, Svg } from 'react-native-svg';
 
 import { ExamplesScreen } from '@/apps/css/components';
 import { colors } from '@/theme';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedPath = Animated.createAnimatedComponent(Path);
 
 export default function StrokeExample() {
   return (
     <ExamplesScreen<
-      { keyframes: CSSAnimationKeyframes<CircleProps>; props?: CircleProps },
-      CircleProps
+      {
+        keyframes: CSSAnimationKeyframes<StrokeProps>;
+        animationProps?: Omit<CSSAnimationProperties, 'animationName'>;
+        props?: StrokeProps;
+        render?: (
+          props: StrokeProps & {
+            animatedProps: CSSAnimationProperties<StrokeProps>;
+          }
+        ) => JSX.Element;
+      },
+      StrokeProps
     >
-      buildAnimation={({ keyframes }) => ({
+      buildAnimation={({ keyframes, animationProps }) => ({
         animationName: keyframes,
         animationDuration: '1s',
         animationIterationCount: 'infinite',
         animationTimingFunction: 'linear',
+        ...animationProps,
       })}
-      renderExample={({ animation, props }) => (
-        <Svg height={100} viewBox="0 0 100 100" width={100}>
-          <AnimatedCircle
-            animatedProps={animation}
-            cx={50}
-            cy={50}
-            fill={colors.primary}
-            r={20}
-            stroke={colors.primaryDark}
-            {...props}
-          />
-        </Svg>
-      )}
+      renderExample={({ animation, props, render }) =>
+        render?.({ ...props, animatedProps: animation }) ?? (
+          <Svg height={100} viewBox="0 0 100 100" width={100}>
+            <AnimatedCircle
+              animatedProps={animation}
+              cx={50}
+              cy={50}
+              fill={colors.primary}
+              r={20}
+              stroke={colors.primaryDark}
+              {...props}
+            />
+          </Svg>
+        )
+      }
       sections={[
         {
           title: 'Stroke',
@@ -156,6 +173,142 @@ export default function StrokeExample() {
             },
           ],
         },
+        {
+          title: 'strokeDashoffset',
+          examples: [
+            {
+              keyframes: {
+                to: {
+                  strokeDashoffset: 100,
+                },
+              },
+              props: {
+                strokeWidth: 5,
+                strokeDasharray: 10,
+              },
+              title: 'Absolute value',
+              description:
+                '`strokeDashArray` is set to `10` and `strokeWidth` is set to `5`',
+            },
+          ],
+        },
+        {
+          title: 'strokeLinecap',
+          examples: [
+            {
+              keyframes: {
+                from: {
+                  strokeLinecap: 'butt',
+                },
+                '50%': {
+                  strokeLinecap: 'round',
+                },
+                to: {
+                  strokeLinecap: 'square',
+                },
+              },
+              props: {
+                strokeWidth: 15,
+                strokeDasharray: 20,
+              },
+              title: 'Changing `strokeLinecap`',
+              description:
+                '`strokeDashArray` is set to `10` and `strokeWidth` is set to `5`',
+            },
+          ],
+        },
+        {
+          title: 'strokeLinejoin',
+          examples: [
+            {
+              keyframes: {
+                from: {
+                  strokeLinejoin: 'miter',
+                },
+                '50%': {
+                  strokeLinejoin: 'round',
+                },
+                to: {
+                  strokeLinejoin: 'bevel',
+                },
+              },
+              render: (props) => (
+                <Svg height={100} viewBox="0 0 6 6" width={100}>
+                  <AnimatedPath
+                    d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
+                    fill="none"
+                    stroke={colors.primaryDark}
+                    {...props}
+                  />
+                </Svg>
+              ),
+              title: 'Changing `strokeLinejoin`',
+            },
+          ],
+        },
+        // TODO - this prop doesn't work in RN SVG so the example is commented
+        // out for now
+        // {
+        //   title: 'strokeMiterlimit',
+        //   examples: [
+        //     {
+        //       CardComponent: VerticalExampleCard,
+        //       keyframes: {
+        //         from: {
+        //           strokeMiterlimit: 1,
+        //         },
+        //         to: {
+        //           strokeMiterlimit: 8,
+        //         },
+        //       },
+        //       render: (props) => (
+        //         <Svg height={150} viewBox="0 0 38 30" width={200}>
+        //           <AnimatedPath
+        //             fill="none"
+        //             stroke={colors.primaryDark}
+        //             strokeLinejoin="miter"
+        //             strokeMiterlimit={10}
+        //             d="M1,19 l7   ,-3 l7   ,3
+        //                m2, 0 l3.5 ,-3 l3.5 ,3
+        //                m2, 0 l2   ,-3 l2   ,3
+        //                m2, 0 l0.75,-3 l0.75,3
+        //                m2, 0 l0.5 ,-3 l0.5 ,3"
+        //             {...props}
+        //           />
+        //         </Svg>
+        //       ),
+        //       title: 'Changing `strokeMiterlimit`',
+        //     },
+        //   ],
+        // },
+        {
+          title: 'vectorEffect',
+          examples: [
+            {
+              keyframes: {
+                from: {
+                  vectorEffect: 'none',
+                },
+                to: {
+                  vectorEffect: 'nonScalingStroke',
+                },
+              },
+              render: (props) => (
+                <Svg height={150} viewBox="0 0 400 240" width={200}>
+                  <AnimatedPath
+                    d="M10,20 L40,100 L39,200 z"
+                    fill="none"
+                    stroke={colors.primaryDark}
+                    strokeWidth={5}
+                    transform="translate(100,0) scale(4,1)"
+                    {...props}
+                  />
+                </Svg>
+              ),
+              title: 'Changing `strokeMiterlimit`',
+            },
+          ],
+        },
       ]}
     />
   );

apps/common-app/src/apps/css/navigation/Navigator.tsx

@@ -11,11 +11,11 @@ import { colors, flex, iconSizes, radius, spacing } from '@/theme';
 import type { FontVariant } from '@/types';
 
 import BottomTabBar from './BottomTabBar';
-import { INITIAL_ROUTE_NAME, TAB_ROUTES } from './constants';
 import {
   LocalNavigationProvider,
   useLocalNavigationRef,
 } from './LocalNavigationProvider';
+import { INITIAL_ROUTE_NAME, TAB_ROUTES } from './routes';
 import { SearchScreen } from './search';
 import type { Routes } from './types';
 import { isRouteWithRoutes } from './utils';

apps/common-app/src/apps/css/navigation/constants.ts

@@ -1,23 +1 @@
-import { faExchange, faFire } from '@fortawesome/free-solid-svg-icons';
-
-import { animationRoutes, transitionRoutes } from '../examples';
-import type { TabRoute } from './types';
-
 export const BOTTOM_BAR_HEIGHT = 60;
-
-// We use stack navigator to mimic the tab navigator, thus top-level routes will be
-// displayed as tabs in the bottom tab bar
-export const TAB_ROUTES = {
-  Animations: {
-    icon: faFire,
-    name: 'Animations',
-    routes: animationRoutes,
-  },
-  Transitions: {
-    icon: faExchange,
-    name: 'Transitions',
-    routes: transitionRoutes,
-  },
-} satisfies Record<string, TabRoute>;
-
-export const INITIAL_ROUTE_NAME = Object.values(TAB_ROUTES)[0]?.name;

apps/common-app/src/apps/css/navigation/index.ts

@@ -1,2 +1,3 @@
 export * from './constants';
 export { default as Navigator } from './Navigator';
+export * from './routes';

apps/common-app/src/apps/css/navigation/routes.ts

@@ -0,0 +1,21 @@
+import { faExchange, faFire } from '@fortawesome/free-solid-svg-icons';
+
+import { animationRoutes, transitionRoutes } from '../examples';
+import type { TabRoute } from './types';
+
+// We use stack navigator to mimic the tab navigator, thus top-level routes will be
+// displayed as tabs in the bottom tab bar
+export const TAB_ROUTES = {
+  Animations: {
+    icon: faFire,
+    name: 'Animations',
+    routes: animationRoutes,
+  },
+  Transitions: {
+    icon: faExchange,
+    name: 'Transitions',
+    routes: transitionRoutes,
+  },
+} satisfies Record<string, TabRoute>;
+
+export const INITIAL_ROUTE_NAME = Object.values(TAB_ROUTES)[0]?.name;

apps/common-app/src/apps/css/navigation/search/SearchScreen.tsx

@@ -20,7 +20,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Stagger } from '@/apps/css/components';
 import { spacing } from '@/theme';
 
-import { BOTTOM_BAR_HEIGHT, INITIAL_ROUTE_NAME } from '../constants';
+import { BOTTOM_BAR_HEIGHT } from '../constants';
+import { INITIAL_ROUTE_NAME } from '../routes';
 import { searchRoutes } from './fuse';
 import PullToSearchIndicator from './PullToSearchIndicator';
 import SearchBar from './SearchBar';

packages/react-native-reanimated/Common/cpp/reanimated/CSS/svg/config/interpolators/common.h

@@ -31,11 +31,11 @@ const InterpolatorFactoriesRecord SVG_STROKE_INTERPOLATORS = {
     {"strokeOpacity", value<CSSDouble>(1)},
     {"strokeDasharray",
      value<SVGStrokeDashArray, CSSKeyword>(SVGStrokeDashArray())},
-    {"strokeDashoffset", value<CSSDouble>(0)},
-    {"strokeLinecap", value<CSSKeyword>("butt")},
-    {"strokeLinejoin", value<CSSKeyword>("miter")},
+    {"strokeDashoffset", value<SVGLength>(0)},
+    {"strokeLinecap", value<CSSInteger>(0)},
+    {"strokeLinejoin", value<CSSInteger>(0)},
     {"strokeMiterlimit", value<CSSDouble>(4)},
-    {"vectorEffect", value<CSSKeyword>("none")},
+    {"vectorEffect", value<CSSInteger>(0)},
 };
 
 const InterpolatorFactoriesRecord SVG_CLIP_INTERPOLATORS = {

packages/react-native-reanimated/src/css/platform/native/configs/svg/common.ts

@@ -14,15 +14,15 @@ import type {
   StrokeProps,
   TouchableProps,
   TransformProps,
-  VectorEffectProps,
 } from 'react-native-svg';
 
 import {
+  convertStringToNumber,
+  processColorSVG,
   processOpacity,
   processStrokeDashArray,
   type StyleBuilderConfig,
 } from '../../style';
-import { processColorSVG, processFillRule } from '../../style';
 
 const colorAttributes = { process: processColorSVG };
 
@@ -33,7 +33,12 @@ const colorProps: StyleBuilderConfig<ColorProps> = {
 const fillProps: StyleBuilderConfig<FillProps> = {
   fill: colorAttributes,
   fillOpacity: { process: processOpacity },
-  fillRule: { process: processFillRule },
+  fillRule: {
+    process: convertStringToNumber({
+      evenodd: 0,
+      nonzero: 1,
+    }),
+  },
 };
 
 const stokeProps: StyleBuilderConfig<StrokeProps> = {
@@ -42,10 +47,31 @@ const stokeProps: StyleBuilderConfig<StrokeProps> = {
   strokeOpacity: { process: processOpacity },
   strokeDasharray: { process: processStrokeDashArray },
   strokeDashoffset: true,
-  strokeLinecap: true,
-  strokeLinejoin: true,
+  strokeLinecap: {
+    process: convertStringToNumber({
+      butt: 0,
+      square: 2,
+      round: 1,
+    }),
+  },
+  strokeLinejoin: {
+    process: convertStringToNumber({
+      miter: 0,
+      bevel: 2,
+      round: 1,
+    }),
+  },
   strokeMiterlimit: true,
-  vectorEffect: true,
+  vectorEffect: {
+    process: convertStringToNumber({
+      none: 0,
+      default: 0,
+      nonScalingStroke: 1,
+      'non-scaling-stroke': 1,
+      inherit: 2,
+      uri: 3,
+    }),
+  },
 };
 
 const clipProps: StyleBuilderConfig<ClipProps> = {
@@ -72,10 +98,6 @@ const transformProps: StyleBuilderConfig<TransformProps> = {
   transform: true, // TODO - add preprocessor
 };
 
-const vectorEffectProps: StyleBuilderConfig<VectorEffectProps> = {
-  vectorEffect: true,
-};
-
 const responderProps: StyleBuilderConfig<
   Omit<ResponderProps, keyof GestureResponderHandlers>
 > = {
@@ -115,7 +137,6 @@ export const commonSvgProps = {
   ...stokeProps,
   ...clipProps,
   ...transformProps,
-  ...vectorEffectProps,
   ...responderProps,
   ...commonMarkerProps,
   ...commonMaskProps,