Add better opacity and children handling tests and examples

Author: wisniewskij

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

@@ -5,7 +5,7 @@ import Animated, {
 // TODO: Fix me
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801
-import { RadialGradient, Rect, Svg } from 'react-native-svg';
+import { RadialGradient, Rect, Stop, Svg } from 'react-native-svg';
 
 import { ExamplesScreen } from '@/apps/css/components';
 
@@ -152,6 +152,26 @@ export default function RadialGradientExample() {
                     },
                   },
                 },
+                {
+                  title: 'Opacity calculation',
+                  description:
+                    "Stop's opacity is multiplied by color's opacity.",
+
+                  keyframes: {
+                    from: {
+                      gradient: [
+                        { offset: '0%', color: '#9b0808', opacity: 1 },
+                        { offset: '100%', color: '#35e20a', opacity: 1 },
+                      ],
+                    },
+                    to: {
+                      gradient: [
+                        { offset: '0%', color: '#9b080800', opacity: 1 },
+                        { offset: '100%', color: '#35e20a', opacity: 1 },
+                      ],
+                    },
+                  },
+                },
               ],
               title: 'Opacity',
             },
@@ -443,6 +463,84 @@ export default function RadialGradientExample() {
             },
           ],
         },
+        {
+          name: 'Stops as children and props',
+          renderExample: ({ animation }) => (
+            <Svg height={300} width={300}>
+              <AnimatedGrad
+                animatedProps={animation}
+                gradientUnits="objectBoundingBox"
+                id="radialGrad2">
+                <Stop offset="0%" stopColor="red" stopOpacity="1" />
+                <Stop offset="50%" stopColor="yellow" stopOpacity="1" />
+              </AnimatedGrad>
+              <Rect
+                fill="url(#radialGrad2)"
+                height={100}
+                width={100}
+                x={100}
+                y={100}
+              />
+            </Svg>
+          ),
+          sections: [
+            {
+              examples: [
+                {
+                  title: 'Children stops',
+                  description: `If no animation between stops is needed, the stops can be provided as children of the animated RadialGradient. \n\n${FOCAL_POINT_DISCLAIMER}`,
+                  keyframes: {
+                    from: {
+                      fx: '30%',
+                      fy: '30%',
+                      cx: '50%',
+                      cy: '50%',
+                      r: '30%',
+                    },
+                    to: {
+                      fx: '30%',
+                      fy: '30%',
+                      cx: '45%',
+                      cy: '45%',
+                      r: '60%',
+                    },
+                  },
+                },
+                {
+                  title: 'Prop stops',
+                  description: `If there is an animation between stops needed, the stops have to be provided as the gradient prop.`,
+                  keyframes: {
+                    from: {
+                      gradient: [
+                        { offset: '0%', color: 'red' },
+                        { offset: '50%', color: 'yellow' },
+                      ],
+                    },
+                    to: {
+                      gradient: [
+                        { offset: '0%', color: '#00ffff', opacity: 1 },
+                        { offset: '100%', color: '#0000ff', opacity: 0.8 },
+                      ],
+                    },
+                  },
+                },
+                {
+                  title: 'Mixed stops',
+                  description: `You cannot mix children stops and prop stops. It will result in prop stops being prioritized.`,
+                  keyframes: {
+                    to: {
+                      gradient: [
+                        { offset: '0%', color: '#00ffff', opacity: 1 },
+                        { offset: '100%', color: '#0000ff', opacity: 0.8 },
+                      ],
+                    },
+                  },
+                },
+              ],
+              title: 'Stops as props or as children',
+            },
+          ],
+        },
       ]}
     />
   );

packages/react-native-reanimated/src/css/svg/native/processors/__tests__/stops.test.ts

@@ -32,6 +32,17 @@ describe(processSVGGradientStops, () => {
       expect(result[0].color).toBe(2147483903);
       expect(result[0].offset).toBe(0.5);
     });
+
+    it('merges opacity into the color integer using bitwise operations', () => {
+      const input = [{ offset: 0.5, color: '#0000ffee', opacity: 0.5 }];
+      const result = processSVGGradientStops(input);
+
+      // Alpha: Math.round(0.5 * 238) = 119 (0x77)
+      // Color: 0x0000ffee
+      // Result: (0x77 << 24) | 0x0000ff = 0x770000ff (1996488959)
+      expect(result[0].color).toBe(1996488959);
+      expect(result[0].offset).toBe(0.5);
+    });
   });
 
   describe('Sorting and Offsets', () => {

packages/react-native-reanimated/src/css/svg/native/processors/stops.ts

@@ -24,7 +24,8 @@ export const processSVGGradientStops = ((stops) => {
       stop.opacity !== undefined ? processPercentage(stop.opacity) : 1;
     const finalColor =
       typeof rawColor === 'number' && typeof stopOpacity === 'number'
-        ? ((Math.round(stopOpacity * 255) << 24) | (rawColor & 0x00ffffff)) >>>
+        ? ((Math.round(((rawColor >>> 24) & 0xff) * stopOpacity) << 24) |
+            (rawColor & 0x00ffffff)) >>>
           0
         : rawColor;
     return {