@pixodesk/svg-animator-rn 1.0.21 → 1.0.24

package/src/PxRnTracks.test.ts

@@ -84,11 +84,20 @@ describe('compileTracks', () => {
         expect(rect.props.fill[0]).not.toBe(rect.props.fill[rect.props.fill.length - 1]);
     });
 
-    it('samples transforms as composed transform strings', () => {
-        const tracks = compile();
+    it('samples transforms as MATRICES when targeting native views', () => {
+        // react-native-svg parses a transform string into a matrix in JS during
+        // render — a step reanimated's animated-props path skips. Feeding the
+        // matrix directly is what makes animated transforms work on device.
+        const tracks = compile(makeDoc(), { native: true });
         const g = tracks.elements.find(e => 'transform' in e.props)!;
-        expect(String(g.props.transform[0])).toContain('translate(0');
-        expect(String(g.props.transform[g.props.transform.length - 1])).toContain('translate(100');
+        const first = g.props.transform[0] as Array<number>;
+        const last = g.props.transform[g.props.transform.length - 1] as Array<number>;
+
+        expect(Array.isArray(first)).toBe(true);
+        expect(first).toHaveLength(6);
+        // translate(0,0) → identity; translate(100,100) → tx/ty in slots 4/5
+        expect(first).toEqual([1, 0, 0, 1, 0, 0]);
+        expect(last).toEqual([1, 0, 0, 1, 100, 100]);
     });
 
     it('respects sampleRate and maxSamples options', () => {
@@ -147,7 +156,7 @@ describe('length-list props (stroke-dasharray)', () => {
                 effects: { trimPath: { range: { keyframes: [{ time: 0, value: [0, 0.1] }, { time: 1000, value: [0, 1] }] } } },
             }],
         };
-        const materialised = generateNewIds(materialiseAllInTree(doc, PxAnimatorEngine.webapi));
+        const materialised = generateNewIds(materialiseAllInTree(doc, PxAnimatorEngine.waapi));
         const tracks = compileTracks(materialised);
         const el = tracks.elements.find(e => 'strokeDasharray' in e.props)!;
         expect(el).toBeDefined();
@@ -158,7 +167,7 @@ describe('length-list props (stroke-dasharray)', () => {
     });
 });
 
-describe('animated <use> flattening (webapi materialisation)', () => {
+describe('animated <use> flattening (waapi materialisation)', () => {
     it('inlines animated <use> clones so no live references remain', () => {
         const doc: PxAnimatedSvgDocument = {
             type: 'svg', viewBox: '0 0 300 200',
@@ -169,10 +178,10 @@ describe('animated <use> flattening (webapi materialisation)', () => {
                     animate: { cy: { keyframes: [{ time: 0, value: 40 }, { time: 2000, value: 160 }] } },
                 }] }] },
                 { type: 'use', id: 'u1', href: '#sym' },
-                { type: 'use', id: 'u2', href: '#sym', x: 80, effects: { clone: { baseId: 'sym', retime: { start: -600 } } } },
+                { type: 'use', id: 'u2', href: '#sym', x: 80, effects: { clone: { sourceId: '#sym', retime: { start: -600 } } } },
             ],
         };
-        const materialised = generateNewIds(materialiseAllInTree(doc, PxAnimatorEngine.webapi));
+        const materialised = generateNewIds(materialiseAllInTree(doc, PxAnimatorEngine.waapi));
         const countUse = (n: any): number =>
             (n.type === 'use' ? 1 : 0) + (n.children || []).reduce((s: number, c: any) => s + countUse(c), 0);
         expect(countUse(materialised)).toBe(0);
@@ -183,3 +192,42 @@ describe('animated <use> flattening (webapi materialisation)', () => {
         expect(cyTracks[0].props.cy[0]).not.toBe(cyTracks[1].props.cy[0]);
     });
 });
+
+describe('compileTracks platform gating', () => {
+    /** The DEFAULT is the DOM form. react-native-web passes values straight to
+     *  the DOM, where a matrix array serialises to `transform="1,0,0,1,x,y"` —
+     *  invalid, so the element silently stops moving. Web is the priority
+     *  behaviour; native is the one that has to opt in. */
+    it('samples transforms as SVG STRINGS by default', () => {
+        const tracks = compile();
+        const g = tracks.elements.find(e => 'transform' in e.props)!;
+
+        expect(typeof g.props.transform[0]).toBe('string');
+        expect(String(g.props.transform[g.props.transform.length - 1]))
+            .toContain('translate(100');
+    });
+
+    /** The whole native path end to end: compile → sample. Both halves have to
+     *  agree, and neither is observable without a device — hence the test. */
+    it('compile+sample delivers an animated `matrix` of numbers on native', () => {
+        const tracks = compile(makeDoc(), { native: true });
+        const g = tracks.elements.find(e => 'transform' in e.props)!;
+
+        const start = sampleProps(g, 0, tracks.stepMs, tracks.sampleCount, true);
+        const end = sampleProps(g, tracks.duration, tracks.stepMs, tracks.sampleCount, true);
+
+        expect(start.transform).toBeUndefined();
+        expect(start.matrix).toEqual([1, 0, 0, 1, 0, 0]);
+        expect(end.matrix).toEqual([1, 0, 0, 1, 100, 100]);
+    });
+
+    /** …and the same compile targeted at the DOM must never emit `matrix`. */
+    it('compile+sample delivers an animated `transform` string on web', () => {
+        const tracks = compile();
+        const g = tracks.elements.find(e => 'transform' in e.props)!;
+
+        const end = sampleProps(g, tracks.duration, tracks.stepMs, tracks.sampleCount, false);
+        expect(end.matrix).toBeUndefined();
+        expect(String(end.transform)).toContain('translate(100');
+    });
+});

package/src/PxRnTracks.ts

@@ -41,6 +41,8 @@ export interface PxCompiledTracks {
     delay: number;
     /** WAAPI-style fill mode (default 'forwards'). */
     fill: string;
+    /** When true, snap back to the start after a natural finish. */
+    resetOnFinish: boolean;
     /** Sample step, ms. */
     stepMs: number;
     /** Number of samples per iteration (>= 2; sample i is at time i*stepMs). */
@@ -54,6 +56,15 @@ export interface CompileTracksOptions {
     sampleRate?: number;
     /** Hard cap on samples per iteration (memory guard). Default 600. */
     maxSamples?: number;
+    /**
+     * Sample values in the form the NATIVE react-native-svg views expect
+     * (currently: `transform` as a 6-number matrix rather than an SVG string).
+     *
+     * Defaults to `false` — the plain SVG form, which is what react-native-web
+     * hands straight to the DOM. Only the component knows the platform, so it
+     * decides; every consumer that does not opt in keeps DOM-compatible values.
+     */
+    native?: boolean;
 }
 
 
@@ -72,12 +83,22 @@ export function compileTracks(doc: PxAnimatedSvgDocument, opts?: CompileTracksOp
     if (_iterations === 'infinite') iterations = Infinity;
     if (iterations < 1) iterations = 1;
 
+    const native = opts?.native ?? false;
     const sampleRate = opts?.sampleRate ?? 60;
     const maxSamples = opts?.maxSamples ?? 600;
     let sampleCount = Math.max(2, Math.round((duration / 1000) * sampleRate) + 1);
     if (sampleCount > maxSamples) sampleCount = maxSamples;
     const stepMs = duration / (sampleCount - 1);
 
+    // Element tag per id — `toRnPropValue` needs it to leave the root `<Svg>`'s
+    // transform as a string (see its `tag` parameter).
+    const tagById = new Map<string, string>();
+    const indexTags = (n: any): void => {
+        if (n && typeof n.id === 'string') tagById.set(n.id, String(n.type));
+        (n?.children ?? []).forEach(indexTags);
+    };
+    indexTags(doc);
+
     const bindings = getNormalisedBindings(doc, PxAnimatorEngine.frames) || [];
 
     const elements: Array<PxElementTracks> = [];
@@ -98,9 +119,9 @@ export function compileTracks(doc: PxAnimatedSvgDocument, opts?: CompileTracksOp
                     // A prop can appear late (e.g. attrs whose first kf is
                     // beyond t=0) — backfill earlier samples with the first
                     // computed value so the array is always fully populated.
-                    for (let j = 0; j < i; j++) arr[j] = toRnPropValue(rnProp, value);
+                    for (let j = 0; j < i; j++) arr[j] = toRnPropValue(rnProp, value, tagById.get(binding.id), native);
                 }
-                arr[i] = toRnPropValue(rnProp, value);
+                arr[i] = toRnPropValue(rnProp, value, tagById.get(binding.id), native);
             }
         }
         // Forward-fill any holes (attr disappeared from a later sample).
@@ -121,30 +142,61 @@ export function compileTracks(doc: PxAnimatedSvgDocument, opts?: CompileTracksOp
         direction: config.direction || 'normal',
         delay: config.delay || 0,
         fill: config.fill ?? 'forwards',
+        resetOnFinish: !!config.resetOnFinish,
         stepMs,
         sampleCount,
         elements,
     };
 }
 
