From e4dbbfa7f8527ac3e08d3690f3eb16cf512d05da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Mon, 12 Jan 2026 19:49:52 +0100
Subject: [PATCH 01/14] refactor(example): restructure app with demos,
 exercisers, reproducers sections

Add category-based organization, order metadata for sorting, last opened persistence, and tests menu placeholder.
---
 .gitignore                                    |   4 +
 example/package.json                          |   1 +
 example/src/App.tsx                           | 127 +++++++++-
 example/src/PagesList.ts                      |  83 ++++++-
 .../DataBindingArtboardsExample.tsx           |  25 +-
 example/src/{pages => demos}/QuickStart.tsx   |   3 +-
 .../{pages => exercisers}/ManyViewModels.tsx  |   2 +-
 .../{pages => exercisers}/MenuListExample.tsx |   2 +-
 .../NestedViewModelExample.tsx                |   2 +-
 .../{pages => exercisers}/OutOfBandAssets.tsx |   2 +-
 .../OutOfBandAssetsWithSuspense.tsx           |   2 +-
 .../ResponsiveLayouts.tsx                     |   2 +-
 .../RiveDataBindingExample.tsx                |   2 +-
 .../RiveEventsExample.tsx                     |   2 +-
 .../RiveFileLoadingExample.tsx                |   4 +-
 .../RiveStateMachineInputsExample.tsx         |   2 +-
 .../RiveTextRunExample.tsx                    |   2 +-
 .../ScriptingExample.tsx                      |   0
 example/src/helpers/metadata.ts               |   4 -
 .../src/pages/SharedValueListenerExample.tsx  | 232 ------------------
 .../Template.tsx}                             |   2 +-
 example/src/reproducers/local/.gitkeep        |   0
 .../src/{helpers => shared}/fileHelpers.ts    |   0
 example/src/shared/metadata.ts                |   5 +
 example/src/{pages => tests}/TestsPage.tsx    |   2 +-
 expo-example/app/index.tsx                    | 149 +++++++++--
 expo-example/package.json                     |   1 +
 yarn.lock                                     |  35 ++-
 28 files changed, 383 insertions(+), 314 deletions(-)
 rename example/src/{pages => demos}/DataBindingArtboardsExample.tsx (91%)
 rename example/src/{pages => demos}/QuickStart.tsx (97%)
 rename example/src/{pages => exercisers}/ManyViewModels.tsx (99%)
 rename example/src/{pages => exercisers}/MenuListExample.tsx (99%)
 rename example/src/{pages => exercisers}/NestedViewModelExample.tsx (99%)
 rename example/src/{pages => exercisers}/OutOfBandAssets.tsx (98%)
 rename example/src/{pages => exercisers}/OutOfBandAssetsWithSuspense.tsx (99%)
 rename example/src/{pages => exercisers}/ResponsiveLayouts.tsx (98%)
 rename example/src/{pages => exercisers}/RiveDataBindingExample.tsx (98%)
 rename example/src/{pages => exercisers}/RiveEventsExample.tsx (98%)
 rename example/src/{pages => exercisers}/RiveFileLoadingExample.tsx (97%)
 rename example/src/{pages => exercisers}/RiveStateMachineInputsExample.tsx (97%)
 rename example/src/{pages => exercisers}/RiveTextRunExample.tsx (97%)
 rename example/src/{pages => exercisers}/ScriptingExample.tsx (100%)
 delete mode 100644 example/src/helpers/metadata.ts
 delete mode 100644 example/src/pages/SharedValueListenerExample.tsx
 rename example/src/{pages/TemplatePage.tsx => reproducers/Template.tsx} (93%)
 create mode 100644 example/src/reproducers/local/.gitkeep
 rename example/src/{helpers => shared}/fileHelpers.ts (100%)
 create mode 100644 example/src/shared/metadata.ts
 rename example/src/{pages => tests}/TestsPage.tsx (99%)

diff --git a/.gitignore b/.gitignore
index e22a908a..782cb7ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -86,3 +86,7 @@ android/generated
 
 # ktlint binary cache
 .ktlint/
