Layout

Examples

• Layout JS example

Steps

1. Set Fit to Fit.Layout - this will automatically scale and resize the artboard to match the canvas size when calling resizeDrawingSurfaceToCanvas().
2. Optionally set layoutScaleFactor for manual control of the artboard size (scale factor).
3. Subscribe to window.onresize and call resizeDrawingSurfaceToCanvas() to adjust the artboard size as the canvas and window changes.
4. Subscribe to device pixel ratio changes and call resizeDrawingSurfaceToCanvas() to ensure the artboard updates correctly on various screen densities. For example, when dragging the window between multiple monitors with different device pixel ratios.

<style>
  body {
    background: #f0f0f0;
    margin: 0;
    overflow: hidden;
  }

  canvas {
    background-color: red;
    display: block;
    width: 100vw;
    height: 100vh;
  }
</style>

<canvas id="riveCanvas"></canvas>

<script src="https://unpkg.com/@rive-app/canvas@latest"></script>

<script>
  const rive = new Rive({
    src: "your-rive-file.riv",
    autoplay: true,
    canvas: riveCanvas,
    layout: new Layout({
      fit: Fit.Layout,
      // layoutScaleFactor: 2, // 2x scale of the layout, when using `Fit.Layout`. This allows you to resize the layout as needed.
    }),
    stateMachines: ["State Machine 1"],
    onLoad: () => {
      computeSize();
    },
  });

  function computeSize() {
    rive.resizeDrawingSurfaceToCanvas();
  }

  // Subscribe to window size changes and update call `resizeDrawingSurfaceToCanvas`
  window.onresize = computeSize;

  // Subscribe to devicePixelRatio changes and call `resizeDrawingSurfaceToCanvas`
  window
    .matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
    .addEventListener("change", computeSize);
</script>

Examples

• Layout React Example

Steps

1. Set fit to Fit.Layout in the Layout object - this will automatically scale and resize the artboard to match the canvas size.
2. Pass the Layout object to the layout prop in useRive.
3. Optionally set layoutScaleFactor in the Layout object for manual control of the artboard’s scale factor.
4. The React runtime automatically handles window resizing and device pixel ratio changes.

import { useRive, Layout, Fit } from "@rive-app/react-canvas";

export const RiveComponent = () => {
  const { RiveComponent } = useRive({
    src: "your-rive-file.riv",
    stateMachines: "State Machine 1",
    layout: new Layout({
      fit: Fit.Layout,
      // layoutScaleFactor: 2, // Optional: 2x scale of the layout
    }),
    autoplay: true,
  });

  return <RiveComponent />;
};

Coming soon

Coming soon! This feature depends on an upcoming new Rive Flutter runtime—stay tuned for updates.

Examples

• SwiftUI

Steps

1. Set fit on an instance of RiveViewModel to layout
2. Optionally set layoutScaleFactor on RiveViewModel for manual control of an artboard’s scale factor.

let viewModel = RiveViewModel(fileName: "...")
viewModel.fit = .layout
viewModel.layoutScaleFactor = RiveViewModel.layoutScaleFactorAutomatic // Allow Rive to determine the scale factor
viewModel.layoutScaleFactor = 2.0 // Or, explicitly set the scale factor

Examples

See the Layout example.

Steps

1. Set the XML riveLayout type to "LAYOUT":

<app.rive.runtime.kotlin.RiveAnimationView
    ...
    app:riveFit="LAYOUT"
/>

2. Alternatively, use a reference to the RiveAnimationView and set the fit property to LAYOUT:

val animationView = findViewById<RiveAnimationView>(R.id.my_view)
animationView.fit = Fit.LAYOUT

3. To adjust the scale factor of the contents, use the layoutScaleFactor property. This is nullable, so by default, it will use the density as reported by resources.displayMetrics.density. You can override this to any positive float value, or return control to the system by resetting to null:

// Force a set scale factor
animationView.layoutScaleFactor = 2.5f
// Reset to system control
animationView.layoutScaleFactor = null

4. Additionally, the artboard size can be controlled by using the width and height properties. resetArtboardSize() can be used to return these values to their defaults:

// Force a certain artboard size
animationView.controller.activeArtboard?.width = 1000f
animationView.controller.activeArtboard?.height = 1000f
// Reset the artboard size to defaults
animationView.controller.activeArtboard?.resetArtboardSize()

Use the Layout object to configure Fit and Alignment. See Fit and Alignment below for all enum options.

<div>
    <canvas id="canvas" width="800" height="600"></canvas>
</div>
<script src="https://unpkg.com/@rive-app/canvas@latest"></script>
<script>
    // Fill the canvas, cropping Rive if necessary
    let layout = new rive.Layout({
        fit: rive.Fit.Cover,
    });

    // Fit to the width and align to the top of the canvas
    layout = new rive.Layout({
        fit: rive.Fit.FitWidth,
        alignment: rive.Alignment.TopCenter,
    });

    // Constrain the Rive content to (minX, minY), (maxX, maxY) in the canvas
    layout = new rive.Layout({
        fit: rive.Fit.Contain,
        minX: 50,
        minY: 50,
        maxX: 100,
        maxY: 100,
    });

    const r = new rive.Rive({
        src: 'https://cdn.rive.app/animations/vehicles.riv',
        canvas: document.getElementById('canvas'),
        layout: layout,
        autoplay: true
    });

    // Update the layout
    r.layout = new rive.Layout({ fit: rive.Fit.Fill });
</script>

Use the Layout object to configure Fit and Alignment. See Fit and Alignment below for all enum options.

