Skip to content

Commit 72caffb

Browse files
authored
docs(react-native): add data binding artboards documentation (#358)
## Summary - Add React Native code example for artboard data binding in the new runtime - Add React Native link to the data binding artboards demo card Related: rive-app/rive-nitro-react-native#95
1 parent 853956a commit 72caffb

2 files changed

Lines changed: 16 additions & 2 deletions

File tree

runtimes/data-binding.mdx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3011,7 +3011,20 @@ Artboard properties allows you to swap out entire components at runtime. This is
30113011
<Tab title="React Native">
30123012
<Tabs>
30133013
<Tab title="New Runtime (Recommended)">
3014-
<Note>Coming soon</Note>
3014+
<Info>
3015+
See the [React Native data binding artboards example](https://github.com/rive-app/rive-nitro-react-native/blob/main/example/src/pages/DataBindingArtboardsExample.tsx).
3016+
</Info>
3017+
Artboard properties work with the `BindableArtboard` class. Use `getBindableArtboard` on a `RiveFile` to create a bindable reference, then set it on the artboard property.
3018+
3019+
```typescript
3020+
// Get artboard property from view model instance
3021+
const artboardProp = instance.artboardProperty('CharacterArtboard');
3022+
3023+
// Create a bindable artboard and set it
3024+
const bindableArtboard = riveFile.getBindableArtboard('Character 1');
3025+
artboardProp?.set(bindableArtboard);
3026+
```
3027+
30153028
</Tab>
30163029
<Tab title="Legacy Runtime">
30173030
<Warning>

snippets/demos.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ export const Demos = ({
3232
web: 'https://codesandbox.io/p/sandbox/rive-js-data-binding-artboards-jx3pf9?file=%2Fsrc%2Findex.mjs%3A5%2C19',
3333
react:
3434
'https://codesandbox.io/p/sandbox/rive-react-data-binding-artboards-kmvzh8?file=%2Fsrc%2FApp.tsx',
35-
flutter: 'https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding_artboards.dart'
35+
flutter: 'https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding_artboards.dart',
36+
reactNative: 'https://github.com/rive-app/rive-nitro-react-native/blob/main/example/src/pages/DataBindingArtboardsExample.tsx'
3637
},
3738
source: [
3839
"https://rive.app/marketplace/24641-46042-data-binding-artboards/",

0 commit comments

Comments
 (0)