Out of band assets #285
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import * as React from 'react'; | ||
| import { SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native'; | ||
| import Rive, { Fit, RNRiveError } from 'rive-react-native'; | ||
|
|
||
| export default function StateMachine() { | ||
| return ( | ||
| <SafeAreaView style={styles.safeAreaViewContainer}> | ||
| <ScrollView contentContainerStyle={styles.container}> | ||
| <Rive | ||
| autoplay={true} | ||
| fit={Fit.Contain} | ||
| style={styles.box} | ||
| stateMachineName="State Machine 1" | ||
| // You can use the `assetsHandled` prop to load in external assets from a URI | ||
| // or bundled asset on the native platform (iOS and Android) | ||
| // or as a source loaded directly from JavaScript. | ||
| // | ||
| // Below demonstrates various ways to load in the same asset | ||
| // located in different places. Its not needed to store the same | ||
| // asset in all these locations, but this example does that for | ||
| // demonstration purposes. | ||
| // | ||
| // The key of the map is the unique asset identifier (as exported in the Editor), | ||
| // which is a combination of the asset name and its unique identifier. | ||
| assetsHandled={{ | ||
| 'Inter-594377': { | ||
| source: require('./assets/Inter-594377.ttf'), | ||
| // source: { | ||
| // fileName: 'Inter-594377.ttf', | ||
| // path: 'fonts', // only needed for Android assets | ||
| // }, | ||
| }, | ||
| 'referenced-image-2929282': { | ||
|
There was a problem hiding this comment. Though I'd prefer not to need the ID, I think using it by default is probably necessary, given the fact that it's possible to have multiple assets with the same name. I could see users being very confused when both fonts named I really like the idea of being able to override the default behavior with There was a problem hiding this comment. For the same fonts (or asset) we will use the same ID! You also have the option to rename these to anything you'd like. Expanding this APIs ability is something we can also add in the future, if needed. |
||
| source: require('./assets/referenced-image-2929282.png'), | ||
| // source: { | ||
| // uri: 'https://picsum.photos/id/270/500/500', | ||
| // }, | ||
| // source: { | ||
| // fileName: 'referenced-image-2929282.png', | ||
| // path: 'images', // only needed for Android assets | ||
| // }, | ||
| }, | ||
| 'referenced_audio-2929340': { | ||
|
There was a problem hiding this comment. There's no scenario where the asset IDs might change, is there? For example, if the Rive file gets copied or if you reimport a PSD? That could be painful if you have a giant object with ID's included. There was a problem hiding this comment. That's why the approach for the other runtimes are a callback mechanism where you can read the name + id and query the file. That's not possible for React Native at this stage, which is why this API is different. The best way to circumvent this is to provide a "name" only fallback and forgo the id |
||
| source: require('./assets/referenced_audio-2929340.wav'), | ||
| // source: { | ||
| // fileName: 'referenced_audio-2929340.wav', | ||
| // path: 'audio', // only needed for Android assets | ||
| // }, | ||
| }, | ||
| }} | ||
| artboardName="Artboard" | ||
| resourceName={'out_of_band'} | ||
| onError={(riveError: RNRiveError) => { | ||
| console.log(riveError); | ||
| }} | ||
| /> | ||
| <Text> | ||
| Load in an external asset from a URL, or bundled asset on the native | ||
| platform, or as a source loaded directly from JavaScript. | ||
| </Text> | ||
| </ScrollView> | ||
| </SafeAreaView> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| safeAreaViewContainer: { | ||
| flex: 1, | ||
| }, | ||
| container: { | ||
| flexGrow: 1, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| marginBottom: 150, | ||
| padding: 10, | ||
| }, | ||
| box: { | ||
| width: '100%', | ||
| height: 500, | ||
| marginVertical: 20, | ||
| }, | ||
| }); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's your thinking on the name
assetsHandled? My first thought would be to call thisreferencedAssetsto align it with the naming in the editor, but maybe that's too restricting.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've also been toying with thinking of a different name for this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like
referencedAssetsas a name!There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done