Semantics

This page covers enabling semantics on RiveView so your Rive graphics are accessible to screen readers. To learn what semantics are and how to add them to a graphic, see the Semantics editor documentation.

Overview

In the Rive Editor, you can add semantic meaning to certain elements of your graphic-roles such as button, checkbox, tab, image, list, dialog, and more. Alongside these roles, you can add associated labels, values, states, and actions. These settings vary per role. At runtime, RiveView reads those semantics from the running state machine and exposes them to VoiceOver, keeping them up to date as the state machine advances. On iOS this uses the Apple runtime’s semantics support.

Semantics are opt‑in. The default mode is Semantics.Off, so no accessibility elements are created until you enable semantics on the view.

Semantics must be defined in the editor to have any effect. If an element has no semantics, it is not exposed to screen readers, regardless of the mode you set. See Feature Support for which runtimes currently support semantics.

Availability

Semantics require @rive-app/react-native 0.5.0 or later.

Platform	Supported
iOS	✅
Android	Coming soon

On Android, the semantics prop is accepted but has no effect yet.

Semantics modes

The Semantics enum sets the screen reader integration mode for a RiveView:

Mode	Description
`Semantics.Off`	Default. Accessibility semantics are disabled. No accessibility elements are created, regardless of screen reader state.
`Semantics.On`	Accessibility semantics are always active. Elements are created and kept up‑to‑date on every frame.
`Semantics.Automatic`	Accessibility semantics activate and deactivate automatically based on whether a screen reader (VoiceOver) is running.

For most apps, prefer Semantics.Automatic. It keeps the accessibility tree in sync only while a screen reader is active, avoiding unnecessary work when it isn’t.

Usage

Set the semantics prop on RiveView:

import { RiveView, Semantics, useRiveFile } from '@rive-app/react-native';

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

  return riveFile ? (
    <RiveView
      file={riveFile}
      style={{ width: '100%', height: 80 }}
      semantics={Semantics.Automatic}
    />
  ) : null;
}

See the semantics example in the example app for a complete setup.

Runtimes

Integrations

Overview

Availability

Semantics modes

Usage

​Overview

​Availability

​Semantics modes

​Usage

Overview

Availability

Semantics modes

Usage