Is there support to set a data binding image property through the names of one of its values?

[mbrauninger]

Description

Right now, the documentation (https://rive.app/docs/runtimes/data-binding#react-native-9) does not seem to make it clear how you can set an image property through the property’s value.

For example, If I have an image property called “hat” with potential values of “hat00”, “hat01”, and “hat02” that are each responsible for rendering a different data-bound hat on the Rive, how would I be able to show a hat through code by passing in a value of “hat02”? I’m attaching an image to show the property I’m talking about in the "Screenshots" section of this issue.

Right now, I am able to explicitly render the hat by calling vmi.imageProperty(HAT_PROPERTY_NAME)?.set(hatImageRef.current), where hatImageRef.current is the bytes of the hat image which I get from RiveImages.loadFromBytesAsync. But it seems that it would be much simpler to use the “hat02” value, if this is something that can be done. Is something like this possible through the React Native runtime? If so, is there documentation that covers this use-case? And if not, is there a plan to add this type of feature? Thanks for your help!

Provide a Repro

N/A as this is a documentation/feature issue, not a bug

Source .riv/.rev file

N/A

Expected behavior

NA, see description

Screenshots

See data binding properties in image below.

Device & Versions (please complete the following information)

• Device: iOS simulator, iPhone 16
• OS: iOS 18.1
• React Native Version: 0.81.4
• Expo Version (if applicable): 54.0.25
• @rive-app/react-native Version: 0.2.7

Additional context

[mfazekas]

Hi @mbrauninger, thanks for the detailed write-up!

Currently there's no way to select among predefined image values by name (e.g., setting "hat02" on an image property). This isn't a React Native limitation — the underlying native Rive SDKs (both iOS and Android, including the newer experimental APIs) only support setting image properties by providing decoded image bytes. There's no setByName() or similar API to pick from embedded image values.

Your current approach using RiveImages.loadFromBytesAsync → imageProperty.set() is the intended way to do this today.

This would need to be added at the native runtime level first before we could expose it in React Native.