test: add navigation lifecycle harness test

Verifies RiveView preserves state after screen detach/reattach using
react-native-screens ScreenContainer.

Author: mfazekas

example/__tests__/navigation-lifecycle.harness.tsx

@@ -0,0 +1,138 @@
+import {
+  describe,
+  it,
+  expect,
+  render,
+  waitFor,
+  cleanup,
+} from 'react-native-harness';
+import { useEffect } from 'react';
+import { ScreenContainer, Screen } from 'react-native-screens';
+import {
+  RiveView,
+  RiveFileFactory,
+  Fit,
+  type RiveFile,
+  type RiveViewRef,
+} from '@rive-app/react-native';
+import type { ViewModelInstance } from '@rive-app/react-native';
+
+const QUICK_START = require('../assets/rive/quick_start.riv');
+
+function expectDefined<T>(value: T): asserts value is NonNullable<T> {
+  expect(value).toBeDefined();
+}
+
+type TestContext = {
+  ref: RiveViewRef | null;
+  error: string | null;
+};
+
+function ScreenWithRive({
+  file,
+  instance,
+  context,
+  activityState,
+}: {
+  file: RiveFile;
+  instance: ViewModelInstance;
+  context: TestContext;
+  activityState: 0 | 2;
+}) {
+  useEffect(() => {
+    return () => {
+      context.ref = null;
+    };
+  }, [context]);
+
+  return (
+    <ScreenContainer style={{ width: 200, height: 200 }}>
+      <Screen activityState={activityState} style={{ flex: 1 }}>
+        <RiveView
+          hybridRef={{
+            f: (ref: RiveViewRef | null) => {
+              context.ref = ref;
+            },
+          }}
+          style={{ flex: 1 }}
+          file={file}
+          autoPlay={false}
+          dataBind={instance}
+          fit={Fit.Contain}
+          stateMachineName="State Machine 1"
+          onError={(e) => {
+            context.error = e.message;
+          }}
+        />
+      </Screen>
+    </ScreenContainer>
+  );
+}
+
+describe('navigation lifecycle (PR #46)', () => {
+  it('RiveView preserves state after screen detach/reattach', async () => {
+    const file = await RiveFileFactory.fromSource(QUICK_START, undefined);
+    const vm = file.defaultArtboardViewModel();
+    expectDefined(vm);
+    const instance = vm.createDefaultInstance();
+    expectDefined(instance);
+
+    const context: TestContext = { ref: null, error: null };
+
+    const { rerender } = await render(
+      <ScreenWithRive
+        file={file}
+        instance={instance}
+        context={context}
+        activityState={2}
+      />
+    );
+
+    await waitFor(
+      () => {
+        expect(context.ref).not.toBeNull();
+      },
+      { timeout: 5000 }
+    );
+    await context.ref!.awaitViewReady();
+
+    // Set health to 75 via the native view's VMI
+    const boundVmi = context.ref!.getViewModelInstance();
+    expectDefined(boundVmi);
+    const health = boundVmi.numberProperty('health');
+    expectDefined(health);
+    health.value = 75;
+
+    // Detach screen (simulates navigating away — triggers onDetachedFromWindow)
+    await rerender(
+      <ScreenWithRive
+        file={file}
+        instance={instance}
+        context={context}
+        activityState={0}
+      />
+    );
+    await new Promise((r) => setTimeout(r, 300));
+
+    // Reattach screen (simulates navigating back)
+    await rerender(
+      <ScreenWithRive
+        file={file}
+        instance={instance}
+        context={context}
+        activityState={2}
+      />
+    );
+    await new Promise((r) => setTimeout(r, 300));
+
+    // Query the VMI from the native view after reattach
+    expect(context.error).toBeNull();
+    const reattachedVmi = context.ref!.getViewModelInstance();
+    expectDefined(reattachedVmi);
+    const reattachedHealth = reattachedVmi.numberProperty('health');
+    expectDefined(reattachedHealth);
+    expect(reattachedHealth.value).toBe(75);
+
+    cleanup();
+  });
+});

example/metro.config.js

@@ -2,7 +2,10 @@ const path = require('path');
 const { getDefaultConfig } = require('@react-native/metro-config');
 const { getConfig } = require('react-native-builder-bob/metro-config');
 const { withRnHarness } = require('react-native-harness/metro');
-const { withSingleReactNative } = require('./metro.helpers');
+const {
+  withSingleReactNative,
+  withBlockedSiblingDeps,
+} = require('./metro.helpers');
 
 const root = path.resolve(__dirname, '..');
 