+/**
+ * Wire prop → the prop name the NATIVE view actually declares.
+ *
+ * react-native-svg's JS layer renames some props on the way down: a
+ * `transform` (string or matrix) is parsed by `extractProps` and handed to the
+ * native component as `matrix` — the Fabric spec has no `transform` prop at
+ * all. Values sent through reanimated's animated-props path skip that JS
+ * rename, so they must already use the native name or the native view drops
+ * them silently. This is ONLY for the animated path; plain React renders still
+ * go through the JS layer and must keep the wire name.
+ */
+export const NATIVE_PROP_NAME: Record<string, string> = {
+    transform: 'matrix',
+};
+
 /**
  * Worklet-safe sample lookup: returns the per-prop values at time `tMs`
  * (already mapped into a single iteration by the caller). Kept deliberately
  * trivial — runs on the UI thread every frame.
+ *
+ * `native = true` applies {@link NATIVE_PROP_NAME} — pass it only on the
+ * reanimated animated-props path of a real device. Props that are applied by
+ * re-rendering through React (and therefore still pass through react-native-svg's
+ * JS layer), and every value on the web, must keep the wire name.
  */
 export function sampleProps(
     tracks: PxElementTracks,
     tMs: number,
     stepMs: number,
-    sampleCount: number
+    sampleCount: number,
+    native = false
 ): Record<string, string | number | Array<number>> {
     'worklet';
+    const out: Record<string, string | number | Array<number>> = {};
+    // Defensive: this runs on the UI thread, where a throw is a hard crash
+    // with no React boundary to catch it.
+    if (!tracks || !tracks.props || !(stepMs > 0)) return out;
+
     let idx = Math.round(tMs / stepMs);
     if (idx < 0) idx = 0;
     if (idx >= sampleCount) idx = sampleCount - 1;
-    const out: Record<string, string | number | Array<number>> = {};
     for (const key in tracks.props) {
-        out[key] = tracks.props[key][idx];
+        const values = tracks.props[key];
+        if (!values) continue;
+        const value = values[idx];
+        if (value === undefined) continue;
+        const name = native && key === 'transform' ? 'matrix' : key;
+        out[name] = value;
     }
     return out;
 }

