Skip to content

Commit 866a079

Browse files
mfazekasmfazekas
committed
test: add navigation lifecycle harness test
Verifies RiveView preserves state after screen detach/reattach using react-native-screens ScreenContainer.
1 parent a4edac3 commit 866a079

File tree

6 files changed

+224
-5
lines changed

6 files changed

+224
-5
lines changed

‎example/__tests__/navigation-lifecycle.harness.tsx‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import {
2+
describe,
3+
it,
4+
expect,
5+
render,
6+
waitFor,
7+
cleanup,
8+
} from 'react-native-harness';
9+
import { useEffect } from 'react';
10+
import { ScreenContainer, Screen } from 'react-native-screens';
11+
import {
12+
RiveView,
13+
RiveFileFactory,
14+
Fit,
15+
type RiveFile,
16+
type RiveViewRef,
17+
} from '@rive-app/react-native';
18+
import type { ViewModelInstance } from '@rive-app/react-native';
19+
20+
const QUICK_START = require('../assets/rive/quick_start.riv');
21+
22+
const SCREEN_INACTIVE = 0 as const;
23+
const SCREEN_ACTIVE = 2 as const;
24+
25+
function expectDefined<T>(value: T): asserts value is NonNullable<T> {
26+
expect(value).toBeDefined();
27+
}
28+
29+
type TestContext = {
30+
ref: RiveViewRef | null;
31+
error: string | null;
32+
};
33+
34+
function ScreenWithRive({
35+
file,
36+
instance,
37+
context,
38+
activityState,
39+
}: {
40+
file: RiveFile;
41+
instance: ViewModelInstance;
42+
context: TestContext;
43+
activityState: typeof SCREEN_INACTIVE | typeof SCREEN_ACTIVE;
44+
}) {
45+
useEffect(() => {
46+
return () => {
47+
context.ref = null;
48+
};
49+
}, [context]);
50+
51+
return (
52+
<ScreenContainer style={{ width: 200, height: 200 }}>
53+
<Screen activityState={activityState} style={{ flex: 1 }}>
54+
<RiveView
55+
hybridRef={{
56+
f: (ref: RiveViewRef | null) => {
57+
context.ref = ref;
58+
},
59+
}}
60+
style={{ flex: 1 }}
61+
file={file}
62+
autoPlay={false}
63+
dataBind={instance}
64+
fit={Fit.Contain}
65+
stateMachineName="State Machine 1"
66+
onError={(e) => {
67+
context.error = e.message;
68+
}}
69+
/>
70+
</Screen>
71+
</ScreenContainer>
72+
);
73+
}
74+
75+
describe('navigation lifecycle (PR #46)', () => {
76+
it('RiveView preserves state after screen detach/reattach', async () => {
77+
const file = await RiveFileFactory.fromSource(QUICK_START, undefined);
78+
const vm = file.defaultArtboardViewModel();
79+
expectDefined(vm);
80+
const instance = vm.createDefaultInstance();
81+
expectDefined(instance);
82+
83+
const context: TestContext = { ref: null, error: null };
84+
85+
const { rerender } = await render(
86+
<ScreenWithRive
87+
file={file}
88+
instance={instance}
89+
context={context}
90+
activityState={SCREEN_ACTIVE}
91+
/>
92+
);
93+
94+
await waitFor(
95+
() => {
96+
expect(context.ref).not.toBeNull();
97+
},
98+
{ timeout: 5000 }
99+
);
100+
await context.ref!.awaitViewReady();
101+
102+
// Set health to 75 via the native view's VMI
103+
const boundVmi = context.ref!.getViewModelInstance();
104+
expectDefined(boundVmi);
105+
const health = boundVmi.numberProperty('health');
106+
expectDefined(health);
107+
health.value = 75;
108+
109+
// Detach screen (simulates navigating away — triggers onDetachedFromWindow)
110+
await rerender(
111+
<ScreenWithRive
112+
file={file}
113+
instance={instance}
114+
context={context}
115+
activityState={SCREEN_INACTIVE}
116+
/>
117+
);
118+
await new Promise((r) => setTimeout(r, 300));
119+
120+
// Reattach screen (simulates navigating back)
121+
await rerender(
122+
<ScreenWithRive
123+
file={file}
124+
instance={instance}
125+
context={context}
126+
activityState={SCREEN_ACTIVE}
127+
/>
128+
);
129+
await new Promise((r) => setTimeout(r, 300));
130+
131+
// Query the VMI from the native view after reattach
132+
expect(context.error).toBeNull();
133+
const reattachedVmi = context.ref!.getViewModelInstance();
134+
expectDefined(reattachedVmi);
135+
const reattachedHealth = reattachedVmi.numberProperty('health');
136+
expectDefined(reattachedHealth);
137+
expect(reattachedHealth.value).toBe(75);
138+
139+
cleanup();
140+
});
141+
});

‎example/metro.config.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const path = require('path');
22
const { getDefaultConfig } = require('@react-native/metro-config');
33
const { getConfig } = require('react-native-builder-bob/metro-config');
44
const { withRnHarness } = require('react-native-harness/metro');
5-
const { withSingleReactNative } = require('./metro.helpers');
5+
const {
6+
withSingleReactNative,
7+
withBlockedSiblingDeps,
8+
} = require('./metro.helpers');
69

