Mobile
React Native Runtime
High-performance native iOS & Android rendering powered by Shopify React Native Skia and Matter.js physics.
exodeui-react-native
Installation
bash
npm install exodeui-react-native @shopify/react-native-skiaGetting Started
The React Native runtime delivers 60fps hardware-accelerated rendering on mobile devices.
Skia-powered GPU rendering
Gesture & scroll input binding
Matter.js physics engine
Metro Bundler Setup
Wrap your Metro configuration to resolve .exode resource files:
js
// metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { withExode } = require('exodeui-react-native/withExode');
const defaultConfig = getDefaultConfig(__dirname);
const config = {};
module.exports = withExode(mergeConfig(defaultConfig, config));Restart Metro with: npx react-native start --reset-cache
Basic Usage
tsx
import { ExodeUIView } from 'exodeui-react-native';
import splashAnimation from './assets/splash.exode';
function App() {
return (
<ExodeUIView
artboard={splashAnimation}
style={{ width: '100%', height: 400 }}
autoPlay={true}
/>
);
}Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| artboard | object | — | Imported .exode or JSON object |
| src | string | — | Remote URL to fetch artboard JSON |
| style | ViewStyle | — | RN layout styles |
| autoPlay | boolean | true | Enable playback loop |
| fit | 'Contain' | 'Cover' | 'Fill' | 'Contain' | Scaling strategy |
| alignment | 'Center' | 'TopLeft' ... | 'Center' | Layout alignment |
| interactive | boolean | true | Forward gesture events |
| inputs | Record<string, any> | — | Map of input names to reactive values |
| scrollY | number | — | Vertical scroll position binding |
| scrollX | number | — | Horizontal scroll position binding |
Event Listeners
| Event | Arguments | Description |
|---|---|---|
| onReady | (engine) | Fired on setup completion |
| onButtonClick | (name, id) | Fired on canvas button taps |
| onToggle | (name, checked) | Fired on toggle switch changes |
| onInputChange | (name, text) | Fired on text input box changes |
| onGraphPointClick | ({ label, value }) | Fired on chart item taps |
| onTrigger | (name, anim) | Fired when state triggers occur |
Imperative Controls
tsx
// Using engine reference:
engine.updateInput('IsMenuOpen', true);
engine.setInputNumberArray('ChartData', [10, 20, 30, 40]);
engine.updateGraphData('RevenueChart', [100, 200, 150]);
engine.updateObjectOptions('CategoryDropdown', ['A', 'B', 'C']);
engine.setLayout('Cover', 'TopLeft');
engine.seek(2.5); // seek to 2.5s
engine.reset();