feat: add QuickStart example for data binding (#87)

Port of the QuickStart example from rive-react-native to demonstrate
basic data binding with useRiveNumber and useRiveTrigger hooks.

Author: mfazekas

example/assets/rive/quick_start.riv

@@ -0,0 +1,105 @@
+/*
+  Rive React Native Quick Start (Nitro)
+
+  Resources:
+  - Getting Started: https://rive.app/docs/runtimes/react-native/react-native
+  - Data Binding: https://rive.app/docs/runtimes/data-binding
+*/
+
+import { useEffect, useMemo } from 'react';
+import { Button, View, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  RiveView,
+  useRive,
+  useRiveFile,
+  useRiveNumber,
+  useRiveTrigger,
+  Fit,
+  DataBindMode,
+} from '@rive-app/react-native';
+import type { Metadata } from '../helpers/metadata';
+
+export default function QuickStart() {
+  const { riveFile } = useRiveFile(
+    require('../../assets/rive/quick_start.riv')
+  );
+  const { riveViewRef, setHybridRef } = useRive();
+  const viewModelInstance = useMemo(
+    () => riveViewRef?.getViewModelInstance(),
+    [riveViewRef]
+  );
+
+  const { value: health, setValue: setHealth } = useRiveNumber(
+    'health',
+    viewModelInstance
+  );
+
+  const { trigger: gameOverTrigger } = useRiveTrigger(
+    'gameOver',
+    viewModelInstance,
+    { onTrigger: () => console.log('Game Over Triggered') }
+  );
+
+  useEffect(() => {
+    setHealth(9);
+  }, [setHealth]);
+
+  const handleTakeDamage = () => {
+    if (health !== undefined) {
+      setHealth(health - 7);
+      riveViewRef!.play();
+    }
+  };
+
+  const handleMaxHealth = () => {
+    setHealth(100);
+    riveViewRef!.play();
+  };
+
+  const handleGameOver = () => {
+    setHealth(0);
+    gameOverTrigger();
+    riveViewRef!.play();
+  };
+
+  return (
+    <SafeAreaView style={styles.safeAreaViewContainer}>
+      <View style={styles.container}>
+        {riveFile && (
+          <RiveView
+            hybridRef={setHybridRef}
+            file={riveFile}
+            fit={Fit.Layout}
+            style={styles.rive}
+            autoPlay={true}
+            dataBind={DataBindMode.Auto}
+          />
+        )}
+      </View>
+      <Button onPress={handleTakeDamage} title="Take Damage" />
+      <Button onPress={handleMaxHealth} title="Max Health" />
+      <Button onPress={handleGameOver} title="Game Over" />
+    </SafeAreaView>
+  );
+}
+
+QuickStart.metadata = {
+  name: 'Quick Start',
+  description: 'Basic data binding example with health and game over trigger',
+} satisfies Metadata;
+
+const styles = StyleSheet.create({
+  safeAreaViewContainer: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rive: {
+    width: '100%',
+    height: 400,
+  },
+});

example/src/pages/QuickStart.tsx

@@ -1,3 +1,4 @@
+export { default as QuickStart } from './QuickStart';
 export { default as RiveFileLoadingExample } from './RiveFileLoadingExample';
 export { default as DataBindingExample } from './RiveDataBindingExample';
 export { default as TemplatePage } from './TemplatePage';