package/src/PxRnTypeMap.ts

@@ -8,6 +8,32 @@ import {
     ClipPath,
     Defs,
     Ellipse,
+    FeBlend,
+    FeColorMatrix,
+    FeComponentTransfer,
+    FeComposite,
+    FeConvolveMatrix,
+    FeDiffuseLighting,
+    FeDisplacementMap,
+    FeDistantLight,
+    FeDropShadow,
+    FeFlood,
+    FeFuncA,
+    FeFuncB,
+    FeFuncG,
+    FeFuncR,
+    FeGaussianBlur,
+    FeImage,
+    FeMerge,
+    FeMergeNode,
+    FeMorphology,
+    FeOffset,
+    FePointLight,
+    FeSpecularLighting,
+    FeSpotLight,
+    FeTile,
+    FeTurbulence,
+    Filter,
     G,
     Image,
     Line,
@@ -34,10 +60,19 @@ import type { ComponentType } from 'react';
  * SVG tag → react-native-svg component. Tags not in this map are skipped at
  * render time (with a warning collected by the renderer) — they go on the
  * feature-gap list rather than crashing the tree.
+ *
+ * Keys are the wire-format `node.type` values, which follow SVG's own casing
+ * (`clipPath`, `feGaussianBlur`, `linearGradient`, …).
  */
 export const RN_SVG_COMPONENTS: Record<string, ComponentType<any>> = {
+    // Root & containers
     svg: Svg,
     g: G,
+    defs: Defs,
+    symbol: SvgSymbol,
+    use: Use,
+
+    // Shapes
     rect: Rect,
     circle: Circle,
     ellipse: Ellipse,
@@ -45,20 +80,52 @@ export const RN_SVG_COMPONENTS: Record<string, ComponentType<any>> = {
     path: Path,
     polygon: Polygon,
     polyline: Polyline,
+    image: Image,
+
+    // Text
     text: SvgText,
     tspan: TSpan,
     textPath: TextPath,
-    defs: Defs,
+
+    // Paint servers & clipping
     linearGradient: LinearGradient,
     radialGradient: RadialGradient,
     stop: Stop,
-    use: Use,
-    symbol: SvgSymbol,
+    pattern: Pattern,
     mask: Mask,
     clipPath: ClipPath,
-    pattern: Pattern,
     marker: Marker,
-    image: Image,
+
+    // Filters — react-native-svg implements the full primitive set.
+    // NOTE: filter rendering requires the New Architecture (Fabric) and is
+    // newer than the rest of react-native-svg; treat visual parity with the
+    // web player as unverified until checked on a device.
+    filter: Filter,
+    feBlend: FeBlend,
+    feColorMatrix: FeColorMatrix,
+    feComponentTransfer: FeComponentTransfer,
+    feComposite: FeComposite,
+    feConvolveMatrix: FeConvolveMatrix,
+    feDiffuseLighting: FeDiffuseLighting,
+    feDisplacementMap: FeDisplacementMap,
+    feDistantLight: FeDistantLight,
+    feDropShadow: FeDropShadow,
+    feFlood: FeFlood,
+    feFuncA: FeFuncA,
+    feFuncB: FeFuncB,
+    feFuncG: FeFuncG,
+    feFuncR: FeFuncR,
+    feGaussianBlur: FeGaussianBlur,
+    feImage: FeImage,
+    feMerge: FeMerge,
+    feMergeNode: FeMergeNode,
+    feMorphology: FeMorphology,
+    feOffset: FeOffset,
+    fePointLight: FePointLight,
+    feSpecularLighting: FeSpecularLighting,
+    feSpotLight: FeSpotLight,
+    feTile: FeTile,
+    feTurbulence: FeTurbulence,
 };
 
 export { toRnPropName } from './PxRnPropNames';

package/src/index.ts

@@ -7,6 +7,8 @@ export { PixodeskSvgAnimator, default } from './PixodeskSvgAnimator';
 export type { PixodeskSvgAnimatorProps, RnAnimatorApi } from './PixodeskSvgAnimator';
 
 export { renderRnNode, toRnProps } from './PxRnRender';
+export { PxRnErrorBoundary, type PxRnErrorBoundaryProps } from './PxRnErrorBoundary';
+export { openClosedTextPathTargets } from './PxRnSafety';
 export type { RenderRnNodeOptions } from './PxRnRender';
 
 export { compileTracks, sampleProps } from './PxRnTracks';