Artboards - Rive

For more information on creating artboards in the Rive editor, please refer to Artboards.

Choosing an Artboard

When a Rive object is instantiated or when a Rive file is rendered, you can specify the artboard to use. If no artboard is given, the default artboard, as set in the Rive editor, is used. If no default artboard is set, the first artboard is used. Only one artboard can be rendered at a time.

New Runtime (Recommended)
Legacy Runtime

Listing artboards

Once you have loaded a RiveFile, you can get the artboards it contains:

const { riveFile } = useRiveFile(require('./assets/my_file.riv'));

// Inside an effect or event handler
const artboardNames = await riveFile.getArtboardNamesAsync();
const artboardCount = await riveFile.getArtboardCountAsync();

Displaying an artboard

Set the artboardName prop on RiveView. If you omit it, the default artboard is used.

export default function App() {
  const { riveFile } = useRiveFile(require('./assets/my_file.riv'));

  return riveFile ? (
    <RiveView
      file={riveFile}
      artboardName="My Artboard"
      style={{ width: 400, height: 400 }}
    />
  ) : null;
}

If no artboard has that name, RiveView reports an error through onError. See Error Handling.To render an artboard inside another artboard at runtime, use an artboard property in data binding.

export default function App() {
  return (
    <View>
      <Rive resourceName="my_rive_file" artboardName="My Artboard" autoplay />
    </View>
  );
}