exodeui-react-native

The React Native Runtime for the ExodeUI Animation Engine. Render ExodeUI animations natively using Skia.

Installation

npm install exodeui-react-native @shopify/react-native-skia
# or
yarn add exodeui-react-native @shopify/react-native-skia

Setup

Ensure you have configured @shopify/react-native-skia in your project according to their installation guide.

Basic Usage

import { ExodeUIView } from 'exodeui-react-native';
import animationData from './my-animation.json';

function App() {
  return (
    <ExodeUIView 
      artboard={animationData} 
      style={{ width: 300, height: 300 }}
    />
  );
}

API Reference

<ExodeUIView />

| Prop | Type | Default | Description | |------|------|---------|-------------| | artboard | object | undefined | The JSON animation data object. | | style | ViewStyle | - | Styles for the container view. | | onReady | (engine: ExodeUIEngine) => void | undefined | Callback fired when the engine is initialized. |

ExodeUIEngine (Accessed via onReady)

The engine instance allows you to interact with the animation, respond to events, and update data at runtime.

Component Listeners

Register callbacks for specific interactive components:

• setButtonClickCallback(cb: (name, id) => void): Fired when a button is clicked.
• setToggleCallback(cb: (name, checked) => void): Fired when a toggle switch changes state.
• setInputChangeCallback(cb: (name, text) => void): Fired when an InputBox text is modified.
• setGraphPointClickCallback(cb: (event) => void): Fired when a point on a LineGraph is clicked. Provides pointIndex, value, and label.
• setTriggerCallback(cb: (trigger, animation) => void): Fired when a state machine trigger is activated.

Runtime Updaters

Modify artboard state and data dynamically:

• updateInput(nameOrId, value): Updates a specific state machine input (Number, Boolean, or Trigger).
• updateGraphData(nameOrId, data: number[]): Updates the dataset for a LineGraph component.
• updateObjectOptions(id, options): Modifies component-specific options (e.g., list items, dropdown options).
• updateConstraint(objectId, index, properties): Adjusts constraints (e.g., spring stiffness/damping) at runtime.

Advanced Functions

• setLayout(fit, alignment): Change the artboard fit (Contain, Cover, Fill) and alignment.
• getActiveStateIds(layerName): Returns the currently active state IDs for a state machine layer.
• reset(): Resets all object states and inputs to their artboard defaults.

Examples

Responding to a Button Click

<ExodeUIView
  artboard={myArtboard}
  onReady={(engine) => {
    engine.setButtonClickCallback((name, id) => {
      console.log(`Button "${name}" clicked!`);
    });
  }}
/>

Feeding Real-time Data to a Graph

<ExodeUIView
  artboard={myArtboard}
  onReady={(engine) => {
    // Update graph every second
    setInterval(() => {
      const nextData = getLiveSensorData();
      engine.updateGraphData("LiveGraph", nextData);
    }, 1000);
  }}
/>

License

MIT