import Rive, { Layout, Fit, Alignment } from '@rive-app/react-canvas';

export const Simple = () => (
  <Rive
    src="https://cdn.rive.app/animations/vehicles.riv"
    layout={new Layout({ fit: Fit.Contain, alignment: Alignment.TopCenter })}
  />
);

With the useRive hook:

import { useRive, Layout, Fit, Alignment } from '@rive-app/react-canvas';

export default function Example() {
  const { RiveComponent } = useRive({
    src: 'my-file.riv',
    artboard: 'my-artboard',
    animations: 'my-animation',
    layout: new Layout({
      fit: Fit.Cover,
      alignment: Alignment.TopCenter,
    }),
    autoplay: true,
  });

  return <RiveComponent />;
}

Set layout attributes for Fit and Alignment on the Rive component directly. See Fit and Alignment below for all enum options.

import Rive, { Alignment, Fit } from 'rive-react-native';

export default function Simple() {
  return (
    <ScrollView>
      <Rive
        fit={Fit.Cover}
        alignment={Alignment.TopCenter}
        resourceName="truck_v7"
      />
    </ScrollView>
  );
};

The fit and alignment options behave like their counterparts in Flutter (see BoxFit and Size as examples).

Bounds options are absent; Flutter’s layout engine and options are the preferred way to handle positioning Rive content.

// Fill the canvas, cropping Rive if necessary
var widget = const RiveAnimation.network(
  'https://cdn.rive.app/animations/vehicles.riv',
  fit: BoxFit.cover,
);

// Fit to the width and align to the top of the canvas
widget = const RiveAnimation.network(
  'https://cdn.rive.app/animations/vehicles.riv',
  fit: BoxFit.fitWidth,
  alignment: Alignment.topCenter,
);

See values and descriptions in the sections below for Fit and Alignment. The runtime provides the following enums to set on layout parameters:

• Fit

  • .fill
  • .contain
  • .cover
  • .fitWidth
  • .fitHeight
  • .scaleDown
  • .noFit

• Alignment

  • .topLeft
  • .topCenter
  • .topRight
  • .centerLeft
  • .center
  • .centerRight
  • .bottomLeft
  • .bottomCenter
  • .bottomRight

​

SwiftUI

The following example shows how to set layout parameters and switch them at runtime:

struct SwiftLayout: View {
    @State private var fit: RiveFit = .contain
    @State private var alignment: RiveAlignment = .center

    var body: some View {
        VStack {
            RiveViewModel(fileName: "fancy_rive_file", fit: fit, alignment: alignment).view()
        }
        HStack {
            Text("Some Fit Examples")
        }
        HStack {
            Button("Fill") { fit = .fill }
            Button("Contain") { fit = .contain }
            Button("Cover") { fit = .cover }
        }
        HStack {
            Text("Some Alignment Examples")
        }
        HStack {
            Button("Top Left") { alignment = .topLeft }
            Button("Top Center") { alignment = .topCenter }
            Button("Top Right") { alignment = .topRight }
        }
    }
}

​

UIKit

The following example shows how to set layout parameters and switch them at runtime:

class LayoutViewController: UIViewController {
    @IBOutlet weak var riveView: RiveView!
    var viewModel = RiveViewModel(fileName: "fancy_rive_file")

    override func viewDidLoad() {
        viewModel.setView(riveView)
    }

    @IBAction func fitButtonTriggered(_ sender: UIButton) {
        setFit(name: sender.currentTitle!)
    }

    @IBAction func alignmentButtonTriggered(_ sender: UIButton) {
        setAlignment(name: sender.currentTitle!)
    }

    func setFit(name: String) {
        var fit: RiveFit = .contain
        switch name {
        case "Fill": fit = .fill
        case "Contain": fit = .contain
        case "Cover": fit = .cover
        case "Fit Width": fit = .fitWidth
        case "Fit Height": fit = .fitHeight
        case "Scale Down": fit = .scaleDown
        case "None": fit = .noFit
        default: fit = .contain
        }
        viewModel.fit = fit
    }

    func setAlignment(name: String) {
        var alignment: RiveAlignment = .center
        switch name {
        case "Top Left": alignment = .topLeft
        case "Top Center": alignment = .topCenter
        case "Top Right": alignment = .topRight
        case "Center Left": alignment = .centerLeft
        case "Center": alignment = .center
        case "Center Right": alignment = .centerRight
        case "Bottom Left": alignment = .bottomLeft
        case "Bottom Center": alignment = .bottomCenter
        case "Bottom Right": alignment = .bottomRight
        default: alignment = .center
        }
        viewModel.alignment = alignment
    }
}

The animation view can be further customized as part of specifying layout attributes.

riveFit can be specified to determine how the animation should be resized to fit its container. The available choices are NONE, FILL, CONTAIN, COVER, FIT_WIDTH, FIT_HEIGHT, SCALE_DOWN, and LAYOUT.

riveAlignment informs how it should be aligned within the container. The available choices are TOP_LEFT, TOP_CENTER, TOP_RIGHT, CENTER_LEFT, CENTER, CENTER_RIGHT, BOTTOM_LEFT, BOTTOM_CENTER, and BOTTOM_RIGHT.

See more about these values and meanings in the sections below.

Specify the layout values in your Resource layout:

<app.rive.runtime.kotlin.RiveAnimationView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:riveResource="@raw/off_road_car_blog"
    app:riveAlignment="TOP_CENTER"
    app:riveFit="FILL"
/>

Or in your Activity code:

animationView.fit = Fit.FILL
animationView.alignment = Alignment.CENTER