710
const root = path.resolve(__dirname, '..');
811

@@ -21,4 +24,10 @@ const finalConfig = getConfig(config, {
2124
project: __dirname,
2225
});
2326

24-
module.exports = withRnHarness(withSingleReactNative(finalConfig, __dirname));
27+
const expoExampleDir = path.resolve(root, 'expo-example');
28+
module.exports = withRnHarness(
29+
withSingleReactNative(
30+
withBlockedSiblingDeps(finalConfig, __dirname, expoExampleDir),
31+
__dirname
32+
)
33+
);

‎example/metro.helpers.js‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,51 @@ function withSingleReactNative(config, projectDir) {
5353
};
5454
}
5555

56-
module.exports = { withSingleReactNative };
56+
/**
57+
* Blocks a sibling workspace's node_modules for any dependencies shared between the two.
58+
* Prevents duplicate native module registration when builder-bob watches the monorepo root.
59+
*
60+
* @param {import('metro-config').MetroConfig} config - Metro configuration
61+
* @param {string} projectDir - This project's directory
62+
* @param {string} siblingDir - The sibling workspace's directory
63+
* @returns {import('metro-config').MetroConfig}
64+
*/
65+
function withBlockedSiblingDeps(config, projectDir, siblingDir) {
66+
const myPkg = require(path.resolve(projectDir, 'package.json'));
67+
const siblingPkg = require(path.resolve(siblingDir, 'package.json'));
68+
69+
const myDeps = new Set([
70+
...Object.keys(myPkg.dependencies || {}),
71+
...Object.keys(myPkg.devDependencies || {}),
72+
]);
73+
const siblingDeps = [
74+
...Object.keys(siblingPkg.dependencies || {}),
75+
...Object.keys(siblingPkg.devDependencies || {}),
76+
];
77+
78+
const shared = siblingDeps.filter((dep) => myDeps.has(dep));
79+
if (shared.length === 0) return config;
80+
81+
const patterns = shared.map((dep) => {
82+
const escaped = path
83+
.resolve(siblingDir, 'node_modules', dep)
84+
.replace(/[/\\]/g, '[/\\\\]');
85+
return new RegExp(escaped + '[/\\\\].*$');
86+
});
87+
88+
const existing = config.resolver?.blockList;
89+
const blockList = [
90+
...(existing ? (Array.isArray(existing) ? existing : [existing]) : []),
91+
...patterns,
92+
];
93+
94+
return {
95+
...config,
96+
resolver: {
97+
...config.resolver,
98+
blockList,
99+
},
100+
};
101+
}
102+
103+
module.exports = { withSingleReactNative, withBlockedSiblingDeps };

‎example/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"react-native-nitro-modules": "0.35.0",
2525
"react-native-reanimated": "4.1.5",
2626
"react-native-safe-area-context": "^5.4.0",
27+
"react-native-screens": "~4.18.0",
2728
"react-native-worklets": "0.6.1"
2829
},
2930
"devDependencies": {

‎expo-example/metro.config.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
const { getDefaultConfig } = require('expo/metro-config');
33
const { getConfig } = require('react-native-builder-bob/metro-config');
44
const path = require('path');
5-
const { withSingleReactNative } = require('../example/metro.helpers');
5+
const {
6+
withSingleReactNative,
7+
withBlockedSiblingDeps,
8+
} = require('../example/metro.helpers');
69

710
const root = path.resolve(__dirname, '..');
811

@@ -60,4 +63,8 @@ const configWithAlias = {
6063
},
6164
};
6265

63-
module.exports = withSingleReactNative(configWithAlias, __dirname);
66+
const exampleDir = path.resolve(root, 'example');
67+
module.exports = withSingleReactNative(
68+
withBlockedSiblingDeps(configWithAlias, __dirname, exampleDir),
69+
__dirname
70+
);

‎yarn.lock‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14458,6 +14458,7 @@ __metadata:
1445814458
react-native-nitro-modules: 0.35.0
1445914459
react-native-reanimated: 4.1.5
1446014460
react-native-safe-area-context: ^5.4.0
14461+
react-native-screens: ~4.18.0
1446114462
react-native-worklets: 0.6.1
1446214463
languageName: unknown
1446314464
linkType: soft
@@ -14486,6 +14487,19 @@ __metadata:
1448614487
languageName: node
1448714488
linkType: hard
1448814489

14490+
"react-native-screens@npm:~4.18.0":
14491+
version: 4.18.0
14492+
resolution: "react-native-screens@npm:4.18.0"
14493+
dependencies:
14494+
react-freeze: ^1.0.0
14495+
warn-once: ^0.1.0
14496+
peerDependencies:
14497+
react: "*"
14498+
react-native: "*"
14499+
checksum: b7942efe7bf316ad66aabf6e3b8b999268d3b88b3d23affb0f90f627d8dd980172f79b48abf476d10c3466ba5123240ee3f18f8d0ff7db5b79b9772cb520afa0
14500+
languageName: node
14501+
linkType: hard
14502+
1448914503
"react-native-web@npm:~0.21.0":
1449014504
version: 0.21.2
1449114505
resolution: "react-native-web@npm:0.21.2"

0 commit comments

Comments
 (0)