Skip to content

Fit.Layout doesn't reflow elements in canvas-lite #409

@david-corb-hh

Description

@david-corb-hh

Title:
Fit.Layout doesn't reflow layout-constrained elements in canvas-lite — elements render at top-left instead of
anchored position


Description:

When using @rive-app/react-canvas-lite with Fit.Layout, elements that use Rive Layout constraints (e.g.
pinned to bottom-left) are not reflowed correctly. They render at the top-left of the canvas instead of their
anchored position. The exact same .riv file works correctly with @rive-app/react-canvas (full runtime).

Environment:

  - @rive-app/canvas-lite: 2.35.0 (also reproduced on 2.34.3)
  - @rive-app/react-canvas-lite: 4.27.0
  - Works correctly with: @rive-app/react-canvas@4.26.2 + @rive-app/canvas@2.34.2
  - Browser: Chrome / Safari on macOS

Artboard info (from rive.bounds and rive.layout?.layoutScaleFactor):

  layoutScaleFactor: 1
  bounds: { minX: 0, minY: 0, maxX: 1512, maxY: 798 }

Canvas at runtime: correctly fills the viewport. The canvas
sizing itself is fine — the bug is purely the position of elements within the canvas.

Code:

  const { rive, RiveComponent } = useRive({
    src: animationUrl,
    stateMachines: 'Training Machine',
    layout: new Layout({ fit: Fit.Layout }),
  });

  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <RiveComponent />
    </div>
  );

Expected: elements pinned to bottom-left via Rive Layout constraints render at the bottom-left of the canvas
(as they do with react-canvas).

Actual: elements render at the top-left of the canvas regardless of their layout constraints.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions