chore: add an expo based example as well

.gitignore

@@ -71,6 +71,8 @@ android/keystores/debug.keystore
 
 # Expo
 .expo/
+expo-example/ios
+expo-example/android
 
 # Turborepo
 .turbo/

eslint.config.mjs

@@ -20,6 +20,7 @@ export default defineConfig([
     plugins: { prettier },
     rules: {
       'react/react-in-jsx-scope': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
       'prettier/prettier': [
         'error',
         {

example/babel.config.js

@@ -7,6 +7,7 @@ const root = path.resolve(__dirname, '..');
 module.exports = getConfig(
   {
     presets: ['module:@react-native/babel-preset'],
+    plugins: [['babel-plugin-react-compiler', {}]],
   },
   { root, pkg }
 );

example/package.json

@@ -30,6 +30,7 @@
     "@react-native/metro-config": "0.79.2",
     "@react-native/typescript-config": "0.79.2",
     "@types/react": "^19.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
     "react-native-builder-bob": "^0.40.10"
   },
   "engines": {

example/src/App.tsx

@@ -7,23 +7,12 @@ import {
 } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import RiveFileLoadingExample from './pages/RiveFileLoadingExample';
-import DataBindingExample from './pages/RiveDataBindingExample';
-import TemplatePage from './pages/TemplatePage';
-import EventsExample from './pages/RiveEventsExample';
-import StateMachineInputsExample from './pages/RiveStateMachineInputsExample';
-import TextRunExample from './pages/RiveTextRunExample';
-import OutOfBandAssets from './pages/OutOfBandAssets';
+import { PagesList } from './PagesList';
 
 type RootStackParamList = {
   Home: undefined;
-  RiveFileLoading: undefined;
-  RiveDataBinding: undefined;
-  RiveEvents: undefined;
-  RiveStateMachineInputs: undefined;
-  RiveTextRun: undefined;
-  Template: undefined;
-  OutOfBandAssets: undefined;
+} & {
+  [K in (typeof PagesList)[number]['id']]: undefined;
 };
 
 const Stack = createStackNavigator<RootStackParamList>();
@@ -33,50 +22,15 @@ function HomeScreen({ navigation }: { navigation: any }) {
     <ScrollView style={styles.container}>
       <Text style={styles.header}>Rive React Native Examples</Text>
       <View style={styles.buttonContainer}>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => navigation.navigate('RiveFileLoading')}
-        >
-          <Text style={styles.buttonText}>Rive File Loading Examples</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => navigation.navigate('RiveDataBinding')}
-        >
-          <Text style={styles.buttonText}>Rive Data Binding Example</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => navigation.navigate('RiveEvents')}
-        >
-          <Text style={styles.buttonText}>Rive Events Example</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => navigation.navigate('RiveStateMachineInputs')}
-        >
-          <Text style={styles.buttonText}>
-            Rive State Machine Inputs Example
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => navigation.navigate('RiveTextRun')}
-        >
-          <Text style={styles.buttonText}>Rive Text Run Example</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => navigation.navigate('OutOfBandAssets')}
-        >
-          <Text style={styles.buttonText}>Out of band assets</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => navigation.navigate('Template')}
-        >
-          <Text style={styles.buttonText}>Template Page</Text>
-        </TouchableOpacity>
+        {PagesList.map(({ id, name }) => (
+          <TouchableOpacity
+            key={id}
+            style={styles.button}
+            onPress={() => navigation.navigate(id)}
+          >
+            <Text style={styles.buttonText}>{name}</Text>
+          </TouchableOpacity>
+        ))}
       </View>
     </ScrollView>
   );
@@ -101,41 +55,14 @@ export default function App() {
           component={HomeScreen}
           options={{ title: 'Rive Examples' }}
         />
-        <Stack.Screen
-          name="RiveFileLoading"
-          component={RiveFileLoadingExample}
-          options={{ title: 'Rive File Loading' }}
-        />
-        <Stack.Screen
-          name="RiveDataBinding"
-          component={DataBindingExample}
-          options={{ title: 'Rive Data Binding' }}
-        />
-        <Stack.Screen
-          name="RiveEvents"
-          component={EventsExample}
-          options={{ title: 'Rive Events' }}
-        />
-        <Stack.Screen
-          name="RiveStateMachineInputs"
-          component={StateMachineInputsExample}
-          options={{ title: 'Rive State Machine Inputs' }}
-        />
-        <Stack.Screen
-          name="RiveTextRun"
-          component={TextRunExample}
-          options={{ title: 'Rive Text Runs' }}
-        />
-        <Stack.Screen
-          name="OutOfBandAssets"
-          component={OutOfBandAssets}
-          options={{ title: 'Out of Band Asset' }}
-        />
-        <Stack.Screen
-          name="Template"
-          component={TemplatePage}
-          options={{ title: 'Template' }}
-        />
+        {PagesList.map(({ id, component, name }) => (
+          <Stack.Screen
+            key={id}
+            name={id}
+            component={component}
+            options={{ title: name }}
+          />
+        ))}
       </Stack.Navigator>
     </NavigationContainer>
   );

example/src/PagesList.ts