+
+# Local reproducers (not checked in)
+example/src/reproducers/local/*
+!example/src/reproducers/local/.gitkeep
diff --git a/example/package.json b/example/package.json
index 39cbb3f9..7018208b 100644
--- a/example/package.json
+++ b/example/package.json
@@ -12,6 +12,7 @@
     "test:harness:android": "react-native-harness --harnessRunner android"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "^2.1.2",
     "@react-native-picker/picker": "^2.11.4",
     "@react-navigation/native": "^7.1.9",
     "@react-navigation/stack": "^7.3.2",
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 8291510c..5e282d45 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,13 +1,23 @@
+import { useEffect, useState } from 'react';
 import {
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
   ScrollView,
+  Alert,
 } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import { PagesList } from './PagesList';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {
+  PagesList,
+  PagesListByCategory,
+  type PageItem,
+  type Category,
+} from './PagesList';
+
+const LAST_OPENED_KEY = '@rive_example_last_opened';
 
 type RootStackParamList = {
   Home: undefined;
@@ -17,21 +27,92 @@ type RootStackParamList = {
 
 const Stack = createStackNavigator<RootStackParamList>();
 
+function HeaderMenuButton() {
+  return (
+    <TouchableOpacity
+      onPress={() => Alert.alert('Tests', 'TODO: Run tests')}
+      style={styles.headerButton}
+    >
+      <Text style={styles.headerButtonText}>⚙</Text>
+    </TouchableOpacity>
+  );
+}
+
+const CATEGORY_LABELS: Record<Category, string> = {
+  demos: 'Demos',
+  exercisers: 'Exercisers',
+  tests: 'Tests',
+  reproducers: 'Reproducers',
+};
+
+function Section({
+  title,
+  pages,
+  onNavigate,
+}: {
+  title: string;
+  pages: PageItem[];
+  onNavigate: (id: string) => void;
+}) {
+  if (pages.length === 0) return null;
+
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>{title}</Text>
+      {pages.map(({ id, name }) => (
+        <TouchableOpacity
+          key={id}
+          style={styles.button}
+          onPress={() => onNavigate(id)}
+        >
+          <Text style={styles.buttonText}>{name}</Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}
+
 function HomeScreen({ navigation }: { navigation: any }) {
+  const [lastOpened, setLastOpened] = useState<PageItem | null>(null);
+
+  useEffect(() => {
+    AsyncStorage.getItem(LAST_OPENED_KEY).then((id) => {
+      if (id) {
+        const page = PagesList.find((p) => p.id === id);
+        if (page) setLastOpened(page);
+      }
+    });
+  }, []);
+
+  const handleNavigate = (id: string) => {
+    AsyncStorage.setItem(LAST_OPENED_KEY, id);
+    navigation.navigate(id);
+  };
+
   return (
     <ScrollView style={styles.container}>
       <Text style={styles.header}>Rive React Native Examples</Text>
-      <View style={styles.buttonContainer}>
-        {PagesList.map(({ id, name }) => (
+
+      {lastOpened && (
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Recent</Text>
           <TouchableOpacity
-            key={id}
             style={styles.button}
-            onPress={() => navigation.navigate(id)}
+            onPress={() => handleNavigate(lastOpened.id)}
           >
-            <Text style={styles.buttonText}>{name}</Text>
+            <Text style={styles.buttonText}>{lastOpened.name}</Text>
           </TouchableOpacity>
-        ))}
-      </View>
+        </View>
+      )}
+
+      {(Object.keys(CATEGORY_LABELS) as Category[]).map((category) => (
+        <Section
+          key={category}
+          title={CATEGORY_LABELS[category]}
+          pages={PagesListByCategory[category]}
+          onNavigate={handleNavigate}
+        />
+      ))}
     </ScrollView>
   );
 }
@@ -53,7 +134,10 @@ export default function App() {
         <Stack.Screen
           name="Home"
           component={HomeScreen}
-          options={{ title: 'Rive Examples' }}
+          options={{
+            title: 'Rive Examples',
+            headerRight: HeaderMenuButton,
+          }}
         />
         {PagesList.map(({ id, component, name }) => (
           <Stack.Screen
@@ -78,16 +162,25 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     textAlign: 'center',
     marginTop: 40,
-    marginBottom: 30,
+    marginBottom: 20,
+  },
+  section: {
+    paddingHorizontal: 20,
+    marginBottom: 20,
   },
-  buttonContainer: {
-    padding: 20,
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#666',
+    marginBottom: 10,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
   },
   button: {
     backgroundColor: '#007AFF',
     padding: 15,
     borderRadius: 10,
-    marginBottom: 15,
+    marginBottom: 10,
   },
   buttonText: {
     color: '#fff',
@@ -95,4 +188,12 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     textAlign: 'center',
   },
+  headerButton: {
+    marginRight: 16,
+    padding: 4,
+  },
+  headerButtonText: {
+    fontSize: 22,
+    color: '#fff',
+  },
 });
diff --git a/example/src/PagesList.ts b/example/src/PagesList.ts
index fdb08c05..58190be5 100644
--- a/example/src/PagesList.ts
+++ b/example/src/PagesList.ts
@@ -1,25 +1,82 @@
-import type { Metadata } from './helpers/metadata';
+import type { Metadata } from './shared/metadata';
 
 type PageType = React.ComponentType & { metadata?: Metadata };
 
+export type Category = 'demos' | 'exercisers' | 'tests' | 'reproducers';
+
 export type PageItem = {
   id: string;
   name: string;
   description: string;
+  order: number;
+  category: Category;
   component: React.ComponentType;
 };
 
-const pagesContext = require.context('./pages', false, /\.tsx$/);
+function loadPagesFromContext(
+  context: __MetroModuleApi.RequireContext,
+  category: Category
+): PageItem[] {
+  return context
+    .keys()
+    .map((key) => {
+      const module = context(key) as { default: PageType };
+      const Component = module.default;
+      const id = key.replace(/^\.\//, '').replace(/\.tsx$/, '');
+
+      return {
+        id,
+        name: Component.metadata?.name ?? id,
+        description: Component.metadata?.description ?? '',
+        order: Component.metadata?.order ?? 999,
+        category,
+        component: Component,
+      };
+    })
+    .sort((a, b) => a.order - b.order);
+}
+
+const demosContext = require.context('./demos', false, /\.tsx$/);
+const exercisersContext = require.context('./exercisers', false, /\.tsx$/);
+const testsContext = require.context('./tests', false, /\.tsx$/);
+const reproducersContext = require.context('./reproducers', false, /\.tsx$/);
+
+// Try to load local reproducers (gitignored)
+let localReproducersContext: __MetroModuleApi.RequireContext | null = null;
+try {
+  localReproducersContext = require.context(
+    './reproducers/local',
+    false,
+    /\.tsx$/
+  );
+} catch {
+  // local reproducers folder may be empty or not exist
+}
 
-export const PagesList: PageItem[] = pagesContext.keys().map((key) => {
-  const module = pagesContext(key) as { default: PageType };
-  const Component = module.default;
-  const id = key.replace(/^\.\//, '').replace(/\.tsx$/, '');
+export const DemosList = loadPagesFromContext(demosContext, 'demos');
+export const ExercisersList = loadPagesFromContext(
+  exercisersContext,
+  'exercisers'
+);
+export const ReproducersList = [
+  ...loadPagesFromContext(reproducersContext, 'reproducers'),
+  ...(localReproducersContext
+    ? loadPagesFromContext(localReproducersContext, 'reproducers')
+    : []),
+];
 
-  return {
-    id,
-    name: Component.metadata?.name ?? id,
-    description: Component.metadata?.description ?? '',
-    component: Component,
-  };
-});
+export const TestsList = loadPagesFromContext(testsContext, 'tests');
+
+export const PagesList: PageItem[] = [
+  ...DemosList,
+  ...ExercisersList,
+  ...TestsList,
+  ...ReproducersList,
+];
+
+export const PagesListByCategory: Record<Category, PageItem[]> = {
+  demos: DemosList,
+  exercisers: ExercisersList,
+  tests: TestsList,
+  reproducers: ReproducersList,
+};
diff --git a/example/src/pages/DataBindingArtboardsExample.tsx b/example/src/demos/DataBindingArtboardsExample.tsx
similarity index 91%
rename from example/src/pages/DataBindingArtboardsExample.tsx
rename to example/src/demos/DataBindingArtboardsExample.tsx
index 8ed7a177..b1e6350b 100644
--- a/example/src/pages/DataBindingArtboardsExample.tsx
+++ b/example/src/demos/DataBindingArtboardsExample.tsx
@@ -13,22 +13,17 @@ import {
   type RiveFile,
   type BindableArtboard,
 } from '@rive-app/react-native';
-import { type Metadata } from '../helpers/metadata';
+import { type Metadata } from '../shared/metadata';
 
-/**
- * Data Binding Artboards Example
- *
- * Demonstrates swapping artboards at runtime using data binding.
- * Based on: https://rive.app/docs/runtimes/data-binding#artboards
- *
- * The main Rive file includes a view model with a property of type `Artboard`
- * called "CharacterArtboard". This property can be set to any artboard from
- * either the main file or an external file.
- *
- * Rive source files:
- * - Main: https://rive.app/marketplace/24641-46042-data-binding-artboards/
- * - Assets: https://rive.app/marketplace/24642-47536-data-binding-artboards/
- */
+/*
+  Data Binding Artboards
+
+  Marketplace:
+  - Main: https://rive.app/marketplace/24641-46042-data-binding-artboards/
+  - Assets: https://rive.app/marketplace/24642-47536-data-binding-artboards/
+
+  Docs: https://rive.app/docs/runtimes/data-binding#artboards
+*/
 
 export default function DataBindingArtboardsExample() {
   // Main scene file - contains the Card view model with CharacterArtboard property
diff --git a/example/src/pages/QuickStart.tsx b/example/src/demos/QuickStart.tsx
similarity index 97%
rename from example/src/pages/QuickStart.tsx
rename to example/src/demos/QuickStart.tsx
index 3b37eb22..95c2493e 100644
--- a/example/src/pages/QuickStart.tsx
+++ b/example/src/demos/QuickStart.tsx
@@ -16,7 +16,7 @@ import {
   useViewModelInstance,
   Fit,
 } from '@rive-app/react-native';
-import type { Metadata } from '../helpers/metadata';
+import type { Metadata } from '../shared/metadata';
 
 export default function QuickStart() {
   const { riveFile } = useRiveFile(
@@ -73,6 +73,7 @@ export default function QuickStart() {
 QuickStart.metadata = {
   name: 'Quick Start',
   description: 'Basic data binding example with health and game over trigger',
+  order: 0,
 } satisfies Metadata;
 
 const styles = StyleSheet.create({
diff --git a/example/src/pages/ManyViewModels.tsx b/example/src/exercisers/ManyViewModels.tsx
similarity index 99%
rename from example/src/pages/ManyViewModels.tsx
rename to example/src/exercisers/ManyViewModels.tsx
index 5d2e32d6..0fd994f5 100644
--- a/example/src/pages/ManyViewModels.tsx
+++ b/example/src/exercisers/ManyViewModels.tsx
@@ -1,6 +1,6 @@
 import { StyleSheet, View, Text, TouchableOpacity, Button } from 'react-native';
 import { useState, useMemo, useRef, useEffect } from 'react';
-import type { Metadata } from '../helpers/metadata';
+import type { Metadata } from '../shared/metadata';
 import {
   DataBindMode,
   RiveView,
diff --git a/example/src/pages/MenuListExample.tsx b/example/src/exercisers/MenuListExample.tsx
similarity index 99%
rename from example/src/pages/MenuListExample.tsx
rename to example/src/exercisers/MenuListExample.tsx
index 6d5d4436..c6cf5dfc 100644
--- a/example/src/pages/MenuListExample.tsx
+++ b/example/src/exercisers/MenuListExample.tsx
@@ -17,7 +17,7 @@ import {
   useRiveList,
   useViewModelInstance,
 } from '@rive-app/react-native';
-import { type Metadata } from '../helpers/metadata';
+import { type Metadata } from '../shared/metadata';
 
 export default function MenuListExample() {
   const { riveFile, isLoading, error } = useRiveFile(
diff --git a/example/src/pages/NestedViewModelExample.tsx b/example/src/exercisers/NestedViewModelExample.tsx
similarity index 99%
rename from example/src/pages/NestedViewModelExample.tsx
rename to example/src/exercisers/NestedViewModelExample.tsx
index aae1264a..c90ef875 100644
--- a/example/src/pages/NestedViewModelExample.tsx
+++ b/example/src/exercisers/NestedViewModelExample.tsx
@@ -16,7 +16,7 @@ import {
   type RiveFile,
   type RiveViewRef,
 } from '@rive-app/react-native';
-import { type Metadata } from '../helpers/metadata';
+import { type Metadata } from '../shared/metadata';
 
 export default function NestedViewModelExample() {
   const { riveFile, isLoading, error } = useRiveFile(
diff --git a/example/src/pages/OutOfBandAssets.tsx b/example/src/exercisers/OutOfBandAssets.tsx
similarity index 98%
rename from example/src/pages/OutOfBandAssets.tsx
rename to example/src/exercisers/OutOfBandAssets.tsx
index 0fab9ae5..7c3fe7e3 100644
--- a/example/src/pages/OutOfBandAssets.tsx
+++ b/example/src/exercisers/OutOfBandAssets.tsx
@@ -12,7 +12,7 @@ import {
   RiveView,
 } from '@rive-app/react-native';
 import { Picker } from '@react-native-picker/picker';
-import { type Metadata } from '../helpers/metadata';
+import { type Metadata } from '../shared/metadata';
 
 export default function OutOfBandAssetsExample() {
   const [uri, setUri] = React.useState('https://picsum.photos/id/372/500/500');
diff --git a/example/src/pages/OutOfBandAssetsWithSuspense.tsx b/example/src/exercisers/OutOfBandAssetsWithSuspense.tsx
similarity index 99%
rename from example/src/pages/OutOfBandAssetsWithSuspense.tsx
rename to example/src/exercisers/OutOfBandAssetsWithSuspense.tsx
index 2edba225..383c470e 100644
--- a/example/src/pages/OutOfBandAssetsWithSuspense.tsx
+++ b/example/src/exercisers/OutOfBandAssetsWithSuspense.tsx
@@ -15,7 +15,7 @@ import {
   type RiveImage,
 } from '@rive-app/react-native';
 import { Picker } from '@react-native-picker/picker';
-import { type Metadata } from '../helpers/metadata';
+import { type Metadata } from '../shared/metadata';
 
 class ErrorBoundary extends React.Component<
   {
diff --git a/example/src/pages/ResponsiveLayouts.tsx b/example/src/exercisers/ResponsiveLayouts.tsx
similarity index 98%
rename from example/src/pages/ResponsiveLayouts.tsx
rename to example/src/exercisers/ResponsiveLayouts.tsx
index 0cdcde83..92132ad4 100644
--- a/example/src/pages/ResponsiveLayouts.tsx
+++ b/example/src/exercisers/ResponsiveLayouts.tsx
@@ -13,7 +13,7 @@ import {
   useRiveFile,
   type RiveViewRef,
 } from '@rive-app/react-native';
-import { type Metadata } from '../helpers/metadata';
+import { type Metadata } from '../shared/metadata';
 
 /**
  * Demonstrates responsive layouts using Fit.Layout and layoutScaleFactor
diff --git a/example/src/pages/RiveDataBindingExample.tsx b/example/src/exercisers/RiveDataBindingExample.tsx
similarity index 98%
rename from example/src/pages/RiveDataBindingExample.tsx
rename to example/src/exercisers/RiveDataBindingExample.tsx
index 2526ac00..d700eecb 100644
--- a/example/src/pages/RiveDataBindingExample.tsx
+++ b/example/src/exercisers/RiveDataBindingExample.tsx
@@ -11,7 +11,7 @@ import {
   useRiveTrigger,
   useRiveFile,
 } from '@rive-app/react-native';
-import { type Metadata } from '../helpers/metadata';
+import { type Metadata } from '../shared/metadata';
 
 export default function WithRiveFile() {
   const { riveFile, isLoading, error } = useRiveFile(
diff --git a/example/src/pages/RiveEventsExample.tsx b/example/src/exercisers/RiveEventsExample.tsx
similarity index 98%
rename from example/src/pages/RiveEventsExample.tsx
rename to example/src/exercisers/RiveEventsExample.tsx
index dc8fe5ed..413ef290 100644
--- a/example/src/pages/RiveEventsExample.tsx
+++ b/example/src/exercisers/RiveEventsExample.tsx
@@ -8,7 +8,7 @@ import {
   type RiveEvent,
   RiveEventType,
 } from '@rive-app/react-native';
-import { type Metadata } from '../helpers/metadata';
+import { type Metadata } from '../shared/metadata';
 
 /**
  * @deprecated Rive events at runtime is deprecated. Use data binding instead.
diff --git a/example/src/pages/RiveFileLoadingExample.tsx b/example/src/exercisers/RiveFileLoadingExample.tsx
similarity index 97%
rename from example/src/pages/RiveFileLoadingExample.tsx
rename to example/src/exercisers/RiveFileLoadingExample.tsx
index 5c8f91eb..6ea04ab5 100644
--- a/example/src/pages/RiveFileLoadingExample.tsx
+++ b/example/src/exercisers/RiveFileLoadingExample.tsx
@@ -13,8 +13,8 @@ import {
   type RiveFileInput,
 } from '@rive-app/react-native';
 import { useState, useEffect } from 'react';
-import { downloadFileAsArrayBuffer } from '../helpers/fileHelpers';
-import { type Metadata } from '../helpers/metadata';
+import { downloadFileAsArrayBuffer } from '../shared/fileHelpers';
+import { type Metadata } from '../shared/metadata';
 
 const LOADING_METHODS = {
   SOURCE: 'Source',
diff --git a/example/src/pages/RiveStateMachineInputsExample.tsx b/example/src/exercisers/RiveStateMachineInputsExample.tsx
similarity index 97%
rename from example/src/pages/RiveStateMachineInputsExample.tsx
rename to example/src/exercisers/RiveStateMachineInputsExample.tsx
index a410234e..4a0ae8ee 100644
--- a/example/src/pages/RiveStateMachineInputsExample.tsx
+++ b/example/src/exercisers/RiveStateMachineInputsExample.tsx
@@ -1,7 +1,7 @@
 import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
 import { useEffect } from 'react';
 import { Fit, RiveView, useRive, useRiveFile } from '@rive-app/react-native';
-import { type Metadata } from '../helpers/metadata';
+import { type Metadata } from '../shared/metadata';
 
 /**
  * @deprecated Setting state machine inputs at runtime is deprecated. Use data binding instead.
diff --git a/example/src/pages/RiveTextRunExample.tsx b/example/src/exercisers/RiveTextRunExample.tsx
similarity index 97%
rename from example/src/pages/RiveTextRunExample.tsx
rename to example/src/exercisers/RiveTextRunExample.tsx
index df514bb4..d0c98f8a 100644
--- a/example/src/pages/RiveTextRunExample.tsx
+++ b/example/src/exercisers/RiveTextRunExample.tsx
@@ -1,7 +1,7 @@
 import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
 import { useEffect } from 'react';
 import { Fit, RiveView, useRive, useRiveFile } from '@rive-app/react-native';
-import { type Metadata } from '../helpers/metadata';
+import { type Metadata } from '../shared/metadata';
 
 /**
  * @deprecated Setting text run values is deprecated. Use data binding instead.
diff --git a/example/src/pages/ScriptingExample.tsx b/example/src/exercisers/ScriptingExample.tsx
similarity index 100%
rename from example/src/pages/ScriptingExample.tsx
rename to example/src/exercisers/ScriptingExample.tsx
diff --git a/example/src/helpers/metadata.ts b/example/src/helpers/metadata.ts
deleted file mode 100644
index c10991cc..00000000
--- a/example/src/helpers/metadata.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type Metadata = {
-  name: string;
-  description: string;
-};
diff --git a/example/src/pages/SharedValueListenerExample.tsx b/example/src/pages/SharedValueListenerExample.tsx
deleted file mode 100644
index 3a3e4f0e..00000000
--- a/example/src/pages/SharedValueListenerExample.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-import {
-  View,
-  Text,
-  StyleSheet,
-  Button,
-  ActivityIndicator,
-} from 'react-native';
-import { type Metadata } from '../helpers/metadata';
-import Animated, {
-  useSharedValue,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  withSpring,
-} from 'react-native-reanimated';
-import {
-  Gesture,
-  GestureDetector,
-  GestureHandlerRootView,
-} from 'react-native-gesture-handler';
-import { useCallback, useEffect, useMemo } from 'react';
-import {
-  NitroModules,
-  type BoxedHybridObject,
-} from 'react-native-nitro-modules';
-import {
-  Fit,
-  RiveView,
-  useRiveFile,
-  type RiveFile,
-  type RiveViewRef,
-  type ViewModelInstance,
-} from '@rive-app/react-native';
-
-export default function SharedValueListenerExample() {
-  const { riveFile, isLoading, error } = useRiveFile(
-    require('../../assets/rive/movecircle.riv')
-  );
-
-  return (
-    <View style={styles.container}>
-      {isLoading ? (
-        <ActivityIndicator size="large" color="#0000ff" />
-      ) : riveFile ? (
-        <WithViewModelSetup file={riveFile} />
-      ) : (
-        <Text style={styles.errorText}>{error || 'Unexpected error'}</Text>
-      )}
-    </View>
-  );
-}
-
-function WithViewModelSetup({ file }: { file: RiveFile }) {
-  const viewModel = useMemo(() => file.defaultArtboardViewModel(), [file]);
-  const instance = useMemo(
-    () => viewModel?.createDefaultInstance(),
-    [viewModel]
-  );
-
-  if (!instance || !viewModel) {
-    return (
-      <Text style={styles.errorText}>
-        {!viewModel
-          ? 'No view model found'
-          : 'Failed to create view model instance'}
-      </Text>
-    );
-  }
-
-  return <AnimatedRiveExample instance={instance} file={file} />;
-}
-
-function AnimatedRiveExample({
-  instance,
-  file,
-}: {
-  instance: ViewModelInstance;
-  file: RiveFile;
-}) {
-  const progress = useSharedValue(0);
-  const startY = useSharedValue(0);
-  const viewRef = useSharedValue<BoxedHybridObject<RiveViewRef> | null>(null);
-
-  const boxedProperty = useMemo(() => {
-    const posYProperty = instance.numberProperty('posY');
-    if (!posYProperty) {
-      return null;
-    }
-    return NitroModules.box(posYProperty);
-  }, [instance]);
-
-  useAnimatedReaction(
-    () => progress.value,
-    (value: number) => {
-      'worklet';
-      if (!boxedProperty) return;
-      const property = boxedProperty.unbox();
-      property.value = value;
-
-      viewRef.value?.unbox()?.playIfNeeded();
-    },
-    [boxedProperty]
-  );
-
-  const panGesture = Gesture.Pan()
-    .onStart(() => {
-      'worklet';
-      startY.value = progress.value;
-    })
-    .onUpdate((event) => {
-      'worklet';
-      progress.value = startY.value + event.translationY * 3;
-    })
-    .onEnd((event) => {
-      'worklet';
-      // Use velocity from gesture to set initial velocity of spring
-      progress.value = withSpring(progress.value > 400 ? 800 : 0, {
-        damping: 10,
-        stiffness: 100,
-        velocity: event.velocityY * 3,
-      });
-    });
-
-  const circleStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: progress.value / 3 }],
-  }));
-
-  const animateTo800 = useCallback(() => {
-    progress.value = withSpring(800, {
-      damping: 8,
-      stiffness: 80,
-    });
-  }, [progress]);
-
-  const animateTo0 = () => {
-    progress.value = withSpring(0, {
-      damping: 8,
-      stiffness: 80,
-    });
-  };
-
-  useEffect(() => {
-    animateTo800();
-  }, [animateTo800]);
-
-  return (
-    <GestureHandlerRootView style={styles.container}>
-      <Text style={styles.subtitle}>
-        Drag the blue circle to control position. Release to spring with
-        velocity. (Red = Rive, Blue = React Native)
-      </Text>
-
-      <View style={styles.riveContainer}>
-        <RiveView
-          style={styles.rive}
-          autoPlay={true}
-          dataBind={instance}
-          fit={Fit.Layout}
-          layoutScaleFactor={1}
-          file={file}
-          hybridRef={{
-            f: (ref) => {
-              viewRef.value = NitroModules.box(ref);
-            },
-          }}
-        />
-        <GestureDetector gesture={panGesture}>
-          <Animated.View style={[styles.blueCircle, circleStyle]} />
-        </GestureDetector>
-      </View>
-
-      <View style={styles.buttonContainer}>
-        <Button title="Bounce to 800" onPress={animateTo800} />
-        <Button title="Bounce to 0" onPress={animateTo0} />
-      </View>
-    </GestureHandlerRootView>
-  );
-}
-
-SharedValueListenerExample.metadata = {
-  name: 'Reanimated Shared Value',
-  description: 'Drive Rive properties from Reanimated shared values',
-} satisfies Metadata;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    marginTop: 20,
-    marginBottom: 10,
-  },
-  subtitle: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 20,
-    paddingHorizontal: 20,
-  },
-  riveContainer: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  rive: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  errorText: {
-    color: 'red',
-    textAlign: 'center',
-    padding: 20,
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: 20,
-    padding: 20,
-  },
-  blueCircle: {
-    position: 'absolute',
-    left: 50,
-    top: -20,
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'blue',
-  },
-});
diff --git a/example/src/pages/TemplatePage.tsx b/example/src/reproducers/Template.tsx
similarity index 93%
rename from example/src/pages/TemplatePage.tsx
rename to example/src/reproducers/Template.tsx
index e57ea358..e3b4e22a 100644
--- a/example/src/pages/TemplatePage.tsx
+++ b/example/src/reproducers/Template.tsx
@@ -1,5 +1,5 @@
 import { View, Text, StyleSheet } from 'react-native';
-import { type Metadata } from '../helpers/metadata';
+import { type Metadata } from '../shared/metadata';
 
 export default function TemplatePage() {
   return (
diff --git a/example/src/reproducers/local/.gitkeep b/example/src/reproducers/local/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/example/src/helpers/fileHelpers.ts b/example/src/shared/fileHelpers.ts
similarity index 100%
rename from example/src/helpers/fileHelpers.ts
rename to example/src/shared/fileHelpers.ts
diff --git a/example/src/shared/metadata.ts b/example/src/shared/metadata.ts
new file mode 100644
index 00000000..f0b0154b
--- /dev/null
+++ b/example/src/shared/metadata.ts
@@ -0,0 +1,5 @@
+export type Metadata = {
+  name: string;
+  description: string;
+  order?: number; // Lower numbers appear first, undefined = end of list
+};
diff --git a/example/src/pages/TestsPage.tsx b/example/src/tests/TestsPage.tsx
similarity index 99%
rename from example/src/pages/TestsPage.tsx
rename to example/src/tests/TestsPage.tsx
index ae1dc8ea..d6d19fcd 100644
--- a/example/src/pages/TestsPage.tsx
+++ b/example/src/tests/TestsPage.tsx
@@ -9,7 +9,7 @@ import {
 import { getTestCollector } from 'react-native-harness';
 import type { TestSuite, TestCase } from '@react-native-harness/bridge';
 import { useState, useEffect } from 'react';
-import type { Metadata } from '../helpers/metadata';
+import type { Metadata } from '../shared/metadata';
 
 const testContext = require.context('../../__tests__', false, /\.harness\.ts$/);
 
diff --git a/expo-example/app/index.tsx b/expo-example/app/index.tsx
index 7b79d681..a8e93680 100644
--- a/expo-example/app/index.tsx
+++ b/expo-example/app/index.tsx
@@ -1,15 +1,79 @@
-import { StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
+import { useEffect, useState } from 'react';
+import { StyleSheet, ScrollView, TouchableOpacity, Alert } from 'react-native';
 import { useRouter } from 'expo-router';
-import { useState } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { ThemedText } from '@/components/themed-text';
 import { ThemedView } from '@/components/themed-view';
 import { IconSymbol } from '@/components/ui/icon-symbol';
-import { PagesList, type PageItem } from '@example/PagesList';
+import {
+  PagesList,
+  PagesListByCategory,
+  type PageItem,
+  type Category,
+} from '@example/PagesList';
+
+const LAST_OPENED_KEY = '@rive_example_last_opened';
+
+const CATEGORY_LABELS: Record<Category, string> = {
+  demos: 'Demos',
+  exercisers: 'Exercisers',
+  tests: 'Tests',
+  reproducers: 'Reproducers',
+};
+
+function Section({
+  title,
+  pages,
+  onNavigate,
+}: {
+  title: string;
+  pages: PageItem[];
+  onNavigate: (id: string) => void;
+}) {
+  if (pages.length === 0) return null;
+
+  return (
+    <ThemedView style={styles.section}>
+      <ThemedText style={styles.sectionTitle}>{title}</ThemedText>
+      {pages.map((page) => (
+        <TouchableOpacity
+          key={page.id}
+          style={styles.exampleCard}
+          onPress={() => onNavigate(page.id)}
+        >
+          <ThemedView style={styles.cardContainer}>
+            <ThemedView style={styles.cardContent}>
+              <ThemedView style={styles.textContainer}>
+                <ThemedText type="defaultSemiBold" style={styles.cardTitle}>
+                  {page.name}
+                </ThemedText>
+                <ThemedText style={styles.cardDescription}>
+                  {page.description}
+                </ThemedText>
+              </ThemedView>
+              <IconSymbol size={20} name="chevron.right" color="#999" />
+            </ThemedView>
+          </ThemedView>
+        </TouchableOpacity>
+      ))}
+    </ThemedView>
+  );
+}
 
 export default function HomeScreen() {
   const router = useRouter();
   const [showMenu, setShowMenu] = useState(false);
+  const [lastOpened, setLastOpened] = useState<PageItem | null>(null);
+
+  useEffect(() => {
+    AsyncStorage.getItem(LAST_OPENED_KEY).then((id) => {
+      if (id) {
+        const page = PagesList.find((p) => p.id === id);
+        if (page) setLastOpened(page);
+      }
+    });
+  }, []);
 
   const handleInvokeGC = () => {
     if (typeof global.gc === 'function') {
@@ -21,6 +85,16 @@ export default function HomeScreen() {
     setShowMenu(false);
   };
 
+  const handleRunTests = () => {
+    Alert.alert('Tests', 'TODO: Run tests');
+    setShowMenu(false);
+  };
+
+  const handleNavigate = (id: string) => {
+    AsyncStorage.setItem(LAST_OPENED_KEY, id);
+    router.push(`/${id}` as any);
+  };
+
   return (
     <ThemedView style={styles.container}>
       <ThemedView style={styles.header}>
@@ -35,6 +109,9 @@ export default function HomeScreen() {
         </TouchableOpacity>
         {showMenu && (
           <ThemedView style={styles.menu}>
+            <TouchableOpacity onPress={handleRunTests} style={styles.menuItem}>
+              <ThemedText style={styles.menuItemText}>Run Tests</ThemedText>
+            </TouchableOpacity>
             <TouchableOpacity onPress={handleInvokeGC} style={styles.menuItem}>
               <ThemedText style={styles.menuItemText}>Invoke GC</ThemedText>
             </TouchableOpacity>
@@ -46,26 +123,32 @@ export default function HomeScreen() {
         style={styles.scrollView}
         contentContainerStyle={styles.scrollContent}
       >
-        {PagesList.map((page: PageItem) => (
+        {lastOpened && (
           <TouchableOpacity
-            key={page.id}
-            style={styles.exampleCard}
-            onPress={() => router.push(`/${page.id}` as any)}
+            style={styles.recentCard}
+            onPress={() => handleNavigate(lastOpened.id)}
           >
-            <ThemedView style={styles.cardContainer}>
-              <ThemedView style={styles.cardContent}>
-                <ThemedView style={styles.textContainer}>
-                  <ThemedText type="defaultSemiBold" style={styles.cardTitle}>
-                    {page.name}
-                  </ThemedText>
-                  <ThemedText style={styles.cardDescription}>
-                    {page.description}
-                  </ThemedText>
-                </ThemedView>
-                <IconSymbol size={20} name="chevron.right" color="#999" />
-              </ThemedView>
+            <ThemedView style={styles.recentContent}>
+              <IconSymbol
+                size={18}
+                name="clock.arrow.circlepath"
+                color="#666"
+              />
+              <ThemedText type="defaultSemiBold" style={styles.recentTitle}>
+                {lastOpened.name}
+              </ThemedText>
+              <IconSymbol size={20} name="chevron.right" color="#999" />
             </ThemedView>
           </TouchableOpacity>
+        )}
+
+        {(Object.keys(CATEGORY_LABELS) as Category[]).map((category) => (
+          <Section
+            key={category}
+            title={CATEGORY_LABELS[category]}
+            pages={PagesListByCategory[category]}
+            onNavigate={handleNavigate}
+          />
         ))}
       </ScrollView>
     </ThemedView>
@@ -113,6 +196,17 @@ const styles = StyleSheet.create({
   scrollContent: {
     padding: 16,
   },
+  section: {
+    marginBottom: 20,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#666',
+    marginBottom: 10,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
   exampleCard: {
     marginBottom: 8,
     borderRadius: 12,
@@ -122,6 +216,23 @@ const styles = StyleSheet.create({
     backgroundColor: '#F5F5F5',
     borderRadius: 12,
   },
+  recentCard: {
+    marginBottom: 20,
+    borderRadius: 12,
+    overflow: 'hidden',
+    backgroundColor: '#F5F5F5',
+  },
+  recentContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    gap: 10,
+  },
+  recentTitle: {
+    flex: 1,
+    fontSize: 16,
+  },
   cardContent: {
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/expo-example/package.json b/expo-example/package.json
index 8595c4f0..68fecae8 100644
--- a/expo-example/package.json
+++ b/expo-example/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
+    "@react-native-async-storage/async-storage": "^2.1.2",
     "@react-native-picker/picker": "^2.11.4",
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
diff --git a/yarn.lock b/yarn.lock
index d6e5ce9e..88a85896 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3531,6 +3531,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-async-storage/async-storage@npm:^2.1.2":
+  version: 2.2.0
+  resolution: "@react-native-async-storage/async-storage@npm:2.2.0"
+  dependencies:
+    merge-options: ^3.0.4
+  peerDependencies:
+    react-native: ^0.0.0-0 || >=0.65 <1.0
+  checksum: efbb9c801fb7eecfad1568d6a5e9d247db420b8ba8f1789d5b783e679432567a53cf54c7e7b5e6f315276f33d1df297253549e0cefef2e683539df346d2a1f2d
+  languageName: node
+  linkType: hard
+
 "@react-native-community/cli-clean@npm:18.0.0":
   version: 18.0.0
   resolution: "@react-native-community/cli-clean@npm:18.0.0"
@@ -8595,6 +8606,7 @@ __metadata:
   resolution: "expo-example@workspace:expo-example"
   dependencies:
     "@expo/vector-icons": ^15.0.3
+    "@react-native-async-storage/async-storage": ^2.1.2
     "@react-native-picker/picker": ^2.11.4
     "@react-navigation/bottom-tabs": ^7.4.0
     "@react-navigation/elements": ^2.6.3
@@ -10457,6 +10469,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-plain-obj@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "is-plain-obj@npm:2.1.0"
+  checksum: cec9100678b0a9fe0248a81743041ed990c2d4c99f893d935545cfbc42876cbe86d207f3b895700c690ad2fa520e568c44afc1605044b535a7820c1d40e38daa
+  languageName: node
+  linkType: hard
+
 "is-regex@npm:^1.1.4, is-regex@npm:^1.2.1":
   version: 1.2.1
   resolution: "is-regex@npm:1.2.1"
@@ -12029,6 +12048,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"merge-options@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "merge-options@npm:3.0.4"
+  dependencies:
+    is-plain-obj: ^2.1.0
+  checksum: d86ddb3dd6e85d558dbf25dc944f3527b6bacb944db3fdda6e84a3f59c4e4b85231095f58b835758b9a57708342dee0f8de0dffa352974a48221487fe9f4584f
+  languageName: node
+  linkType: hard
+
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -14422,6 +14450,7 @@ __metadata:
     "@babel/core": ^7.25.2
     "@babel/preset-env": ^7.25.3
     "@babel/runtime": ^7.25.0
+    "@react-native-async-storage/async-storage": ^2.1.2
     "@react-native-community/cli": 18.0.0
     "@react-native-community/cli-platform-android": 18.0.0
     "@react-native-community/cli-platform-ios": 18.0.0
@@ -17502,8 +17531,8 @@ __metadata:
   linkType: hard
 
 "zustand@npm:^5.0.5":
-  version: 5.0.9
-  resolution: "zustand@npm:5.0.9"
+  version: 5.0.10
+  resolution: "zustand@npm:5.0.10"
   peerDependencies:
     "@types/react": ">=18.0.0"
     immer: ">=9.0.6"
@@ -17518,6 +17547,6 @@ __metadata:
       optional: true
     use-sync-external-store:
       optional: true
-  checksum: 04bd9abf9f0958a979f6003fadfdcc48970c87323a622bf20cc3ad0c52c58b9d25136e03bddf3b902c4bedc393a2ffd0b66bc46865f6a356f8ec43b6df47e2d4
+  checksum: 52d39ad5a0a496a443ced50e773a47df4bda4f718c96e45a08c92675e45d7ac77ce75903b8e3754f17a2e99c71f5864ae8c2b2477aeb4c6f5c2a19e3e64e57ba
   languageName: node
   linkType: hard

From 6ed6e0fd471d8b22e0cfa491e2493ed8289addbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Mon, 12 Jan 2026 19:57:07 +0100
Subject: [PATCH 02/14] docs: restore detailed JSDoc comment in
 DataBindingArtboardsExample

---
 .../src/demos/DataBindingArtboardsExample.tsx | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/example/src/demos/DataBindingArtboardsExample.tsx b/example/src/demos/DataBindingArtboardsExample.tsx
index b1e6350b..796b2a9f 100644
--- a/example/src/demos/DataBindingArtboardsExample.tsx
+++ b/example/src/demos/DataBindingArtboardsExample.tsx
@@ -15,15 +15,20 @@ import {
 } from '@rive-app/react-native';
 import { type Metadata } from '../shared/metadata';
 
-/*
-  Data Binding Artboards
-
-  Marketplace:
-  - Main: https://rive.app/marketplace/24641-46042-data-binding-artboards/
-  - Assets: https://rive.app/marketplace/24642-47536-data-binding-artboards/
-
-  Docs: https://rive.app/docs/runtimes/data-binding#artboards
-*/
+/**
+ * Data Binding Artboards Example
+ *
+ * Demonstrates swapping artboards at runtime using data binding.
+ * The main Rive file includes a view model with a property of type `Artboard`
+ * called "CharacterArtboard". This property can be set to any artboard from
+ * either the main file or an external file.
+ *
+ * Marketplace:
+ * - Main: https://rive.app/marketplace/24641-46042-data-binding-artboards/
+ * - Assets: https://rive.app/marketplace/24642-47536-data-binding-artboards/
+ *
+ * Docs: https://rive.app/docs/runtimes/data-binding#artboards
+ */
 
 export default function DataBindingArtboardsExample() {
   // Main scene file - contains the Card view model with CharacterArtboard property

From d908123a59512f155129f2638a71f49d51bc54ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Mon, 12 Jan 2026 20:20:12 +0100
Subject: [PATCH 03/14] refactor: simplify example code

Remove unused buttonTextActive style and redundant comments.
---
 example/src/PagesList.ts                          |  2 +-
 example/src/demos/DataBindingArtboardsExample.tsx | 10 +---------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/example/src/PagesList.ts b/example/src/PagesList.ts
index 58190be5..9f208b38 100644
--- a/example/src/PagesList.ts
+++ b/example/src/PagesList.ts
@@ -50,7 +50,7 @@ try {
     /\.tsx$/
   );
 } catch {
-  // local reproducers folder may be empty or not exist
+  // folder may be empty or not exist
 }
 
 export const DemosList = loadPagesFromContext(demosContext, 'demos');
diff --git a/example/src/demos/DataBindingArtboardsExample.tsx b/example/src/demos/DataBindingArtboardsExample.tsx
index 796b2a9f..67b55c8a 100644
--- a/example/src/demos/DataBindingArtboardsExample.tsx
+++ b/example/src/demos/DataBindingArtboardsExample.tsx
@@ -181,12 +181,7 @@ function ArtboardSwapper({
             ]}
             onPress={() => swapArtboard(option)}
           >
-            <Text
-              style={[
-                styles.buttonText,
-                currentArtboard === option.label && styles.buttonTextActive,
-              ]}
-            >
+            <Text style={styles.buttonText}>
               {option.label}
               {option.fromAssets ? ' (external)' : ' (internal)'}
             </Text>
@@ -262,9 +257,6 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     color: '#fff',
   },
-  buttonTextActive: {
-    color: '#fff',
-  },
   loadingText: {
     marginTop: 12,
     textAlign: 'center',

From 6e36e608ce5b78b5047616df7da9a5f8b77908b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Tue, 13 Jan 2026 08:48:58 +0100
Subject: [PATCH 04/14] feat(example): add dev menu with Run Tests and Invoke
 GC options

---
 example/src/App.tsx | 46 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 5e282d45..15d23077 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -5,6 +5,8 @@ import {
   StyleSheet,
   TouchableOpacity,
   ScrollView,
+  ActionSheetIOS,
+  Platform,
   Alert,
 } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
@@ -27,13 +29,47 @@ type RootStackParamList = {
 
 const Stack = createStackNavigator<RootStackParamList>();
 
+function invokeGC() {
+  if (typeof global.gc === 'function') {
+    global.gc();
+    Alert.alert('GC', 'Garbage collection invoked');
+  } else {
+    Alert.alert('GC', 'GC not available (Hermes debugger not attached)');
+  }
+}
+
+function showDevMenu() {
+  const options = ['Run Tests', 'Invoke GC', 'Cancel'];
+  const cancelButtonIndex = 2;
+
+  if (Platform.OS === 'ios') {
+    ActionSheetIOS.showActionSheetWithOptions(
+      { options, cancelButtonIndex },
+      (buttonIndex) => {
+        if (buttonIndex === 0) {
+          Alert.alert('Tests', 'Navigate to Tests section to run tests');
+        } else if (buttonIndex === 1) {
+          invokeGC();
+        }
+      }
+    );
+  } else {
+    Alert.alert('Dev Menu', undefined, [
+      {
+        text: 'Run Tests',
+        onPress: () =>
+          Alert.alert('Tests', 'Navigate to Tests section to run tests'),
+      },
+      { text: 'Invoke GC', onPress: invokeGC },
+      { text: 'Cancel', style: 'cancel' },
+    ]);
+  }
+}
+
 function HeaderMenuButton() {
   return (
-    <TouchableOpacity
-      onPress={() => Alert.alert('Tests', 'TODO: Run tests')}
-      style={styles.headerButton}
-    >
-      <Text style={styles.headerButtonText}>⚙</Text>
+    <TouchableOpacity onPress={showDevMenu} style={styles.headerButton}>
+      <Text style={styles.headerButtonText}>🔧</Text>
     </TouchableOpacity>
   );
 }

From 5d14639b6d171a665538a29c436da4ea682ae178 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Tue, 13 Jan 2026 08:54:38 +0100
Subject: [PATCH 05/14] fix(example): wire up Run Tests to navigate to
 TestsPage

---
 example/src/App.tsx | 58 +++++++++++++++++++++++----------------------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 15d23077..715fe4a3 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -9,7 +9,7 @@ import {
   Platform,
   Alert,
 } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {
@@ -38,35 +38,37 @@ function invokeGC() {
   }
 }
 
-function showDevMenu() {
-  const options = ['Run Tests', 'Invoke GC', 'Cancel'];
-  const cancelButtonIndex = 2;
-
-  if (Platform.OS === 'ios') {
-    ActionSheetIOS.showActionSheetWithOptions(
-      { options, cancelButtonIndex },
-      (buttonIndex) => {
-        if (buttonIndex === 0) {
-          Alert.alert('Tests', 'Navigate to Tests section to run tests');
-        } else if (buttonIndex === 1) {
-          invokeGC();
+function HeaderMenuButton() {
+  const navigation = useNavigation<any>();
+
+  const openTests = () => {
+    navigation.navigate('TestsPage');
+  };
+
+  const showDevMenu = () => {
+    const options = ['Run Tests', 'Invoke GC', 'Cancel'];
+    const cancelButtonIndex = 2;
+
+    if (Platform.OS === 'ios') {
+      ActionSheetIOS.showActionSheetWithOptions(
+        { options, cancelButtonIndex },
+        (buttonIndex) => {
+          if (buttonIndex === 0) {
+            openTests();
+          } else if (buttonIndex === 1) {
+            invokeGC();
+          }
         }
-      }
-    );
-  } else {
-    Alert.alert('Dev Menu', undefined, [
-      {
-        text: 'Run Tests',
-        onPress: () =>
-          Alert.alert('Tests', 'Navigate to Tests section to run tests'),
-      },
-      { text: 'Invoke GC', onPress: invokeGC },
-      { text: 'Cancel', style: 'cancel' },
-    ]);
-  }
-}
+      );
+    } else {
+      Alert.alert('Dev Menu', undefined, [
+        { text: 'Run Tests', onPress: openTests },
+        { text: 'Invoke GC', onPress: invokeGC },
+        { text: 'Cancel', style: 'cancel' },
+      ]);
+    }
+  };
 
-function HeaderMenuButton() {
   return (
     <TouchableOpacity onPress={showDevMenu} style={styles.headerButton}>
       <Text style={styles.headerButtonText}>🔧</Text>

From 4f37f52748ec565171f6c286af5e85210d4e29ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Tue, 13 Jan 2026 08:58:11 +0100
Subject: [PATCH 06/14] fix(expo-example): wire up Run Tests to navigate to
 TestsPage

---
 expo-example/app/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/expo-example/app/index.tsx b/expo-example/app/index.tsx
index a8e93680..8090bff4 100644
--- a/expo-example/app/index.tsx
+++ b/expo-example/app/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { StyleSheet, ScrollView, TouchableOpacity, Alert } from 'react-native';
+import { StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
 import { useRouter } from 'expo-router';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
@@ -86,8 +86,8 @@ export default function HomeScreen() {
   };
 
   const handleRunTests = () => {
-    Alert.alert('Tests', 'TODO: Run tests');
     setShowMenu(false);
+    router.push('/TestsPage' as any);
   };
 
   const handleNavigate = (id: string) => {

From 9a3883689200ebf4e4161d446529e92e50c23544 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Tue, 13 Jan 2026 15:21:22 +0100
Subject: [PATCH 07/14] test(example): add view recycling exerciser
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reproduces the bug where navigating OutOfBandAssets → QuickStart →
DataBindingArtboards causes 'Artboard Main not found' error due to
props persisting between screen navigations.
---
 example/src/exercisers/ViewRecyclingTest.tsx | 254 +++++++++++++++++++
 1 file changed, 254 insertions(+)
 create mode 100644 example/src/exercisers/ViewRecyclingTest.tsx

diff --git a/example/src/exercisers/ViewRecyclingTest.tsx b/example/src/exercisers/ViewRecyclingTest.tsx
new file mode 100644
index 00000000..0852f81d
--- /dev/null
+++ b/example/src/exercisers/ViewRecyclingTest.tsx
@@ -0,0 +1,254 @@
+/**
+ * View Recycling Bug Reproducer
+ *
+ * Tests that RiveView properly resets props when navigating between screens.
+ * Bug: When navigating OutOfBandAssets → QuickStart → DataBindingArtboards,
+ * the file from OutOfBandAssets persists while artboardName from
+ * DataBindingArtboards is applied, causing "Artboard 'Main' not found".
+ *
+ * This exerciser simulates that flow with inline navigation.
+ */
+
+import { useState } from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { RiveView, useRiveFile, Fit } from '@rive-app/react-native';
+import { type Metadata } from '../shared/metadata';
+
+type Screen = 'A' | 'B' | 'C';
+
+const screens: Record<
+  Screen,
+  { title: string; artboardName?: string; file: string }
+> = {
+  A: {
+    title: 'Screen A (artboard: "Artboard")',
+    artboardName: 'Artboard',
+    file: 'out_of_band',
+  },
+  B: {
+    title: 'Screen B (no artboardName)',
+    artboardName: undefined,
+    file: 'quick_start',
+  },
+  C: {
+    title: 'Screen C (artboard: "Main")',
+    artboardName: 'Main',
+    file: 'swap_character_main',
+  },
+};
+
+function ScreenA() {
+  const { riveFile } = useRiveFile(
+    require('../../assets/rive/out_of_band.riv')
+  );
+  if (!riveFile) return <Text>Loading...</Text>;
+  return (
+    <RiveView
+      file={riveFile}
+      artboardName="Artboard"
+      stateMachineName="State Machine 1"
+      fit={Fit.Contain}
+      style={styles.rive}
+    />
+  );
+}
+
+function ScreenB() {
+  const { riveFile } = useRiveFile(
+    require('../../assets/rive/quick_start.riv')
+  );
+  if (!riveFile) return <Text>Loading...</Text>;
+  return (
+    <RiveView
+      file={riveFile}
+      fit={Fit.Contain}
+      style={styles.rive}
+      autoPlay={true}
+    />
+  );
+}
+
+function ScreenC() {
+  const { riveFile } = useRiveFile(
+    require('../../assets/swap_character_main.riv')
+  );
+  if (!riveFile) return <Text>Loading...</Text>;
+  return (
+    <RiveView
+      file={riveFile}
+      artboardName="Main"
+      stateMachineName="State Machine 1"
+      fit={Fit.Layout}
+      style={styles.rive}
+      autoPlay={true}
+    />
+  );
+}
+
+export default function ViewRecyclingTest() {
+  const [currentScreen, setCurrentScreen] = useState<Screen>('A');
+  const [error, setError] = useState<string | null>(null);
+
+  const navigate = (screen: Screen) => {
+    setError(null);
+    setCurrentScreen(screen);
+  };
+
+  const runSequence = async () => {
+    setError(null);
+    // Simulate the problematic navigation sequence
+    navigate('A');
+    await new Promise((r) => setTimeout(r, 500));
+    navigate('B');
+    await new Promise((r) => setTimeout(r, 500));
+    navigate('C'); // This should NOT error with "Artboard 'Main' not found"
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>View Recycling Test</Text>
+      <Text style={styles.subtitle}>
+        Tests that props reset properly when navigating between RiveViews
+      </Text>
+
+      <View style={styles.buttonRow}>
+        {(['A', 'B', 'C'] as Screen[]).map((screen) => (
+          <Pressable
+            key={screen}
+            style={[
+              styles.button,
+              currentScreen === screen && styles.buttonActive,
+            ]}
+            onPress={() => navigate(screen)}
+          >
+            <Text style={styles.buttonText}>{screen}</Text>
+          </Pressable>
+        ))}
+      </View>
+
+      <Pressable style={styles.sequenceButton} onPress={runSequence}>
+        <Text style={styles.buttonText}>Run A → B → C Sequence</Text>
+      </Pressable>
+
+      <View style={styles.info}>
+        <Text style={styles.infoTitle}>{screens[currentScreen].title}</Text>
+        <Text style={styles.infoText}>
+          artboardName: {screens[currentScreen].artboardName ?? '(default)'}
+        </Text>
+        <Text style={styles.infoText}>file: {screens[currentScreen].file}</Text>
+      </View>
+
+      {error && (
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      )}
+
+      <View style={styles.riveContainer}>
+        {currentScreen === 'A' && <ScreenA />}
+        {currentScreen === 'B' && <ScreenB />}
+        {currentScreen === 'C' && <ScreenC />}
+      </View>
+
+      <Text style={styles.instructions}>
+        Bug reproduction: Navigate A → B → C quickly. If view recycling is
+        broken, Screen C will error with "Artboard 'Main' not found" because the
+        file from Screen A persists.
+      </Text>
+    </View>
+  );
+}
+
+ViewRecyclingTest.metadata = {
+  name: 'View Recycling Test',
+  description:
+    'Tests RiveView prop reset during navigation to catch recycling bugs',
+} satisfies Metadata;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: '#fff',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 8,
+    marginBottom: 8,
+  },
+  button: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    backgroundColor: '#007AFF',
+    borderRadius: 8,
+  },
+  buttonActive: {
+    backgroundColor: '#34C759',
+  },
+  sequenceButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#FF9500',
+    borderRadius: 8,
+    alignSelf: 'center',
+    marginBottom: 16,
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  info: {
+    backgroundColor: '#f0f0f0',
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  infoTitle: {
+    fontWeight: 'bold',
+    fontSize: 16,
+    marginBottom: 4,
+  },
+  infoText: {
+    fontSize: 14,
+    color: '#333',
+  },
+  riveContainer: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+    overflow: 'hidden',
+    marginBottom: 16,
+  },
+  rive: {
+    flex: 1,
+  },
+  instructions: {
+    fontSize: 12,
+    color: '#666',
+    textAlign: 'center',
+    fontStyle: 'italic',
+  },
+  errorContainer: {
+    backgroundColor: '#FFEBEE',
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  errorText: {
+    color: '#D32F2F',
+    fontWeight: '600',
+  },
+});

From 451c22267fe2dce62196a66cb35f3f0e4d545451 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Thu, 15 Jan 2026 11:04:11 +0100
Subject: [PATCH 08/14] refactor(example): move ScriptingExample to demos

---
 example/src/{exercisers => demos}/ScriptingExample.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename example/src/{exercisers => demos}/ScriptingExample.tsx (100%)

diff --git a/example/src/exercisers/ScriptingExample.tsx b/example/src/demos/ScriptingExample.tsx
similarity index 100%
rename from example/src/exercisers/ScriptingExample.tsx
rename to example/src/demos/ScriptingExample.tsx

From eec932d23a103aee7b5d29bef36a76bee99d7a5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Thu, 15 Jan 2026 14:36:25 +0100
Subject: [PATCH 09/14] refactor(example): share HomeMenu between example and
 expo-example

- Extract shared HomeMenu component with card-style UI
- Update TestsPage to support .tsx harness tests
- Remove viewRecycling tests (CDN loader crash - upstream bug)
- Fix ScriptingExample import path
---
 example/ios/Podfile.lock               | 144 ++++++++++++---------
 example/src/App.tsx                    | 101 +--------------
 example/src/demos/ScriptingExample.tsx |   2 +-
 example/src/shared/HomeMenu.tsx        | 171 +++++++++++++++++++++++++
 example/src/tests/TestsPage.tsx        |   2 +-
 expo-example/app/index.tsx             | 150 +---------------------
 6 files changed, 267 insertions(+), 303 deletions(-)
 create mode 100644 example/src/shared/HomeMenu.tsx

diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index e77a58c9..27bbf120 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -1755,6 +1755,30 @@ PODS:
     - React-perflogger (= 0.79.2)
     - React-utils (= 0.79.2)
   - RiveRuntime (6.13.0)
+  - RNCAsyncStorage (2.2.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNCPicker (2.11.4):
     - DoubleConversion
     - glog
@@ -1880,7 +1904,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - RNWorklets
     - Yoga
-  - RNRive (0.1.4):
+  - RNRive (0.1.5):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2057,6 +2081,7 @@ DEPENDENCIES:
   - ReactAppDependencyProvider (from `build/generated/ios`)
   - ReactCodegen (from `build/generated/ios`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
@@ -2213,6 +2238,8 @@ EXTERNAL SOURCES:
     :path: build/generated/ios
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCAsyncStorage:
+    :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCPicker:
     :path: "../node_modules/@react-native-picker/picker"
   RNGestureHandler:
@@ -2234,78 +2261,79 @@ SPEC CHECKSUMS:
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
   hermes-engine: 314be5250afa5692b57b4dd1705959e1973a8ebe
-  NitroModules: 0af9a8516f3d8f101976d60e1f34e2a22f401600
-  RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
+  NitroModules: 7f50ee216f8403e8eb243acfc504f3f856d6914c
+  RCT-Folly: 36fe2295e44b10d831836cc0d1daec5f8abcf809
   RCTDeprecation: 83ffb90c23ee5cea353bd32008a7bca100908f8c
   RCTRequired: eb7c0aba998009f47a540bec9e9d69a54f68136e
   RCTTypeSafety: 659ae318c09de0477fd27bbc9e140071c7ea5c93
   React: c2d3aa44c49bb34e4dfd49d3ee92da5ebacc1c1c
   React-callinvoker: 1bdfb7549b5af266d85757193b5069f60659ef9d
-  React-Core: 10597593fdbae06f0089881e025a172e51d4a769
-  React-CoreModules: 6907b255529dd46895cf687daa67b24484a612c2
-  React-cxxreact: a9f5b8180d6955bc3f6a3fcd657c4d9b4d95c1f6
+  React-Core: 7150cf9b6a5af063b37003062689f1691e79c020
+  React-CoreModules: 15a85e6665d61678942da6ae485b351f4c699049
+  React-cxxreact: 74f9de59259ac951923f5726aa14f0398f167af9
   React-debug: e74e76912b91e08d580c481c34881899ccf63da9
-  React-defaultsnativemodule: 11f6ee2cf69bf3af9d0f28a6253def33d21b5266
-  React-domnativemodule: f940bbc4fa9e134190acbf3a4a9f95621b5a8f51
-  React-Fabric: 6f5c357bf3a42ff11f8844ad3fc7a1eb04f4b9de
-  React-FabricComponents: 10e0c0209822ac9e69412913a8af1ca33573379b
-  React-FabricImage: f582e764072dfa4715ae8c42979a5bace9cbcc12
+  React-defaultsnativemodule: 628285212bbd65417d40ad6a9f8781830fda6c98
+  React-domnativemodule: 185d9808198405c176784aaf33403d713bd24fb7
+  React-Fabric: c814804affbe1952e16149ddd20256e1bccae67e
+  React-FabricComponents: 81ef47d596966121784afec9924f9562a29b1691
+  React-FabricImage: f14f371d678aa557101def954ac3ba27e48948ff
   React-featureflags: d5facceff8f8f6de430e0acecf4979a9a0839ba9
-  React-featureflagsnativemodule: a7dd141f1ef4b7c1331af0035689fbc742a49ff4
-  React-graphics: 36ae3407172c1c77cea29265d2b12b90aaef6aa0
-  React-hermes: 9116d4e6d07abeb519a2852672de087f44da8f12
-  React-idlecallbacksnativemodule: ae7f5ffc6cf2d2058b007b78248e5b08172ad5c3
-  React-ImageManager: 9daee0dc99ad6a001d4b9e691fbf37107e2b7b54
-  React-jserrorhandler: 1e6211581071edaf4ecd5303147328120c73f4dc
-  React-jsi: 753ba30c902f3a41fa7f956aca8eea3317a44ee6
-  React-jsiexecutor: 47520714aa7d9589c51c0f3713dfbfca4895d4f9
-  React-jsinspector: cfd27107f6d6f1076a57d88c932401251560fe5f
-  React-jsinspectortracing: 76a7d791f3c0c09a0d2bf6f46dfb0e79a4fcc0ac
-  React-jsitooling: 995e826570dd58f802251490486ebd3244a037ab
-  React-jsitracing: 094ae3d8c123cea67b50211c945b7c0443d3e97b
-  React-logger: 8edfcedc100544791cd82692ca5a574240a16219
-  React-Mapbuffer: c3f4b608e4a59dd2f6a416ef4d47a14400194468
-  React-microtasksnativemodule: 054f34e9b82f02bd40f09cebd4083828b5b2beb6
-  react-native-safe-area-context: 0b8555c40461feb7198e999912a3446602e7c601
-  React-NativeModulesApple: 2c4377e139522c3d73f5df582e4f051a838ff25e
+  React-featureflagsnativemodule: 96f0ab285382d95c90f663e02526a5ceefa95a11
+  React-graphics: 1a66ee0a3f093b125b853f6370296fadcaf6f233
+  React-hermes: 8b86e5f54a65ecb69cdf22b3a00a11562eda82d2
+  React-idlecallbacksnativemodule: 5c25ab145c602264d00cb26a397ab52e0efa031c
+  React-ImageManager: 15e34bd5ef1ac4a18e96660817ef70a7f99ee8c2
+  React-jserrorhandler: 02cdf2cd45350108be1ffd2b164578936dbbdff7
+  React-jsi: 6af1987cfbb1b6621664fdbf6c7b62bd4d38c923
+  React-jsiexecutor: 51f372998e0303585cb0317232b938d694663cbd
+  React-jsinspector: 3539ad976d073bfaa8a7d2fa9bef35e70e55033e
+  React-jsinspectortracing: e8dbacaf67c201f23052ca1c2bae2f7b84dec443
+  React-jsitooling: 95a34f41e3c249d42181de13b4f8d854f178ca9f
+  React-jsitracing: 25b029cf5cad488252d46da19dd8c4c134fd5fe4
+  React-logger: 368570a253f00879a1e4fea24ed4047e72e7bbf3
+  React-Mapbuffer: c04fcda1c6281fc0a6824c7dcc1633dd217ac1ec
+  React-microtasksnativemodule: ca2804a25fdcefffa0aa942aa23ab53b99614a34
+  react-native-safe-area-context: bc59472155ffb889a1ffe16c19a04c0cd451562b
+  React-NativeModulesApple: 452b86b29fae99ed0a4015dca3ad9cd222f88abf
   React-oscompat: ef5df1c734f19b8003e149317d041b8ce1f7d29c
-  React-perflogger: 9a151e0b4c933c9205fd648c246506a83f31395d
-  React-performancetimeline: 5b0dfc0acba29ea0269ddb34cd6dd59d3b8a1c66
+  React-perflogger: 6fd2f6811533e9c19a61e855c3033eecbf4ad2a0
+  React-performancetimeline: abf31259d794c9274b3ea19c5016186925eec6c4
   React-RCTActionSheet: a499b0d6d9793886b67ba3e16046a3fef2cdbbc3
-  React-RCTAnimation: cc64adc259aabc3354b73065e2231d796dfce576
-  React-RCTAppDelegate: 9d523da768f1c9e84c5f3b7e3624d097dfb0e16b
-  React-RCTBlob: e727f53eeefded7e6432eb76bd22b57bc880e5d1
-  React-RCTFabric: 58590aa4fdb4ad546c06a7449b486cf6844e991f
-  React-RCTFBReactNativeSpec: 9064c63d99e467a3893e328ba3612745c3c3a338
-  React-RCTImage: 7159cbdbb18a09d97ba1a611416eced75b3ccb29
-  React-RCTLinking: 46293afdb859bccc63e1d3dedc6901a3c04ef360
-  React-RCTNetwork: 4a6cd18f5bcd0363657789c64043123a896b1170
-  React-RCTRuntime: 5ab904fd749aa52f267ef771d265612582a17880
-  React-RCTSettings: 61e361dc85136d1cb0e148b7541993d2ee950ea7
-  React-RCTText: abd1e196c3167175e6baef18199c6d9d8ac54b4e
-  React-RCTVibration: 490e0dcb01a3fe4a0dfb7bc51ad5856d8b84f343
+  React-RCTAnimation: 2595dcb10a82216a511b54742f8c28d793852ac6
+  React-RCTAppDelegate: f03604b70f57c9469a84a159d8abecf793a5bcff
+  React-RCTBlob: e00f9b4e2f151938f4d9864cf33ebf24ac03328a
+  React-RCTFabric: 3945d116fd271598db262d4e6ed5691d431ed9e8
+  React-RCTFBReactNativeSpec: 0f4d4f0da938101f2ca9d5333a8f46e527ad2819
+  React-RCTImage: dac5e9f8ec476aefe6e60ee640ebc1dfaf1a4dbe
+  React-RCTLinking: 494b785a40d952a1dfbe712f43214376e5f0e408
+  React-RCTNetwork: b3d7c30cd21793e268db107dd0980cb61b3c1c44
+  React-RCTRuntime: a8ff419d437228e7b8a793b14f9d711e1cbb82af
+  React-RCTSettings: a060c7e381a3896104761b8eed7e284d95e37df3
+  React-RCTText: 4f272b72dbb61f390d8c8274528f9fdbff983806
+  React-RCTVibration: 0e5326220719aca12473d703aa46693e3b4ce67a
   React-rendererconsistency: 351fdbc5c1fe4da24243d939094a80f0e149c7a1
-  React-renderercss: 3438814bee838ae7840a633ab085ac81699fd5cf
-  React-rendererdebug: 0ac2b9419ad6f88444f066d4b476180af311fb1e
+  React-renderercss: d333f2ada83969591100d91ec6b23ca2e17e1507
+  React-rendererdebug: 039e5949b72ba63c703de020701e3fd152434c61
   React-rncore: 57ed480649bb678d8bdc386d20fee8bf2b0c307c
-  React-RuntimeApple: 8b7a9788f31548298ba1990620fe06b40de65ad7
-  React-RuntimeCore: e03d96fbd57ce69fd9bca8c925942194a5126dbc
+  React-RuntimeApple: 344a5e1105256000afabaa8df12c3e4cab880340
+  React-RuntimeCore: 0e48fb5e5160acc0334c7a723a42d42cef4b58b6
   React-runtimeexecutor: d60846710facedd1edb70c08b738119b3ee2c6c2
-  React-RuntimeHermes: aab794755d9f6efd249b61f3af4417296904e3ba
-  React-runtimescheduler: c3cd124fa5db7c37f601ee49ca0d97019acd8788
+  React-RuntimeHermes: 064286a03871d932c99738e0f8ef854962ab4b99
+  React-runtimescheduler: e917ab17ae08c204af1ebf8f669b7e411b0220c8
   React-timing: a90f4654cbda9c628614f9bee68967f1768bd6a5
-  React-utils: a612d50555b6f0f90c74b7d79954019ad47f5de6
-  ReactAppDependencyProvider: 04d5eb15eb46be6720e17a4a7fa92940a776e584
-  ReactCodegen: c63eda03ba1d94353fb97b031fc84f75a0d125ba
-  ReactCommon: 76d2dc87136d0a667678668b86f0fca0c16fdeb0
+  React-utils: 51c4e71608b8133fecc9a15801d244ae7bdf3758
+  ReactAppDependencyProvider: d5dcc564f129632276bd3184e60f053fcd574d6b
+  ReactCodegen: fda99a79c866370190e162083a35602fdc314e5d
+  ReactCommon: 4d0da92a5eb8da86c08e3ec34bd23ab439fb2461
   RiveRuntime: 903690a5ba698b2a7e8d462e8aa7ceeba862614c
-  RNCPicker: 28c076ae12a1056269ec0305fe35fac3086c477d
-  RNGestureHandler: 6b39f4e43e4b3a0fb86de9531d090ff205a011d5
-  RNReanimated: 66b68ebe3baf7ec9e716bd059d700726f250d344
-  RNRive: 18b5afca5883b3511187e5024bb58849f74e49fa
-  RNWorklets: b1faafefb82d9f29c4018404a0fb33974b494a7b
+  RNCAsyncStorage: 2cf7d05f5b1bc38680b6c83971e535a6ae9c5bc7
+  RNCPicker: 83c74db2de8274d8a8f3e18d91dea174a708f8c4
+  RNGestureHandler: bff91bb5ab5688265c70f74180ef718b94f33fe3
+  RNReanimated: 9a24892f34ea317264883806d2e3de7ce34eab90
+  RNRive: 73aa1ec7d3ef4da1030e81643808adb538bc05ca
+  RNWorklets: ddf16938b1ed7e878563a4fc8a690968ef3d27f1
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Yoga: c758bfb934100bb4bf9cbaccb52557cee35e8bdf
+  Yoga: 9f110fc4b7aa538663cba3c14cbb1c335f43c13f
 
 PODFILE CHECKSUM: 6974e58448067deb1048e3b4490e929f624eea3c
 
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 715fe4a3..0d193a0a 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -4,7 +4,6 @@ import {
   Text,
   StyleSheet,
   TouchableOpacity,
-  ScrollView,
   ActionSheetIOS,
   Platform,
   Alert,
@@ -12,12 +11,8 @@ import {
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import {
-  PagesList,
-  PagesListByCategory,
-  type PageItem,
-  type Category,
-} from './PagesList';
+import { PagesList, type PageItem } from './PagesList';
+import { HomeMenu } from './shared/HomeMenu';
 
 const LAST_OPENED_KEY = '@rive_example_last_opened';
 
@@ -76,40 +71,6 @@ function HeaderMenuButton() {
   );
 }
 
-const CATEGORY_LABELS: Record<Category, string> = {
-  demos: 'Demos',
-  exercisers: 'Exercisers',
-  tests: 'Tests',
-  reproducers: 'Reproducers',
-};
-
-function Section({
-  title,
-  pages,
-  onNavigate,
-}: {
-  title: string;
-  pages: PageItem[];
-  onNavigate: (id: string) => void;
-}) {
-  if (pages.length === 0) return null;
-
-  return (
-    <View style={styles.section}>
-      <Text style={styles.sectionTitle}>{title}</Text>
-      {pages.map(({ id, name }) => (
-        <TouchableOpacity
-          key={id}
-          style={styles.button}
-          onPress={() => onNavigate(id)}
-        >
-          <Text style={styles.buttonText}>{name}</Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-  );
-}
-
 function HomeScreen({ navigation }: { navigation: any }) {
   const [lastOpened, setLastOpened] = useState<PageItem | null>(null);
 
@@ -128,30 +89,9 @@ function HomeScreen({ navigation }: { navigation: any }) {
   };
 
   return (
-    <ScrollView style={styles.container}>
-      <Text style={styles.header}>Rive React Native Examples</Text>
-
-      {lastOpened && (
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Recent</Text>
-          <TouchableOpacity
-            style={styles.button}
-            onPress={() => handleNavigate(lastOpened.id)}
-          >
-            <Text style={styles.buttonText}>{lastOpened.name}</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      {(Object.keys(CATEGORY_LABELS) as Category[]).map((category) => (
-        <Section
-          key={category}
-          title={CATEGORY_LABELS[category]}
-          pages={PagesListByCategory[category]}
-          onNavigate={handleNavigate}
-        />
-      ))}
-    </ScrollView>
+    <View style={styles.container}>
+      <HomeMenu lastOpened={lastOpened} onNavigate={handleNavigate} />
+    </View>
   );
 }
 
@@ -195,37 +135,6 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#fff',
   },
-  header: {
-    fontSize: 28,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    marginTop: 40,
-    marginBottom: 20,
-  },
-  section: {
-    paddingHorizontal: 20,
-    marginBottom: 20,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#666',
-    marginBottom: 10,
-    textTransform: 'uppercase',
-    letterSpacing: 1,
-  },
-  button: {
-    backgroundColor: '#007AFF',
-    padding: 15,
-    borderRadius: 10,
-    marginBottom: 10,
-  },
-  buttonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
   headerButton: {
     marginRight: 16,
     padding: 4,
diff --git a/example/src/demos/ScriptingExample.tsx b/example/src/demos/ScriptingExample.tsx
index c4c29963..508da4a4 100644
--- a/example/src/demos/ScriptingExample.tsx
+++ b/example/src/demos/ScriptingExample.tsx
@@ -7,7 +7,7 @@
 
 import { View, StyleSheet } from 'react-native';
 import { RiveView, useRiveFile, DataBindMode } from '@rive-app/react-native';
-import type { Metadata } from '../helpers/metadata';
+import type { Metadata } from '../shared/metadata';
 
 export default function ScriptingExample() {
   const { riveFile } = useRiveFile(require('../../assets/rive/blinko.riv'));
diff --git a/example/src/shared/HomeMenu.tsx b/example/src/shared/HomeMenu.tsx
new file mode 100644
index 00000000..6008e351
--- /dev/null
+++ b/example/src/shared/HomeMenu.tsx
@@ -0,0 +1,171 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+import {
+  PagesList,
+  PagesListByCategory,
+  type PageItem,
+  type Category,
+} from '../PagesList';
+
+const CATEGORY_LABELS: Record<Category, string> = {
+  demos: 'Demos',
+  exercisers: 'Exercisers',
+  tests: 'Tests',
+  reproducers: 'Reproducers',
+};
+
+function ChevronRight() {
+  return <Text style={styles.chevron}>›</Text>;
+}
+
+function Section({
+  title,
+  pages,
+  onNavigate,
+}: {
+  title: string;
+  pages: PageItem[];
+  onNavigate: (id: string) => void;
+}) {
+  if (pages.length === 0) return null;
+
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>{title}</Text>
+      {pages.map((page) => (
+        <TouchableOpacity
+          key={page.id}
+          style={styles.card}
+          onPress={() => onNavigate(page.id)}
+          activeOpacity={0.7}
+        >
+          <View style={styles.cardContent}>
+            <View style={styles.textContainer}>
+              <Text style={styles.cardTitle}>{page.name}</Text>
+              {page.description ? (
+                <Text style={styles.cardDescription}>{page.description}</Text>
+              ) : null}
+            </View>
+            <ChevronRight />
+          </View>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}
+
+export type HomeMenuProps = {
+  lastOpened?: PageItem | null;
+  onNavigate: (id: string) => void;
+};
+
+export function HomeMenu({ lastOpened, onNavigate }: HomeMenuProps) {
+  return (
+    <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent}>
+      {lastOpened && (
+        <TouchableOpacity
+          style={styles.recentCard}
+          onPress={() => onNavigate(lastOpened.id)}
+          activeOpacity={0.7}
+        >
+          <View style={styles.recentContent}>
+            <Text style={styles.recentIcon}>↻</Text>
+            <Text style={styles.recentTitle}>{lastOpened.name}</Text>
+            <ChevronRight />
+          </View>
+        </TouchableOpacity>
+      )}
+
+      {(Object.keys(CATEGORY_LABELS) as Category[]).map((category) => (
+        <Section
+          key={category}
+          title={CATEGORY_LABELS[category]}
+          pages={PagesListByCategory[category]}
+          onNavigate={onNavigate}
+        />
+      ))}
+    </ScrollView>
+  );
+}
+
+export { PagesList, type PageItem };
+
+const styles = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    padding: 16,
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#888',
+    marginBottom: 10,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+  card: {
+    marginBottom: 8,
+    borderRadius: 12,
+    backgroundColor: '#F5F5F5',
+    overflow: 'hidden',
+  },
+  cardContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  textContainer: {
+    flex: 1,
+    marginRight: 8,
+  },
+  cardTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+  },
+  cardDescription: {
+    fontSize: 13,
+    color: '#666',
+    marginTop: 2,
+    lineHeight: 18,
+  },
+  chevron: {
+    fontSize: 22,
+    color: '#999',
+    fontWeight: '300',
+  },
+  recentCard: {
+    marginBottom: 20,
+    borderRadius: 12,
+    backgroundColor: '#E8F4FD',
+    overflow: 'hidden',
+  },
+  recentContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    gap: 10,
+  },
+  recentIcon: {
+    fontSize: 16,
+    color: '#007AFF',
+  },
+  recentTitle: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+  },
+});
diff --git a/example/src/tests/TestsPage.tsx b/example/src/tests/TestsPage.tsx
index d6d19fcd..35140d3e 100644
--- a/example/src/tests/TestsPage.tsx
+++ b/example/src/tests/TestsPage.tsx
@@ -11,7 +11,7 @@ import type { TestSuite, TestCase } from '@react-native-harness/bridge';
 import { useState, useEffect } from 'react';
 import type { Metadata } from '../shared/metadata';
 
-const testContext = require.context('../../__tests__', false, /\.harness\.ts$/);
+const testContext = require.context('../../__tests__', false, /\.harness\.tsx?$/);
 
 type TestStatus = 'pending' | 'running' | 'passed' | 'failed';
 
diff --git a/expo-example/app/index.tsx b/expo-example/app/index.tsx
index 8090bff4..21f89c81 100644
--- a/expo-example/app/index.tsx
+++ b/expo-example/app/index.tsx
@@ -1,66 +1,15 @@
 import { useEffect, useState } from 'react';
-import { StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 import { useRouter } from 'expo-router';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { ThemedText } from '@/components/themed-text';
 import { ThemedView } from '@/components/themed-view';
 import { IconSymbol } from '@/components/ui/icon-symbol';
-import {
-  PagesList,
-  PagesListByCategory,
-  type PageItem,
-  type Category,
-} from '@example/PagesList';
+import { HomeMenu, PagesList, type PageItem } from '@example/shared/HomeMenu';
 
 const LAST_OPENED_KEY = '@rive_example_last_opened';
 
-const CATEGORY_LABELS: Record<Category, string> = {
-  demos: 'Demos',
-  exercisers: 'Exercisers',
-  tests: 'Tests',
-  reproducers: 'Reproducers',
-};
-
-function Section({
-  title,
-  pages,
-  onNavigate,
-}: {
-  title: string;
-  pages: PageItem[];
-  onNavigate: (id: string) => void;
-}) {
-  if (pages.length === 0) return null;
-
-  return (
-    <ThemedView style={styles.section}>
-      <ThemedText style={styles.sectionTitle}>{title}</ThemedText>
-      {pages.map((page) => (
-        <TouchableOpacity
-          key={page.id}
-          style={styles.exampleCard}
-          onPress={() => onNavigate(page.id)}
-        >
-          <ThemedView style={styles.cardContainer}>
-            <ThemedView style={styles.cardContent}>
-              <ThemedView style={styles.textContainer}>
-                <ThemedText type="defaultSemiBold" style={styles.cardTitle}>
-                  {page.name}
-                </ThemedText>
-                <ThemedText style={styles.cardDescription}>
-                  {page.description}
-                </ThemedText>
-              </ThemedView>
-              <IconSymbol size={20} name="chevron.right" color="#999" />
-            </ThemedView>
-          </ThemedView>
-        </TouchableOpacity>
-      ))}
-    </ThemedView>
-  );
-}
-
 export default function HomeScreen() {
   const router = useRouter();
   const [showMenu, setShowMenu] = useState(false);
@@ -119,38 +68,7 @@ export default function HomeScreen() {
         )}
       </ThemedView>
 
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={styles.scrollContent}
-      >
-        {lastOpened && (
-          <TouchableOpacity
-            style={styles.recentCard}
-            onPress={() => handleNavigate(lastOpened.id)}
-          >
-            <ThemedView style={styles.recentContent}>
-              <IconSymbol
-                size={18}
-                name="clock.arrow.circlepath"
-                color="#666"
-              />
-              <ThemedText type="defaultSemiBold" style={styles.recentTitle}>
-                {lastOpened.name}
-              </ThemedText>
-              <IconSymbol size={20} name="chevron.right" color="#999" />
-            </ThemedView>
-          </TouchableOpacity>
-        )}
-
-        {(Object.keys(CATEGORY_LABELS) as Category[]).map((category) => (
-          <Section
-            key={category}
-            title={CATEGORY_LABELS[category]}
-            pages={PagesListByCategory[category]}
-            onNavigate={handleNavigate}
-          />
-        ))}
-      </ScrollView>
+      <HomeMenu lastOpened={lastOpened} onNavigate={handleNavigate} />
     </ThemedView>
   );
 }
@@ -190,66 +108,4 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: '#007AFF',
   },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    padding: 16,
-  },
-  section: {
-    marginBottom: 20,
-  },
-  sectionTitle: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#666',
-    marginBottom: 10,
-    textTransform: 'uppercase',
-    letterSpacing: 1,
-  },
-  exampleCard: {
-    marginBottom: 8,
-    borderRadius: 12,
-    overflow: 'hidden',
-  },
-  cardContainer: {
-    backgroundColor: '#F5F5F5',
-    borderRadius: 12,
-  },
-  recentCard: {
-    marginBottom: 20,
-    borderRadius: 12,
-    overflow: 'hidden',
-    backgroundColor: '#F5F5F5',
-  },
-  recentContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    gap: 10,
-  },
-  recentTitle: {
-    flex: 1,
-    fontSize: 16,
-  },
-  cardContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-  },
-  textContainer: {
-    flex: 1,
-    marginRight: 8,
-  },
-  cardTitle: {
-    fontSize: 16,
-    marginBottom: 4,
-  },
-  cardDescription: {
-    fontSize: 13,
-    opacity: 0.7,
-    lineHeight: 18,
-  },
 });

From 97c1ab1df45aa9278e6070e89419b7374cb3d96a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Thu, 15 Jan 2026 20:31:25 +0100
Subject: [PATCH 10/14] fix(tests): cache collected suites to fix re-navigation
 showing 0 tests

---
 example/src/tests/TestsPage.tsx | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/example/src/tests/TestsPage.tsx b/example/src/tests/TestsPage.tsx
index 35140d3e..87c7bba1 100644
--- a/example/src/tests/TestsPage.tsx
+++ b/example/src/tests/TestsPage.tsx
@@ -13,6 +13,9 @@ import type { Metadata } from '../shared/metadata';
 
 const testContext = require.context('../../__tests__', false, /\.harness\.tsx?$/);
 
+// Cache collected suites at module level (require.context only executes once)
+let cachedSuites: TestSuite[] | null = null;
+
 type TestStatus = 'pending' | 'running' | 'passed' | 'failed';
 
 interface TestState {
@@ -20,30 +23,36 @@ interface TestState {
   error?: string;
 }
 
+function buildTestStates(suites: TestSuite[]): Map<string, TestState> {
+  const states = new Map<string, TestState>();
+  for (const suite of suites) {
+    for (const test of suite.tests) {
+      states.set(`${suite.name}::${test.name}`, { status: 'pending' });
+    }
+  }
+  return states;
+}
+
 export default function TestsPage() {
-  const [suites, setSuites] = useState<TestSuite[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [suites, setSuites] = useState<TestSuite[]>(cachedSuites ?? []);
+  const [loading, setLoading] = useState(cachedSuites === null);
   const [testStates, setTestStates] = useState<Map<string, TestState>>(
-    new Map()
+    () => (cachedSuites ? buildTestStates(cachedSuites) : new Map())
   );
   const [runningAll, setRunningAll] = useState(false);
 
   useEffect(() => {
+    if (cachedSuites !== null) return;
+
     async function collectTests() {
       const collector = getTestCollector();
       const result = await collector.collect(() => {
         testContext.keys().forEach((key) => testContext(key));
       }, 'harness-tests');
 
-      setSuites(result.testSuite.suites);
-
-      const states = new Map<string, TestState>();
-      for (const suite of result.testSuite.suites) {
-        for (const test of suite.tests) {
-          states.set(`${suite.name}::${test.name}`, { status: 'pending' });
-        }
-      }
-      setTestStates(states);
+      cachedSuites = result.testSuite.suites;
+      setSuites(cachedSuites);
+      setTestStates(buildTestStates(cachedSuites));
       setLoading(false);
     }
     collectTests();

From cb021455e12e8a80e755c60e7e9da6decfe7a31c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Fri, 16 Jan 2026 07:12:05 +0100
Subject: [PATCH 11/14] style: fix lint

---
 example/src/shared/HomeMenu.tsx |  5 ++++-
 example/src/tests/TestsPage.tsx | 10 +++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/example/src/shared/HomeMenu.tsx b/example/src/shared/HomeMenu.tsx
index 6008e351..07796a4c 100644
--- a/example/src/shared/HomeMenu.tsx
+++ b/example/src/shared/HomeMenu.tsx
@@ -66,7 +66,10 @@ export type HomeMenuProps = {
 
 export function HomeMenu({ lastOpened, onNavigate }: HomeMenuProps) {
   return (
-    <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent}>
+    <ScrollView
+      style={styles.scrollView}
+      contentContainerStyle={styles.scrollContent}
+    >
       {lastOpened && (
         <TouchableOpacity
           style={styles.recentCard}
diff --git a/example/src/tests/TestsPage.tsx b/example/src/tests/TestsPage.tsx
index 87c7bba1..15bf63ff 100644
--- a/example/src/tests/TestsPage.tsx
+++ b/example/src/tests/TestsPage.tsx
@@ -11,7 +11,11 @@ import type { TestSuite, TestCase } from '@react-native-harness/bridge';
 import { useState, useEffect } from 'react';
 import type { Metadata } from '../shared/metadata';
 
-const testContext = require.context('../../__tests__', false, /\.harness\.tsx?$/);
+const testContext = require.context(
+  '../../__tests__',
+  false,
+  /\.harness\.tsx?$/
+);
 
 // Cache collected suites at module level (require.context only executes once)
 let cachedSuites: TestSuite[] | null = null;
@@ -36,8 +40,8 @@ function buildTestStates(suites: TestSuite[]): Map<string, TestState> {
 export default function TestsPage() {
   const [suites, setSuites] = useState<TestSuite[]>(cachedSuites ?? []);
   const [loading, setLoading] = useState(cachedSuites === null);
-  const [testStates, setTestStates] = useState<Map<string, TestState>>(
-    () => (cachedSuites ? buildTestStates(cachedSuites) : new Map())
+  const [testStates, setTestStates] = useState<Map<string, TestState>>(() =>
+    cachedSuites ? buildTestStates(cachedSuites) : new Map()
   );
   const [runningAll, setRunningAll] = useState(false);
 

From 3dc12ea97ddafdf3eaa5c43da7a69fb19406e5d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Fri, 16 Jan 2026 07:17:10 +0100
Subject: [PATCH 12/14] fix(tests): use global cache to persist suites across
 HMR

---
 example/src/tests/TestsPage.tsx | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/example/src/tests/TestsPage.tsx b/example/src/tests/TestsPage.tsx
index 15bf63ff..e1b3a078 100644
--- a/example/src/tests/TestsPage.tsx
+++ b/example/src/tests/TestsPage.tsx
@@ -17,8 +17,17 @@ const testContext = require.context(
   /\.harness\.tsx?$/
 );
 
-// Cache collected suites at module level (require.context only executes once)
-let cachedSuites: TestSuite[] | null = null;
+// Cache collected suites globally (persists across HMR, require.context only executes once)
+const CACHE_KEY = '__RIVE_TEST_SUITES__';
+type GlobalCache = { [CACHE_KEY]?: TestSuite[] };
+
+function getCachedSuites(): TestSuite[] | null {
+  return (global as unknown as GlobalCache)[CACHE_KEY] ?? null;
+}
+
+function setCachedSuites(suites: TestSuite[]): void {
+  (global as unknown as GlobalCache)[CACHE_KEY] = suites;
+}
 
 type TestStatus = 'pending' | 'running' | 'passed' | 'failed';
 
@@ -38,15 +47,16 @@ function buildTestStates(suites: TestSuite[]): Map<string, TestState> {
 }
 
 export default function TestsPage() {
-  const [suites, setSuites] = useState<TestSuite[]>(cachedSuites ?? []);
-  const [loading, setLoading] = useState(cachedSuites === null);
+  const cached = getCachedSuites();
+  const [suites, setSuites] = useState<TestSuite[]>(cached ?? []);
+  const [loading, setLoading] = useState(cached === null);
   const [testStates, setTestStates] = useState<Map<string, TestState>>(() =>
-    cachedSuites ? buildTestStates(cachedSuites) : new Map()
+    cached ? buildTestStates(cached) : new Map()
   );
   const [runningAll, setRunningAll] = useState(false);
 
   useEffect(() => {
-    if (cachedSuites !== null) return;
+    if (getCachedSuites() !== null) return;
 
     async function collectTests() {
       const collector = getTestCollector();
@@ -54,9 +64,10 @@ export default function TestsPage() {
         testContext.keys().forEach((key) => testContext(key));
       }, 'harness-tests');
 
-      cachedSuites = result.testSuite.suites;
-      setSuites(cachedSuites);
-      setTestStates(buildTestStates(cachedSuites));
+      const collectedSuites = result.testSuite.suites;
+      setCachedSuites(collectedSuites);
+      setSuites(collectedSuites);
+      setTestStates(buildTestStates(collectedSuites));
       setLoading(false);
     }
     collectTests();

From d9d5bb2fade1727edfd6f08128fb4f053412f636 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Fri, 16 Jan 2026 07:36:31 +0100
Subject: [PATCH 13/14] fix(tests): use CDN URL instead of localhost for
 fromURL test

---
 example/__tests__/rive.harness.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/__tests__/rive.harness.ts b/example/__tests__/rive.harness.ts
index e6b3f56e..f4281e30 100644
--- a/example/__tests__/rive.harness.ts
+++ b/example/__tests__/rive.harness.ts
@@ -13,7 +13,7 @@ describe('RiveFile Loading', () => {
 
   it('fromURL works', async () => {
     const file = await RiveFileFactory.fromURL(
-      'http://localhost:8081/assets/assets/rive/viewmodelproperty.riv',
+      'https://cdn.rive.app/animations/vehicles.riv',
       undefined
     );
     expect(file).toBeDefined();

From 7b3fb9282daa797d08c42989f758d79002f8b41a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Fri, 16 Jan 2026 07:49:30 +0100
Subject: [PATCH 14/14] refactor: remove purple secondary button style

---
 example/src/demos/DataBindingArtboardsExample.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/example/src/demos/DataBindingArtboardsExample.tsx b/example/src/demos/DataBindingArtboardsExample.tsx
index 67b55c8a..9af9b70b 100644
--- a/example/src/demos/DataBindingArtboardsExample.tsx
+++ b/example/src/demos/DataBindingArtboardsExample.tsx
@@ -176,7 +176,6 @@ function ArtboardSwapper({
             key={option.label}
             style={[
               styles.button,
-              !option.fromAssets && styles.secondaryButton,
               currentArtboard === option.label && styles.buttonActive,
             ]}
             onPress={() => swapArtboard(option)}
@@ -246,9 +245,6 @@ const styles = StyleSheet.create({
     backgroundColor: '#007AFF',
     borderRadius: 8,
   },
-  secondaryButton: {
-    backgroundColor: '#5856D6',
-  },
   buttonActive: {
     backgroundColor: '#34C759',
   },