@@ -21,4 +24,10 @@ const finalConfig = getConfig(config, {
   project: __dirname,
 });
 
-module.exports = withRnHarness(withSingleReactNative(finalConfig, __dirname));
+const expoExampleDir = path.resolve(root, 'expo-example');
+module.exports = withRnHarness(
+  withSingleReactNative(
+    withBlockedSiblingDeps(finalConfig, __dirname, expoExampleDir),
+    __dirname
+  )
+);

example/metro.helpers.js

@@ -53,4 +53,51 @@ function withSingleReactNative(config, projectDir) {
   };
 }
 
-module.exports = { withSingleReactNative };
+/**
+ * Blocks a sibling workspace's node_modules for any dependencies shared between the two.
+ * Prevents duplicate native module registration when builder-bob watches the monorepo root.
+ *
+ * @param {import('metro-config').MetroConfig} config - Metro configuration
+ * @param {string} projectDir - This project's directory
+ * @param {string} siblingDir - The sibling workspace's directory
+ * @returns {import('metro-config').MetroConfig}
+ */
+function withBlockedSiblingDeps(config, projectDir, siblingDir) {
+  const myPkg = require(path.resolve(projectDir, 'package.json'));
+  const siblingPkg = require(path.resolve(siblingDir, 'package.json'));
+
+  const myDeps = new Set([
+    ...Object.keys(myPkg.dependencies || {}),
+    ...Object.keys(myPkg.devDependencies || {}),
+  ]);
+  const siblingDeps = [
+    ...Object.keys(siblingPkg.dependencies || {}),
+    ...Object.keys(siblingPkg.devDependencies || {}),
+  ];
+
+  const shared = siblingDeps.filter((dep) => myDeps.has(dep));
+  if (shared.length === 0) return config;
+
+  const patterns = shared.map((dep) => {
+    const escaped = path
+      .resolve(siblingDir, 'node_modules', dep)
+      .replace(/[/\\]/g, '[/\\\\]');
+    return new RegExp(escaped + '[/\\\\].*$');
+  });
+
+  const existing = config.resolver?.blockList;
+  const blockList = [
+    ...(existing ? (Array.isArray(existing) ? existing : [existing]) : []),
+    ...patterns,
+  ];
+
+  return {
+    ...config,
+    resolver: {
+      ...config.resolver,
+      blockList,
+    },
+  };
+}
+
+module.exports = { withSingleReactNative, withBlockedSiblingDeps };

example/package.json

@@ -24,6 +24,7 @@
     "react-native-nitro-modules": "0.35.0",
     "react-native-reanimated": "4.1.5",
     "react-native-safe-area-context": "^5.4.0",
+    "react-native-screens": "~4.18.0",
     "react-native-worklets": "0.6.1"
   },
   "devDependencies": {

expo-example/metro.config.js

@@ -2,7 +2,10 @@
 const { getDefaultConfig } = require('expo/metro-config');
 const { getConfig } = require('react-native-builder-bob/metro-config');
 const path = require('path');
-const { withSingleReactNative } = require('../example/metro.helpers');
+const {
+  withSingleReactNative,
+  withBlockedSiblingDeps,
+} = require('../example/metro.helpers');
 
 const root = path.resolve(__dirname, '..');
 
@@ -60,4 +63,8 @@ const configWithAlias = {
   },
 };
 
-module.exports = withSingleReactNative(configWithAlias, __dirname);
+const exampleDir = path.resolve(root, 'example');
+module.exports = withSingleReactNative(
+  withBlockedSiblingDeps(configWithAlias, __dirname, exampleDir),
+  __dirname
+);

yarn.lock

@@ -14458,6 +14458,7 @@ __metadata:
     react-native-nitro-modules: 0.35.0
     react-native-reanimated: 4.1.5
     react-native-safe-area-context: ^5.4.0
+    react-native-screens: ~4.18.0
     react-native-worklets: 0.6.1
   languageName: unknown
   linkType: soft
@@ -14486,6 +14487,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-screens@npm:~4.18.0":
+  version: 4.18.0
+  resolution: "react-native-screens@npm:4.18.0"
+  dependencies:
+    react-freeze: ^1.0.0
+    warn-once: ^0.1.0
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: b7942efe7bf316ad66aabf6e3b8b999268d3b88b3d23affb0f90f627d8dd980172f79b48abf476d10c3466ba5123240ee3f18f8d0ff7db5b79b9772cb520afa0
+  languageName: node
+  linkType: hard
+
 "react-native-web@npm:~0.21.0":
   version: 0.21.2
   resolution: "react-native-web@npm:0.21.2"