@@ -0,0 +1,23 @@
+import type { Metadata } from './helpers/metadata';
+import * as Pages from './pages';
+
+type PageIds = keyof typeof Pages;
+type PageType = React.ComponentType & { metadata?: Metadata };
+
+const PageEntries = Object.entries(Pages) as [PageIds, PageType][];
+
+export type PageItem = {
+  id: PageIds;
+  name: string;
+  description: string;
+  component: React.ComponentType;
+};
+
+const PagesList: PageItem[] = PageEntries.map(([key, Component]) => ({
+  id: key,
+  name: Component.metadata?.name ?? key,
+  description: Component.metadata?.description ?? '',
+  component: Component,
+}));
+
+export { PagesList };

example/src/helpers/metadata.ts

@@ -0,0 +1,4 @@
+export type Metadata = {
+  name: string;
+  description: string;
+};

example/src/pages/OutOfBandAssets.tsx

@@ -13,6 +13,7 @@ import {
   RiveView,
 } from 'react-native-rive';
 import { Picker } from '@react-native-picker/picker';
+import { type Metadata } from '../helpers/metadata';
 
 export default function StateMachine() {
   const [uri, setUri] = React.useState('https://picsum.photos/id/372/500/500');
@@ -142,3 +143,9 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch',
   },
 });
+
+StateMachine.metadata = {
+  name: 'Out-of-Band Assets',
+  description:
+    'Shows how to load referenced assets like fonts and images that are not embedded in the Rive file',
+} satisfies Metadata;

example/src/pages/RiveDataBindingExample.tsx

@@ -12,6 +12,7 @@ import {
   useRiveTrigger,
   useRiveFile,
 } from 'react-native-rive';
+import { type Metadata } from '../helpers/metadata';
 
 export default function WithRiveFile() {
   const { riveFile, isLoading, error } = useRiveFile(
@@ -113,6 +114,12 @@ function DataBindingExample({
   );
 }
 
+WithRiveFile.metadata = {
+  name: 'Data Binding',
+  description:
+    'Shows data binding with view models, including number, string, color properties and triggers',
+} satisfies Metadata;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

example/src/pages/RiveEventsExample.tsx

@@ -8,6 +8,7 @@ import {
   type RiveEvent,
   RiveEventType,
 } from 'react-native-rive';
+import { type Metadata } from '../helpers/metadata';
 
 export default function EventsExample() {
   const { riveViewRef, setHybridRef } = useRive();
@@ -140,3 +141,8 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
 });
+
+EventsExample.metadata = {
+  name: 'Events',
+  description: 'Demonstrates how to listen to and handle Rive events',
+} satisfies Metadata;

example/src/pages/RiveFileLoadingExample.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native-rive';
 import { useState, useEffect } from 'react';
 import { downloadFileAsArrayBuffer } from '../helpers/fileHelpers';
+import { type Metadata } from '../helpers/metadata';
 
 const LOADING_METHODS = {
   SOURCE: 'Source',
@@ -141,6 +142,12 @@ export default function RiveFileLoadingExample() {
   );
 }
 
+RiveFileLoadingExample.metadata = {
+  name: 'File Loading',
+  description:
+    'Demonstrates different methods to load Rive files: from source, URL, resource, and ArrayBuffer',
+} satisfies Metadata;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

example/src/pages/RiveStateMachineInputsExample.tsx

@@ -1,6 +1,7 @@
 import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
 import { useEffect } from 'react';
 import { Fit, RiveView, useRive, useRiveFile } from 'react-native-rive';
+import { type Metadata } from '../helpers/metadata';
 
 export default function StateMachineInputsExample() {
   const { riveViewRef, setHybridRef } = useRive();
@@ -82,3 +83,9 @@ const styles = StyleSheet.create({
     padding: 20,
   },
 });
+
+StateMachineInputsExample.metadata = {
+  name: 'State Machine Inputs',
+  description:
+    'Shows how to get and set state machine input values programmatically',
+} satisfies Metadata;

example/src/pages/RiveTextRunExample.tsx

@@ -1,6 +1,7 @@
 import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
 import { useEffect } from 'react';
 import { Fit, RiveView, useRive, useRiveFile } from 'react-native-rive';
+import { type Metadata } from '../helpers/metadata';
 
 export default function TextRunExample() {
   const { riveViewRef, setHybridRef } = useRive();
@@ -79,3 +80,9 @@ const styles = StyleSheet.create({
     padding: 20,
   },
 });
+
+TextRunExample.metadata = {
+  name: 'Text Run',
+  description:
+    'Demonstrates getting and setting text run values in Rive animations',
+} satisfies Metadata;

example/src/pages/TemplatePage.tsx

@@ -1,4 +1,5 @@
 import { View, Text, StyleSheet } from 'react-native';
+import { type Metadata } from '../helpers/metadata';
 
 export default function TemplatePage() {
   return (
@@ -9,6 +10,11 @@ export default function TemplatePage() {
   );
 }
 
+TemplatePage.metadata = {
+  name: 'Template',
+  description: 'A template page for creating new Rive examples',
+} satisfies Metadata;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

example/src/pages/index.ts

@@ -0,0 +1,7 @@
+export { default as RiveFileLoadingExample } from './RiveFileLoadingExample';
+export { default as DataBindingExample } from './RiveDataBindingExample';
+export { default as TemplatePage } from './TemplatePage';
+export { default as EventsExample } from './RiveEventsExample';
+export { default as StateMachineInputsExample } from './RiveStateMachineInputsExample';
+export { default as TextRunExample } from './RiveTextRunExample';
+export { default as OutOfBandAssets } from './OutOfBandAssets';

expo-example/.gitignore

@@ -0,0 +1,43 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example
+
+# generated native folders
+/ios
+/android