diff --git a/.github/actions/androidapp-road-test/action.yml b/.github/actions/androidapp-road-test/action.yml
index dc9cc8cff..562d50536 100644
--- a/.github/actions/androidapp-road-test/action.yml
+++ b/.github/actions/androidapp-road-test/action.yml
@@ -271,7 +271,7 @@ runs:
       if: steps.e2e.outputs.phase == 'full' || steps.e2e.outputs.phase == 'build' || steps.e2e.outputs.phase == 'test'
       run: |
         node <<'NODE'
-        const { getAndroidAppDetoxVariant } = require('./apps/brownfield-example-shared-tests/detox-androidapp-variants.cjs');
+        const { getAndroidAppDetoxVariant } = require('./apps/shared-tests/detox-androidapp-variants.cjs');
         const variant = getAndroidAppDetoxVariant(process.env.ANDROIDAPP_VARIANT);
         const append = (key, value) => {
           const fs = require('node:fs');
@@ -396,9 +396,9 @@ runs:
         # low on disk after Gradle/NDK builds (see ReactiveCircus/android-emulator-runner#455).
         script: |
           echo "==> Starting Detox tests at $(date -u +%H:%M:%S)"
-          bash apps/brownfield-example-shared-tests/scripts/prepare-android-emulator-for-detox.sh
+          bash apps/shared-tests/scripts/prepare-android-emulator-for-detox.sh
           cd apps/AndroidApp
-          bash apps/brownfield-example-shared-tests/scripts/run-with-android-logcat.sh apps/AndroidApp/e2e-artifacts/logcat-full.txt yarn "$ANDROIDAPP_E2E_TEST_SCRIPT"
+          bash ../shared-tests/scripts/run-with-android-logcat.sh e2e-artifacts/logcat-full.txt yarn "$ANDROIDAPP_E2E_TEST_SCRIPT"
       env:
         ANDROIDAPP_E2E_TEST_SCRIPT: ${{ env.ANDROIDAPP_E2E_TEST_SCRIPT }}
 
diff --git a/.github/actions/appleapp-road-test/action.yml b/.github/actions/appleapp-road-test/action.yml
index b9e579835..d37c74da5 100644
--- a/.github/actions/appleapp-road-test/action.yml
+++ b/.github/actions/appleapp-road-test/action.yml
@@ -182,7 +182,7 @@ runs:
       if: inputs.run-e2e == 'true'
       run: |
         node <<'NODE'
-        const { getAppleAppDetoxVariant } = require('./apps/brownfield-example-shared-tests/detox-appleapp-variants.cjs');
+        const { getAppleAppDetoxVariant } = require('./apps/shared-tests/detox-appleapp-variants.cjs');
         const variant = getAppleAppDetoxVariant(process.env.APPLEAPP_VARIANT);
         const append = (key, value) => {
           const fs = require('node:fs');
@@ -208,7 +208,7 @@ runs:
       uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
       with:
         path: apps/AppleApp/build
-        key: ${{ runner.os }}-e2e-appleapp-${{ inputs.variant }}-build-${{ hashFiles(format('{0}/ios/Podfile.lock', inputs.rn-project-path), 'apps/AppleApp/Brownfield Apple App.xcodeproj/project.pbxproj', 'apps/brownfield-example-shared-tests/e2e/**') }}-${{ hashFiles('apps/AppleApp/package/**/*.swiftinterface') }}
+        key: ${{ runner.os }}-e2e-appleapp-${{ inputs.variant }}-build-${{ hashFiles(format('{0}/ios/Podfile.lock', inputs.rn-project-path), 'apps/AppleApp/Brownfield Apple App.xcodeproj/project.pbxproj', 'apps/shared-tests/e2e/**') }}-${{ hashFiles('apps/AppleApp/package/**/*.swiftinterface') }}
 
     - name: Install Detox iOS artifacts
       if: inputs.run-e2e == 'true'
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2773da4a1..40f322cc9 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -42,19 +42,24 @@ jobs:
               - 'packages/**'
             rnapp:
               - 'apps/RNApp/**'
-              - 'apps/brownfield-example-shared-tests/**'
+              - 'apps/shared-tests/**'
+              - 'apps/shared-runtime/**'
             expo58:
               - 'apps/ExpoApp58/**'
-              - 'apps/brownfield-example-shared-tests/**'
+              - 'apps/shared-tests/**'
+              - 'apps/shared-runtime/**'
             expo57:
               - 'apps/ExpoApp57/**'
-              - 'apps/brownfield-example-shared-tests/**'
+              - 'apps/shared-tests/**'
+              - 'apps/shared-runtime/**'
             androidapp:
               - 'apps/AndroidApp/**'
-              - 'apps/brownfield-example-shared-tests/**'
+              - 'apps/shared-tests/**'
+              - 'apps/shared-runtime/**'
             appleapp:
               - 'apps/AppleApp/**'
-              - 'apps/brownfield-example-shared-tests/**'
+              - 'apps/shared-tests/**'
+              - 'apps/shared-runtime/**'
             gradle-plugins:
               - 'gradle-plugins/**'
             scripts:
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index aaa719fc0..ca7630ce5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -147,7 +147,7 @@ Root scripts run from the repository root with `yarn <script>`. Scripts marked _
 - `lint` - runs `lint` in all workspaces _[Turbo]_
 - `typecheck` - runs `typecheck` in all workspaces _[Turbo]_
 - `test:packages` - runs `test` in the workspaces under `packages/` _[Turbo]_
-- `test:apps` - runs `test` in the workspaces under `apps/`, including the Node test suite in `apps/brownfield-example-shared-tests` _[Turbo]_
+- `test:apps` - runs `test` in the workspaces under `apps/`, including the Node test suite in `apps/shared-tests` _[Turbo]_
 - `test:scripts` - runs the Node test runner on `scripts/__tests__/**/*.test.ts`
 
 ### Brownfield Gradle plugin
@@ -266,7 +266,9 @@ AppleApp now derives its native shell label from target build settings and uses
 
 ## Tests
 
-The React Native example apps share Jest utilities and test suites from `apps/brownfield-example-shared-tests`. Tests exercise integration with `@callstack/react-native-brownfield`, `@callstack/brownfield-navigation`, and `@callstack/brownie` as used in each demo.
+Runtime code shared by the demo apps lives in [`apps/shared-runtime`](apps/shared-runtime/README.md). Keep test-only imports out of that package.
+
+The React Native example apps share Jest utilities and test suites from `apps/shared-tests`. Tests exercise integration with `@callstack/react-native-brownfield`, `@callstack/brownfield-navigation`, and `@callstack/brownie` as used in each demo.
 
 From the repository root:
 
@@ -280,14 +282,15 @@ Per example app (run from the repo root):
 | --------------------------------------------------------------- | --------------------------------- |
 | `yarn workspace @callstack/brownfield-example-rn-app test`      | Plain React Native (`apps/RNApp`) |
 | `yarn workspace @callstack/brownfield-example-expo-app-58 test` | Expo SDK 58 (`apps/ExpoApp58`)    |
+| `yarn workspace @callstack/brownfield-example-expo-app-57 test` | Expo SDK 57 (`apps/ExpoApp57`)    |
 
-Package-level scripts (`yarn test` inside `apps/RNApp` or `apps/ExpoApp58`) invoke Jest with each app’s `jest.config.js`.
+Package-level scripts (`yarn test` inside `apps/RNApp`, `apps/ExpoApp57`, or `apps/ExpoApp58`) invoke Jest with each app’s `jest.config.js`.
 
 The native-only sample apps (`apps/AppleApp`, `apps/AndroidApp`) use their platform test runners (Xcode / Gradle), not Jest.
 
 ## E2E tests (Detox)
 
-End-to-end tests use [Detox](https://wix.github.io/Detox/) on the iOS Simulator and Android emulator. Shared specs and helpers live in `apps/brownfield-example-shared-tests/e2e/`; each app wires them through its own `.detoxrc*.cjs` and `e2e/jest.config*.cjs`.
+End-to-end tests use [Detox](https://wix.github.io/Detox/) on the iOS Simulator and Android emulator. Shared specs and helpers live in `apps/shared-tests/e2e/`; each app wires them through its own `.detoxrc*.cjs` and `e2e/jest.config*.cjs`.
 
 E2E runs without Metro: release/debug host builds load the JS bundle embedded in the packaged brownfield artifact so the app matches CI.
 
@@ -369,4 +372,4 @@ Host-app scripts run `yarn install`, `yarn build`, brownfield codegen, `expo pre
 
 ### `e2e-artifacts/`
 
-Detox writes failure diagnostics under `<app>/e2e-artifacts/` (configured in `apps/brownfield-example-shared-tests/detox-artifacts-config.cjs`). Each run creates a timestamped subfolder, e.g. `e2e-artifacts/ios.sim.debug.<TIMESTAMP>/`.
+Detox writes failure diagnostics under `<app>/e2e-artifacts/` (configured in `apps/shared-tests/detox-artifacts-config.cjs`). Each run creates a timestamped subfolder, e.g. `e2e-artifacts/ios.sim.debug.<TIMESTAMP>/`.
diff --git a/apps/AndroidApp/.detoxrc.cjs b/apps/AndroidApp/.detoxrc.cjs
index ffd6ed5dc..1b56a0e3f 100644
--- a/apps/AndroidApp/.detoxrc.cjs
+++ b/apps/AndroidApp/.detoxrc.cjs
@@ -1,6 +1,6 @@
 const {
   createAndroidAppEmulatorReleaseDetoxConfig,
-} = require('../brownfield-example-shared-tests/detox-rc-androidapp-emulator-release.cjs');
+} = require('../shared-tests/detox-rc-androidapp-emulator-release.cjs');
 
 /** @type {import('detox').DetoxConfig} */
 module.exports = createAndroidAppEmulatorReleaseDetoxConfig({
diff --git a/apps/AndroidApp/.detoxrc.expo57.cjs b/apps/AndroidApp/.detoxrc.expo57.cjs
index 0704df29f..47d9cbbce 100644
--- a/apps/AndroidApp/.detoxrc.expo57.cjs
+++ b/apps/AndroidApp/.detoxrc.expo57.cjs
@@ -1,6 +1,6 @@
 const {
   createAndroidAppEmulatorReleaseDetoxConfig,
-} = require('../brownfield-example-shared-tests/detox-rc-androidapp-emulator-release.cjs');
+} = require('../shared-tests/detox-rc-androidapp-emulator-release.cjs');
 
 /** @type {import('detox').DetoxConfig} */
 module.exports = createAndroidAppEmulatorReleaseDetoxConfig({
diff --git a/apps/AndroidApp/.detoxrc.expo58.cjs b/apps/AndroidApp/.detoxrc.expo58.cjs
index 98fc74c29..49e634cd4 100644
--- a/apps/AndroidApp/.detoxrc.expo58.cjs
+++ b/apps/AndroidApp/.detoxrc.expo58.cjs
@@ -1,6 +1,6 @@
 const {
   createAndroidAppEmulatorReleaseDetoxConfig,
-} = require('../brownfield-example-shared-tests/detox-rc-androidapp-emulator-release.cjs');
+} = require('../shared-tests/detox-rc-androidapp-emulator-release.cjs');
 
 /** @type {import('detox').DetoxConfig} */
 module.exports = createAndroidAppEmulatorReleaseDetoxConfig({
diff --git a/apps/AndroidApp/app/src/main/java/com/callstack/brownfield/android/example/E2eTestIds.kt b/apps/AndroidApp/app/src/main/java/com/callstack/brownfield/android/example/E2eTestIds.kt
index d9846cd7b..0076b174d 100644
--- a/apps/AndroidApp/app/src/main/java/com/callstack/brownfield/android/example/E2eTestIds.kt
+++ b/apps/AndroidApp/app/src/main/java/com/callstack/brownfield/android/example/E2eTestIds.kt
@@ -1,6 +1,6 @@
 package com.callstack.brownfield.android.example
 
-/** Keep in sync with `@callstack/brownfield-example-shared-tests` `e2eTestIds`. */
+/** Keep in sync with `@callstack/shared-tests` `e2eTestIds`. */
 object E2eTestIds {
     const val nativeAppGreeting = "brownfield-e2e-appleapp-greeting"
     const val nativeAppOpenReactNative = "brownfield-e2e-appleapp-open-react-native"
diff --git a/apps/AndroidApp/e2e/jest.config.cjs b/apps/AndroidApp/e2e/jest.config.cjs
index 2d92c9dfe..fc16d7e4b 100644
--- a/apps/AndroidApp/e2e/jest.config.cjs
+++ b/apps/AndroidApp/e2e/jest.config.cjs
@@ -1,14 +1,11 @@
 const path = require('node:path');
 const {
   createDetoxJestConfig,
-} = require('../../brownfield-example-shared-tests/e2e/createDetoxJestConfig.cjs');
+} = require('../../shared-tests/e2e/createDetoxJestConfig.cjs');
 
 module.exports = createDetoxJestConfig({
   e2eDir: __dirname,
   testMatch: [
-    path.join(
-      __dirname,
-      '../../brownfield-example-shared-tests/e2e/androidAppBrownfield.e2e.js'
-    ),
+    path.join(__dirname, '../../shared-tests/e2e/androidAppBrownfield.e2e.js'),
   ],
 });
diff --git a/apps/AndroidApp/e2e/jest.config.expo57.cjs b/apps/AndroidApp/e2e/jest.config.expo57.cjs
index c66afa2a3..d2deb81e0 100644
--- a/apps/AndroidApp/e2e/jest.config.expo57.cjs
+++ b/apps/AndroidApp/e2e/jest.config.expo57.cjs
@@ -1,7 +1,7 @@
 const path = require('node:path');
 const {
   createDetoxJestConfig,
-} = require('../../brownfield-example-shared-tests/e2e/createDetoxJestConfig.cjs');
+} = require('../../shared-tests/e2e/createDetoxJestConfig.cjs');
 
 module.exports = createDetoxJestConfig({
   e2eDir: __dirname,
@@ -9,7 +9,7 @@ module.exports = createDetoxJestConfig({
   testMatch: [
     path.join(
       __dirname,
-      '../../brownfield-example-shared-tests/e2e/androidAppExpoBrownfield.e2e.js'
+      '../../shared-tests/e2e/androidAppExpoBrownfield.e2e.js'
     ),
   ],
 });
diff --git a/apps/AndroidApp/e2e/jest.config.expo58.cjs b/apps/AndroidApp/e2e/jest.config.expo58.cjs
index c66afa2a3..d2deb81e0 100644
--- a/apps/AndroidApp/e2e/jest.config.expo58.cjs
+++ b/apps/AndroidApp/e2e/jest.config.expo58.cjs
@@ -1,7 +1,7 @@
 const path = require('node:path');
 const {
   createDetoxJestConfig,
-} = require('../../brownfield-example-shared-tests/e2e/createDetoxJestConfig.cjs');
+} = require('../../shared-tests/e2e/createDetoxJestConfig.cjs');
 
 module.exports = createDetoxJestConfig({
   e2eDir: __dirname,
@@ -9,7 +9,7 @@ module.exports = createDetoxJestConfig({
   testMatch: [
     path.join(
       __dirname,
-      '../../brownfield-example-shared-tests/e2e/androidAppExpoBrownfield.e2e.js'
+      '../../shared-tests/e2e/androidAppExpoBrownfield.e2e.js'
     ),
   ],
 });
diff --git a/apps/AndroidApp/package.json b/apps/AndroidApp/package.json
index 913405577..05592f82d 100644
--- a/apps/AndroidApp/package.json
+++ b/apps/AndroidApp/package.json
@@ -19,7 +19,7 @@
     "ci:local:e2e:android:expo57": "bash ../../scripts/ci-local-androidapp-android-e2e.sh --variant expo57"
   },
   "devDependencies": {
-    "@callstack/brownfield-example-shared-tests": "workspace:^",
+    "@callstack/shared-tests": "workspace:^",
     "detox": "^20.27.0",
     "jest": "^29.7.0"
   }
diff --git a/apps/AppleApp/.detoxrc.cjs b/apps/AppleApp/.detoxrc.cjs
index 3e8caa1f5..8cdab8256 100644
--- a/apps/AppleApp/.detoxrc.cjs
+++ b/apps/AppleApp/.detoxrc.cjs
@@ -1,6 +1,6 @@
 const {
   createAppleAppIosSimDebugDetoxConfig,
-} = require('../brownfield-example-shared-tests/detox-rc-appleapp-ios-sim-debug.cjs');
+} = require('../shared-tests/detox-rc-appleapp-ios-sim-debug.cjs');
 
 /** @type {import('detox').DetoxConfig} */
 module.exports = createAppleAppIosSimDebugDetoxConfig({
diff --git a/apps/AppleApp/.detoxrc.expo57.cjs b/apps/AppleApp/.detoxrc.expo57.cjs
index 26dfd166b..b0e8274f0 100644
--- a/apps/AppleApp/.detoxrc.expo57.cjs
+++ b/apps/AppleApp/.detoxrc.expo57.cjs
@@ -1,9 +1,9 @@
 const {
   createAppleAppIosSimDebugDetoxConfig,
-} = require('../brownfield-example-shared-tests/detox-rc-appleapp-ios-sim-debug.cjs');
+} = require('../shared-tests/detox-rc-appleapp-ios-sim-debug.cjs');
 const {
   getAppleAppDetoxVariant,
-} = require('../brownfield-example-shared-tests/detox-appleapp-variants.cjs');
+} = require('../shared-tests/detox-appleapp-variants.cjs');
 
 const variant = getAppleAppDetoxVariant('expo57');
 
diff --git a/apps/AppleApp/.detoxrc.expo58.cjs b/apps/AppleApp/.detoxrc.expo58.cjs
index 0b84a782f..76846c674 100644
--- a/apps/AppleApp/.detoxrc.expo58.cjs
+++ b/apps/AppleApp/.detoxrc.expo58.cjs
@@ -1,9 +1,9 @@
 const {
   createAppleAppIosSimDebugDetoxConfig,
-} = require('../brownfield-example-shared-tests/detox-rc-appleapp-ios-sim-debug.cjs');
+} = require('../shared-tests/detox-rc-appleapp-ios-sim-debug.cjs');
 const {
   getAppleAppDetoxVariant,
-} = require('../brownfield-example-shared-tests/detox-appleapp-variants.cjs');
+} = require('../shared-tests/detox-appleapp-variants.cjs');
 
 const variant = getAppleAppDetoxVariant('expo58');
 
diff --git a/apps/AppleApp/Brownfield Apple App/E2eTestIds.swift b/apps/AppleApp/Brownfield Apple App/E2eTestIds.swift
index bcccc7f2b..4eb0624a8 100644
--- a/apps/AppleApp/Brownfield Apple App/E2eTestIds.swift	
+++ b/apps/AppleApp/Brownfield Apple App/E2eTestIds.swift	
@@ -1,6 +1,6 @@
 import Foundation
 
-/// Keep in sync with `@callstack/brownfield-example-shared-tests` `e2eTestIds`.
+/// Keep in sync with `@callstack/shared-tests` `e2eTestIds`.
 enum E2eTestIds {
     static let appleAppGreeting = "brownfield-e2e-appleapp-greeting"
     static let appleAppOpenReactNative = "brownfield-e2e-appleapp-open-react-native"
diff --git a/apps/AppleApp/e2e/jest.config.cjs b/apps/AppleApp/e2e/jest.config.cjs
index db7e9b2ae..0980d724f 100644
--- a/apps/AppleApp/e2e/jest.config.cjs
+++ b/apps/AppleApp/e2e/jest.config.cjs
@@ -1,14 +1,11 @@
 const path = require('node:path');
 const {
   createDetoxJestConfig,
-} = require('../../brownfield-example-shared-tests/e2e/createDetoxJestConfig.cjs');
+} = require('../../shared-tests/e2e/createDetoxJestConfig.cjs');
 
 module.exports = createDetoxJestConfig({
   e2eDir: __dirname,
   testMatch: [
-    path.join(
-      __dirname,
-      '../../brownfield-example-shared-tests/e2e/appleAppBrownfield.e2e.js'
-    ),
+    path.join(__dirname, '../../shared-tests/e2e/appleAppBrownfield.e2e.js'),
   ],
 });
diff --git a/apps/AppleApp/e2e/jest.config.expo57.cjs b/apps/AppleApp/e2e/jest.config.expo57.cjs
index bbba9cc8a..3b0f3519a 100644
--- a/apps/AppleApp/e2e/jest.config.expo57.cjs
+++ b/apps/AppleApp/e2e/jest.config.expo57.cjs
@@ -1,19 +1,16 @@
 const path = require('node:path');
 const {
   createDetoxJestConfig,
-} = require('../../brownfield-example-shared-tests/e2e/createDetoxJestConfig.cjs');
+} = require('../../shared-tests/e2e/createDetoxJestConfig.cjs');
 const {
   getAppleAppDetoxVariant,
-} = require('../../brownfield-example-shared-tests/detox-appleapp-variants.cjs');
+} = require('../../shared-tests/detox-appleapp-variants.cjs');
 
 const variant = getAppleAppDetoxVariant('expo57');
 
 module.exports = createDetoxJestConfig({
   e2eDir: __dirname,
   testMatch: [
-    path.join(
-      __dirname,
-      `../../brownfield-example-shared-tests/e2e/${variant.e2eTestFile}`
-    ),
+    path.join(__dirname, `../../shared-tests/e2e/${variant.e2eTestFile}`),
   ],
 });
diff --git a/apps/AppleApp/e2e/jest.config.expo58.cjs b/apps/AppleApp/e2e/jest.config.expo58.cjs
index 5fd456682..cde655f13 100644
--- a/apps/AppleApp/e2e/jest.config.expo58.cjs
+++ b/apps/AppleApp/e2e/jest.config.expo58.cjs
@@ -1,19 +1,16 @@
 const path = require('node:path');
 const {
   createDetoxJestConfig,
-} = require('../../brownfield-example-shared-tests/e2e/createDetoxJestConfig.cjs');
+} = require('../../shared-tests/e2e/createDetoxJestConfig.cjs');
 const {
   getAppleAppDetoxVariant,
-} = require('../../brownfield-example-shared-tests/detox-appleapp-variants.cjs');
+} = require('../../shared-tests/detox-appleapp-variants.cjs');
 
 const variant = getAppleAppDetoxVariant('expo58');
 
 module.exports = createDetoxJestConfig({
   e2eDir: __dirname,
   testMatch: [
-    path.join(
-      __dirname,
-      `../../brownfield-example-shared-tests/e2e/${variant.e2eTestFile}`
-    ),
+    path.join(__dirname, `../../shared-tests/e2e/${variant.e2eTestFile}`),
   ],
 });
diff --git a/apps/AppleApp/package.json b/apps/AppleApp/package.json
index 61c4d2e1e..a250eae05 100644
--- a/apps/AppleApp/package.json
+++ b/apps/AppleApp/package.json
@@ -21,7 +21,7 @@
     "ci:local:e2e:ios:expo57": "bash ../../scripts/ci-local-appleapp-ios-e2e.sh --variant expo57"
   },
   "devDependencies": {
-    "@callstack/brownfield-example-shared-tests": "workspace:^",
+    "@callstack/shared-tests": "workspace:^",
     "@rock-js/tools": "^0.13.5",
     "detox": "^20.27.0",
     "jest": "^29.7.0"
diff --git a/apps/ExpoApp57/RNApp.tsx b/apps/ExpoApp57/RNApp.tsx
index 54c987449..937e470dd 100644
--- a/apps/ExpoApp57/RNApp.tsx
+++ b/apps/ExpoApp57/RNApp.tsx
@@ -1,112 +1,11 @@
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { Button, StyleSheet, Text, View } from 'react-native';
-import BrownfieldNavigation from '@callstack/brownfield-navigation';
-import { checkAndFetchUpdate } from './src/utils/expo-rn-updates';
-
-import Counter from './src/components/counter';
-import ReactNativeBrownfield from '@callstack/react-native-brownfield';
-import { useMarkFullyDisplayed } from './src/hooks/use-mark-fully-displayed';
-
-type RNAppProps = {
-  nativeOsVersionLabel?: string;
-  brownfieldPresentationID?: string;
-};
-
-export default function RNApp({
-  nativeOsVersionLabel,
-  brownfieldPresentationID,
-}: RNAppProps) {
-  useMarkFullyDisplayed(brownfieldPresentationID);
-
-  const requestNativeConfirmation = async () => {
-    try {
-      await BrownfieldNavigation.requestNativeConfirmation(
-        'Are you sure you want to continue?'
-      );
-    } catch (error) {
-      console.error(`Native confirmation failed: ${error}`, 'native');
-    }
-  };
-
-  const showNativeBanner = () => {
-    BrownfieldNavigation.showNativeBanner('Hello from React Native!', () => {
-      console.log('Native banner dismissed');
-    });
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <Text style={styles.title}>Expo React Native Brownfield</Text>
-
-      {nativeOsVersionLabel ? (
-        <Text
-          style={styles.nativeOsVersionLabel}
-          accessibilityLabel="Native OS version"
-        >
-          {nativeOsVersionLabel}
-        </Text>
-      ) : null}
-
-      <View style={styles.content}>
-        <Counter />
-
-        <Button
-          title="Navigate to Settings"
-          onPress={() =>
-            BrownfieldNavigation.navigateToSettings({
-              id: 'expo-user-123',
-              name: 'Expo User',
-              flags: ['expo57'],
-              ids: ['expo-user-123'],
-            })
-          }
-        />
-        <Button
-          title="Navigate to Referrals"
-          onPress={() => BrownfieldNavigation.navigateToReferrals('123')}
-        />
-        <Button
-          onPress={requestNativeConfirmation}
-          title="Request native confirmation"
-        />
-
-        <Button onPress={showNativeBanner} title="Show native banner" />
-
-        <Button title="Fetch Update" onPress={checkAndFetchUpdate} />
-        <Button
-          title="Pop To Native"
-          onPress={() => ReactNativeBrownfield.popToNative(true)}
-        />
-      </View>
-    </SafeAreaView>
-  );
+import SharedRNApp from '@callstack/shared-runtime/expo/RNApp';
+import type { ComponentProps } from 'react';
+
+export default function RNApp(
+  props: Omit<
+    ComponentProps<typeof SharedRNApp>,
+    'sdkVersion' | 'showPopToNative'
+  >
+) {
+  return <SharedRNApp {...props} sdkVersion={57} showPopToNative />;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#eeeeee',
-    paddingTop: 20,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  nativeOsVersionLabel: {
-    fontSize: 11,
-    opacity: 0.75,
-    textAlign: 'center',
-    marginTop: 4,
-  },
-  content: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    fontSize: 18,
-    textAlign: 'center',
-    marginBottom: 5,
-  },
-});
diff --git a/apps/ExpoApp57/__tests__/brownfield.example.test.tsx b/apps/ExpoApp57/__tests__/brownfield.example.test.tsx
new file mode 100644
index 000000000..139b900bb
--- /dev/null
+++ b/apps/ExpoApp57/__tests__/brownfield.example.test.tsx
@@ -0,0 +1,15 @@
+import { runUserAlertSuite } from '@callstack/shared-tests';
+import PostMessageTab from '../src/app/postMessage';
+import Counter from '@callstack/shared-runtime/counter';
+import RNApp from '../RNApp';
+import {
+  runPostMessageTabSuite,
+  runCounterSuite,
+  runExpoRnAppSuite,
+} from '@callstack/shared-tests';
+
+runPostMessageTabSuite('ExpoApp57', PostMessageTab);
+runCounterSuite('ExpoApp57', Counter);
+runExpoRnAppSuite('ExpoApp57', RNApp, 57);
+
+runUserAlertSuite('ExpoApp57');
diff --git a/apps/ExpoApp57/entry.tsx b/apps/ExpoApp57/entry.tsx
index e99e5e429..1f3ca8333 100644
--- a/apps/ExpoApp57/entry.tsx
+++ b/apps/ExpoApp57/entry.tsx
@@ -2,7 +2,7 @@ import { ExpoRoot } from 'expo-router';
 import { AppRegistry } from 'react-native';
 
 import RNApp from './RNApp';
-import { useMarkFullyDisplayed } from './src/hooks/use-mark-fully-displayed';
+import { useMarkFullyDisplayed } from '@callstack/shared-runtime/useMarkFullyDisplayed';
 
 function App({
   brownfieldPresentationID,
diff --git a/apps/ExpoApp57/jest.config.js b/apps/ExpoApp57/jest.config.js
new file mode 100644
index 000000000..4ccf8b8e4
--- /dev/null
+++ b/apps/ExpoApp57/jest.config.js
@@ -0,0 +1,13 @@
+const {
+  createExpoJestConfig,
+} = require('@callstack/shared-tests/jest/expo-config');
+
+module.exports = createExpoJestConfig({
+  appRootDir: __dirname,
+  moduleNameMapper: {
+    // Match before `@/` so `@/global.css` is stubbed (Expo web styling).
+    '^.+\\.css$': '<rootDir>/jest/cssMock.js',
+    '^@/assets/(.*)$': '<rootDir>/assets/$1',
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+});
diff --git a/apps/ExpoApp57/jest.setup.js b/apps/ExpoApp57/jest.setup.js
new file mode 100644
index 000000000..e93f70e87
--- /dev/null
+++ b/apps/ExpoApp57/jest.setup.js
@@ -0,0 +1,7 @@
+require('@callstack/shared-tests/jest/setup');
+
+// postMessage tab reads safe-area insets; tests render it without a SafeAreaProvider.
+jest.mock(
+  'react-native-safe-area-context',
+  () => require('react-native-safe-area-context/jest/mock').default
+);
diff --git a/apps/ExpoApp57/jest/cssMock.js b/apps/ExpoApp57/jest/cssMock.js
new file mode 100644
index 000000000..815ec05ba
--- /dev/null
+++ b/apps/ExpoApp57/jest/cssMock.js
@@ -0,0 +1,2 @@
+/** Stub CSS imports for Jest (used by Expo Router / bundler pipeline). */
+module.exports = {};
diff --git a/apps/ExpoApp57/package.json b/apps/ExpoApp57/package.json
index cdcae0a68..66db7b179 100644
--- a/apps/ExpoApp57/package.json
+++ b/apps/ExpoApp57/package.json
@@ -6,6 +6,7 @@
     "@callstack/brownfield-navigation": "workspace:^",
     "@callstack/brownie": "workspace:^",
     "@callstack/react-native-brownfield": "workspace:^",
+    "@callstack/shared-runtime": "workspace:^",
     "@expo/ui": "~57.0.1",
     "expo": "~57.0.1",
     "expo-constants": "~57.0.2",
@@ -33,10 +34,17 @@
     "react-native-worklets": "0.10.0"
   },
   "devDependencies": {
-    "@callstack/brownfield-example-shared-tests": "workspace:^",
+    "@babel/core": "^7.29.6",
+    "@callstack/shared-tests": "workspace:^",
+    "@react-native/jest-preset": "0.86.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "29.5.14",
     "@types/react": "~19.2.2",
     "eslint": "~9.25.0",
     "eslint-config-expo": "~57.0.0",
+    "jest": "^29.7.0",
+    "jest-expo": "~57.0.1",
+    "react-test-renderer": "19.2.3",
     "typescript": "~6.0.3"
   },
   "scripts": {
@@ -50,7 +58,8 @@
     "brownfield:prepare:android:ci": "cd .. && node --experimental-strip-types --no-warnings ./scripts/prepare-android-build-gradle-for-ci.ts ExpoApp57",
     "brownfield:package:ios": "brownfield package:ios",
     "brownfield:package:android": "brownfield package:android",
-    "brownfield:publish:android": "brownfield publish:android"
+    "brownfield:publish:android": "brownfield publish:android",
+    "test": "jest --config jest.config.js"
   },
   "private": true
 }
diff --git a/apps/ExpoApp57/src/app/_layout.tsx b/apps/ExpoApp57/src/app/_layout.tsx
index 10ff15a2d..98e30f88c 100644
--- a/apps/ExpoApp57/src/app/_layout.tsx
+++ b/apps/ExpoApp57/src/app/_layout.tsx
@@ -1,19 +1,4 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router';
-import { useColorScheme } from 'react-native';
-
-import { AnimatedSplashOverlay } from '@/components/animated-icon';
-import AppTabs from '@/components/app-tabs';
-
-export const unstable_settings = {
-  initialRouteName: 'index',
-};
-
-export default function TabLayout() {
-  const colorScheme = useColorScheme();
-  return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <AnimatedSplashOverlay />
-      <AppTabs />
-    </ThemeProvider>
-  );
-}
+export {
+  default,
+  unstable_settings,
+} from '@callstack/shared-runtime/expo/app/layout';
diff --git a/apps/ExpoApp57/src/app/explore.tsx b/apps/ExpoApp57/src/app/explore.tsx
index 29340852d..7e971cc3b 100644
--- a/apps/ExpoApp57/src/app/explore.tsx
+++ b/apps/ExpoApp57/src/app/explore.tsx
@@ -1,180 +1 @@
-import { Image } from 'expo-image';
-import { SymbolView } from 'expo-symbols';
-import { Platform, Pressable, ScrollView, StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { ExternalLink } from '@/components/external-link';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { Collapsible } from '@/components/ui/collapsible';
-import { WebBadge } from '@/components/web-badge';
-import { BottomTabInset, MaxContentWidth, Spacing } from '@/constants/theme';
-import { useTheme } from '@/hooks/use-theme';
-
-export default function TabTwoScreen() {
-  const safeAreaInsets = useSafeAreaInsets();
-  const insets = {
-    ...safeAreaInsets,
-    bottom: safeAreaInsets.bottom + BottomTabInset + Spacing.three,
-  };
-  const theme = useTheme();
-
-  const contentPlatformStyle = Platform.select({
-    android: {
-      paddingTop: insets.top,
-      paddingLeft: insets.left,
-      paddingRight: insets.right,
-      paddingBottom: insets.bottom,
-    },
-    web: {
-      paddingTop: Spacing.six,
-      paddingBottom: Spacing.four,
-    },
-  });
-
-  return (
-    <ScrollView
-      style={[styles.scrollView, { backgroundColor: theme.background }]}
-      contentInset={insets}
-      contentContainerStyle={[styles.contentContainer, contentPlatformStyle]}>
-      <ThemedView style={styles.container}>
-        <ThemedView style={styles.titleContainer}>
-          <ThemedText type="subtitle">Explore</ThemedText>
-          <ThemedText style={styles.centerText} themeColor="textSecondary">
-            This starter app includes example{'\n'}code to help you get started.
-          </ThemedText>
-
-          <ExternalLink href="https://docs.expo.dev" asChild>
-            <Pressable style={({ pressed }) => pressed && styles.pressed}>
-              <ThemedView type="backgroundElement" style={styles.linkButton}>
-                <ThemedText type="link">Expo documentation</ThemedText>
-                <SymbolView
-                  tintColor={theme.text}
-                  name={{ ios: 'arrow.up.right.square', android: 'link', web: 'link' }}
-                  size={12}
-                />
-              </ThemedView>
-            </Pressable>
-          </ExternalLink>
-        </ThemedView>
-
-        <ThemedView style={styles.sectionsWrapper}>
-          <Collapsible title="File-based routing">
-            <ThemedText type="small">
-              This app has two screens: <ThemedText type="code">src/app/index.tsx</ThemedText> and{' '}
-              <ThemedText type="code">src/app/explore.tsx</ThemedText>
-            </ThemedText>
-            <ThemedText type="small">
-              The layout file in <ThemedText type="code">src/app/_layout.tsx</ThemedText> sets up
-              the tab navigator.
-            </ThemedText>
-            <ExternalLink href="https://docs.expo.dev/router/introduction">
-              <ThemedText type="linkPrimary">Learn more</ThemedText>
-            </ExternalLink>
-          </Collapsible>
-
-          <Collapsible title="Android, iOS, and web support">
-            <ThemedView type="backgroundElement" style={styles.collapsibleContent}>
-              <ThemedText type="small">
-                You can open this project on Android, iOS, and the web. To open the web version,
-                press <ThemedText type="smallBold">w</ThemedText> in the terminal running this
-                project.
-              </ThemedText>
-              <Image
-                source={require('@/assets/images/tutorial-web.png')}
-                style={styles.imageTutorial}
-              />
-            </ThemedView>
-          </Collapsible>
-
-          <Collapsible title="Images">
-            <ThemedText type="small">
-              For static images, you can use the <ThemedText type="code">@2x</ThemedText> and{' '}
-              <ThemedText type="code">@3x</ThemedText> suffixes to provide files for different
-              screen densities.
-            </ThemedText>
-            <Image source={require('@/assets/images/react-logo.png')} style={styles.imageReact} />
-            <ExternalLink href="https://reactnative.dev/docs/images">
-              <ThemedText type="linkPrimary">Learn more</ThemedText>
-            </ExternalLink>
-          </Collapsible>
-
-          <Collapsible title="Light and dark mode components">
-            <ThemedText type="small">
-              This template has light and dark mode support. The{' '}
-              <ThemedText type="code">useColorScheme()</ThemedText> hook lets you inspect what the
-              user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
-            </ThemedText>
-            <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-              <ThemedText type="linkPrimary">Learn more</ThemedText>
-            </ExternalLink>
-          </Collapsible>
-
-          <Collapsible title="Animations">
-            <ThemedText type="small">
-              This template includes an example of an animated component. The{' '}
-              <ThemedText type="code">src/components/ui/collapsible.tsx</ThemedText> component uses
-              the powerful <ThemedText type="code">react-native-reanimated</ThemedText> library to
-              animate opening this hint.
-            </ThemedText>
-          </Collapsible>
-        </ThemedView>
-        {Platform.OS === 'web' && <WebBadge />}
-      </ThemedView>
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  scrollView: {
-    flex: 1,
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  container: {
-    maxWidth: MaxContentWidth,
-    flexGrow: 1,
-  },
-  titleContainer: {
-    gap: Spacing.three,
-    alignItems: 'center',
-    paddingHorizontal: Spacing.four,
-    paddingVertical: Spacing.six,
-  },
-  centerText: {
-    textAlign: 'center',
-  },
-  pressed: {
-    opacity: 0.7,
-  },
-  linkButton: {
-    flexDirection: 'row',
-    paddingHorizontal: Spacing.four,
-    paddingVertical: Spacing.two,
-    borderRadius: Spacing.five,
-    justifyContent: 'center',
-    gap: Spacing.one,
-    alignItems: 'center',
-  },
-  sectionsWrapper: {
-    gap: Spacing.five,
-    paddingHorizontal: Spacing.four,
-    paddingTop: Spacing.three,
-  },
-  collapsibleContent: {
-    alignItems: 'center',
-  },
-  imageTutorial: {
-    width: '100%',
-    aspectRatio: 296 / 171,
-    borderRadius: Spacing.three,
-    marginTop: Spacing.two,
-  },
-  imageReact: {
-    width: 100,
-    height: 100,
-    alignSelf: 'center',
-  },
-});
+export { default } from '@callstack/shared-runtime/expo/app/explore';
diff --git a/apps/ExpoApp57/src/app/index.tsx b/apps/ExpoApp57/src/app/index.tsx
index 6c5734032..04b1cc4f5 100644
--- a/apps/ExpoApp57/src/app/index.tsx
+++ b/apps/ExpoApp57/src/app/index.tsx
@@ -1,117 +1,5 @@
-import * as Device from 'expo-device';
-import LottieView from 'lottie-react-native';
-import { Button, Platform, StyleSheet } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { brownfieldE2ETestIds } from '@callstack/brownfield-example-shared-tests/e2eTestIds';
+import HomeScreen from '@callstack/shared-runtime/expo/app/home';
 
-import { AnimatedIcon } from '@/components/animated-icon';
-import { HintRow } from '@/components/hint-row';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { WebBadge } from '@/components/web-badge';
-import { BottomTabInset, MaxContentWidth, Spacing } from '@/constants/theme';
-import { checkAndFetchUpdate } from '@/utils/expo-rn-updates';
-
-function getDevMenuHint() {
-  if (Platform.OS === 'web') {
-    return <ThemedText type="small">use browser devtools</ThemedText>;
-  }
-  if (Device.isDevice) {
-    return (
-      <ThemedText type="small">
-        shake device or press <ThemedText type="code">m</ThemedText> in terminal
-      </ThemedText>
-    );
-  }
-  const shortcut = Platform.OS === 'android' ? 'cmd+m (or ctrl+m)' : 'cmd+d';
-  return (
-    <ThemedText type="small">
-      press <ThemedText type="code">{shortcut}</ThemedText>
-    </ThemedText>
-  );
+export default function Index() {
+  return <HomeScreen sdkVersion={57} />;
 }
-
-export default function HomeScreen() {
-  return (
-    <ThemedView
-      testID={brownfieldE2ETestIds.rnAppHome}
-      style={styles.container}
-    >
-      <SafeAreaView style={styles.safeArea}>
-        {/* Community library with its own Android dependency: the host crashes if it's missing from the POM. */}
-        <LottieView
-          source={{ v: '5.7.4', fr: 30, ip: 0, op: 1, w: 1, h: 1, layers: [] }}
-          style={{ position: 'absolute', width: 1, height: 1 }}
-        />
-
-        <ThemedView style={styles.heroSection}>
-          <AnimatedIcon />
-          <ThemedText
-            type="title"
-            style={styles.title}
-            testID={brownfieldE2ETestIds.rnAppHomeTitle}
-            accessibilityLabel="Welcome to Expo 57"
-          >
-            Welcome to&nbsp;Expo&nbsp;57
-          </ThemedText>
-        </ThemedView>
-
-        <ThemedText type="code" style={styles.code}>
-          get started
-        </ThemedText>
-
-        <ThemedView type="backgroundElement" style={styles.stepContainer}>
-          <HintRow
-            title="Try editing"
-            hint={<ThemedText type="code">src/app/index.tsx</ThemedText>}
-          />
-          <HintRow title="Dev tools" hint={getDevMenuHint()} />
-          <HintRow
-            title="Fresh start"
-            hint={<ThemedText type="code">npm run reset-project</ThemedText>}
-          />
-        </ThemedView>
-
-        <Button title="Fetch Update" onPress={checkAndFetchUpdate} />
-
-        {Platform.OS === 'web' && <WebBadge />}
-      </SafeAreaView>
-    </ThemedView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    flexDirection: 'row',
-    paddingTop: Spacing.three,
-  },
-  safeArea: {
-    flex: 1,
-    paddingHorizontal: Spacing.four,
-    alignItems: 'center',
-    gap: Spacing.three,
-    paddingBottom: BottomTabInset + Spacing.three,
-    maxWidth: MaxContentWidth,
-  },
-  heroSection: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: Spacing.four,
-    gap: Spacing.four,
-  },
-  title: {
-    textAlign: 'center',
-  },
-  code: {
-    textTransform: 'uppercase',
-  },
-  stepContainer: {
-    gap: Spacing.three,
-    alignSelf: 'stretch',
-    paddingHorizontal: Spacing.three,
-    paddingVertical: Spacing.four,
-    borderRadius: Spacing.four,
-  },
-});
diff --git a/apps/ExpoApp57/src/app/postMessage.tsx b/apps/ExpoApp57/src/app/postMessage.tsx
index 3c4caf62d..2dfa1033d 100644
--- a/apps/ExpoApp57/src/app/postMessage.tsx
+++ b/apps/ExpoApp57/src/app/postMessage.tsx
@@ -1,118 +1 @@
-import { StyleSheet, FlatList, TouchableOpacity } from 'react-native';
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { brownfieldE2ETestIds } from '@callstack/brownfield-example-shared-tests/e2eTestIds';
-import ReactNativeBrownfield from '@callstack/react-native-brownfield';
-import type { MessageEvent } from '@callstack/react-native-brownfield';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { ThemedView } from '@/components/themed-view';
-import { ThemedText } from '@/components/themed-text';
-import type { Message } from '@/components/postMessage/Message';
-import { MessageBubble } from '@/components/postMessage/MessageBubble';
-import { BottomTabInset, Spacing } from '@/constants/theme';
-
-export default function PostMessageTab() {
-  const insets = useSafeAreaInsets();
-  const [messages, setMessages] = useState<Message[]>([]);
-  const flatListRef = useRef<FlatList<Message>>(null);
-
-  const messageCounterRef = useRef(0);
-
-  useEffect(() => {
-    const sub = ReactNativeBrownfield.onMessage((event: MessageEvent) => {
-      const data = event.data as { text?: string };
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: String(++messageCounterRef.current),
-          text: data?.text ?? JSON.stringify(event.data),
-          from: 'native',
-          timestamp: Date.now(),
-        },
-      ]);
-    });
-    return () => sub.remove();
-  }, []);
-
-  const sendMessage = useCallback(() => {
-    const msg = {
-      text: `Hello from Expo! (#${++messageCounterRef.current})`,
-      timestamp: Date.now(),
-    };
-    ReactNativeBrownfield.postMessage(msg);
-    setMessages((prev) => [
-      ...prev,
-      {
-        id: String(messageCounterRef.current),
-        text: msg.text,
-        from: 'rn',
-        timestamp: msg.timestamp,
-      },
-    ]);
-  }, []);
-
-  return (
-    <ThemedView
-      style={[
-        styles.messageSection,
-        {
-          paddingTop: insets.top + Spacing.three,
-          paddingBottom: insets.bottom + BottomTabInset,
-          paddingLeft: insets.left + 20,
-          paddingRight: insets.right + 20,
-        },
-      ]}
-    >
-      <TouchableOpacity
-        testID={brownfieldE2ETestIds.sendMessageToNative}
-        style={styles.sendButton}
-        onPress={sendMessage}
-        activeOpacity={0.8}
-      >
-        <ThemedText style={styles.sendButtonText}>
-          Send message to Native
-        </ThemedText>
-      </TouchableOpacity>
-
-      <FlatList
-        data={messages}
-        keyExtractor={(item) => `message-${item.id}`}
-        renderItem={({ item }) => <MessageBubble item={item} />}
-        style={styles.messageList}
-        contentContainerStyle={styles.messageListContent}
-        inverted={true} // ensure newest messages are at the top
-        onContentSizeChange={() => {
-          flatListRef.current?.scrollToEnd({ animated: true });
-        }}
-        ref={flatListRef}
-      />
-    </ThemedView>
-  );
-}
-
-const styles = StyleSheet.create({
-  messageSection: {
-    flex: 1,
-    width: '100%',
-  },
-  sendButton: {
-    paddingVertical: 12,
-    paddingHorizontal: 20,
-    borderRadius: 10,
-    alignItems: 'center',
-    marginBottom: 10,
-    backgroundColor: '#4F8EF7',
-  },
-  sendButtonText: {
-    fontWeight: '700',
-    fontSize: 15,
-    color: '#fff',
-  },
-  messageList: {
-    flex: 1,
-  },
-  messageListContent: {
-    paddingBottom: 8,
-  },
-});
+export { default } from '@callstack/shared-runtime/expo/app/postMessage';
diff --git a/apps/ExpoApp57/src/components/app-tabs.tsx b/apps/ExpoApp57/src/components/app-tabs.tsx
deleted file mode 100644
index 46e1428ea..000000000
--- a/apps/ExpoApp57/src/components/app-tabs.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { NativeTabs } from 'expo-router/unstable-native-tabs';
-import { useColorScheme } from 'react-native';
-import { brownfieldE2ETestIds } from '@callstack/brownfield-example-shared-tests/e2eTestIds';
-
-import { Colors } from '@/constants/theme';
-
-export default function AppTabs() {
-  const scheme = useColorScheme();
-  const colors = Colors[scheme === 'unspecified' ? 'light' : scheme];
-
-  return (
-    <NativeTabs
-      backgroundColor={colors.background}
-      indicatorColor={colors.backgroundElement}
-      labelStyle={{ selected: { color: colors.text } }}>
-      <NativeTabs.Trigger
-        name="index"
-        unstable_nativeProps={{
-          tabBarItemTestID: brownfieldE2ETestIds.expoHomeTab,
-          tabBarItemAccessibilityLabel: 'Home',
-        }}>
-        <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
-        <NativeTabs.Trigger.Icon
-          src={require('@/assets/images/tabIcons/home.png')}
-          renderingMode="template"
-        />
-      </NativeTabs.Trigger>
-
-      <NativeTabs.Trigger name="explore">
-        <NativeTabs.Trigger.Label>Explore</NativeTabs.Trigger.Label>
-        <NativeTabs.Trigger.Icon
-          src={require('@/assets/images/tabIcons/explore.png')}
-          renderingMode="template"
-        />
-      </NativeTabs.Trigger>
-
-      <NativeTabs.Trigger
-        name="postMessage"
-        unstable_nativeProps={{
-          tabBarItemTestID: brownfieldE2ETestIds.expoPostMessageTab,
-          tabBarItemAccessibilityLabel: 'postMessage API',
-        }}>
-        <NativeTabs.Trigger.Label>postMessage API</NativeTabs.Trigger.Label>
-        <NativeTabs.Trigger.Icon md="message" sf="message.fill" />
-      </NativeTabs.Trigger>
-    </NativeTabs>
-  );
-}
diff --git a/apps/ExpoApp57/src/components/app-tabs.web.tsx b/apps/ExpoApp57/src/components/app-tabs.web.tsx
deleted file mode 100644
index ca2787df7..000000000
--- a/apps/ExpoApp57/src/components/app-tabs.web.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import {
-  Tabs,
-  TabList,
-  TabTrigger,
-  TabSlot,
-  TabTriggerSlotProps,
-  TabListProps,
-} from 'expo-router/ui';
-import { SymbolView } from 'expo-symbols';
-import { Pressable, useColorScheme, View, StyleSheet } from 'react-native';
-
-import { ExternalLink } from './external-link';
-import { ThemedText } from './themed-text';
-import { ThemedView } from './themed-view';
-
-import { Colors, MaxContentWidth, Spacing } from '@/constants/theme';
-
-export default function AppTabs() {
-  return (
-    <Tabs>
-      <TabSlot style={{ height: '100%' }} />
-      <TabList asChild>
-        <CustomTabList>
-          <TabTrigger name="home" href="/" asChild>
-            <TabButton>Home</TabButton>
-          </TabTrigger>
-          <TabTrigger name="explore" href="/explore" asChild>
-            <TabButton>Explore</TabButton>
-          </TabTrigger>
-        </CustomTabList>
-      </TabList>
-    </Tabs>
-  );
-}
-
-export function TabButton({ children, isFocused, ...props }: TabTriggerSlotProps) {
-  return (
-    <Pressable {...props} style={({ pressed }) => pressed && styles.pressed}>
-      <ThemedView
-        type={isFocused ? 'backgroundSelected' : 'backgroundElement'}
-        style={styles.tabButtonView}>
-        <ThemedText type="small" themeColor={isFocused ? 'text' : 'textSecondary'}>
-          {children}
-        </ThemedText>
-      </ThemedView>
-    </Pressable>
-  );
-}
-
-export function CustomTabList(props: TabListProps) {
-  const scheme = useColorScheme();
-  const colors = Colors[scheme === 'unspecified' ? 'light' : scheme];
-
-  return (
-    <View {...props} style={styles.tabListContainer}>
-      <ThemedView type="backgroundElement" style={styles.innerContainer}>
-        <ThemedText type="smallBold" style={styles.brandText}>
-          Expo Starter
-        </ThemedText>
-
-        {props.children}
-
-        <ExternalLink href="https://docs.expo.dev" asChild>
-          <Pressable style={styles.externalPressable}>
-            <ThemedText type="link">Docs</ThemedText>
-            <SymbolView
-              tintColor={colors.text}
-              name={{ ios: 'arrow.up.right.square', web: 'link' }}
-              size={12}
-            />
-          </Pressable>
-        </ExternalLink>
-      </ThemedView>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  tabListContainer: {
-    position: 'absolute',
-    width: '100%',
-    padding: Spacing.three,
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  innerContainer: {
-    paddingVertical: Spacing.two,
-    paddingHorizontal: Spacing.five,
-    borderRadius: Spacing.five,
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexGrow: 1,
-    gap: Spacing.two,
-    maxWidth: MaxContentWidth,
-  },
-  brandText: {
-    marginRight: 'auto',
-  },
-  pressed: {
-    opacity: 0.7,
-  },
-  tabButtonView: {
-    paddingVertical: Spacing.one,
-    paddingHorizontal: Spacing.three,
-    borderRadius: Spacing.three,
-  },
-  externalPressable: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: Spacing.one,
-    marginLeft: Spacing.three,
-  },
-});
diff --git a/apps/ExpoApp57/src/components/counter/index.tsx b/apps/ExpoApp57/src/components/counter/index.tsx
deleted file mode 100644
index 52b3ccab7..000000000
--- a/apps/ExpoApp57/src/components/counter/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { StyleSheet, Text, Button } from 'react-native';
-import { useStore } from '@callstack/brownie';
-
-const Counter = () => {
-  const [counter, setState] = useStore('BrownfieldStore', (s) => s.counter);
-
-  return (
-    <>
-      <Text style={styles.text}>Count: {counter}</Text>
-
-      <Button
-        onPress={() => setState((prev) => ({ counter: prev.counter + 1 }))}
-        title="Increment"
-      />
-    </>
-  );
-};
-
-export default Counter;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20,
-  },
-  text: {
-    fontSize: 30,
-    fontWeight: 'bold',
-    margin: 10,
-  },
-});
diff --git a/apps/ExpoApp57/src/components/external-link.tsx b/apps/ExpoApp57/src/components/external-link.tsx
deleted file mode 100644
index 883e515a4..000000000
--- a/apps/ExpoApp57/src/components/external-link.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Href, Link } from 'expo-router';
-import { openBrowserAsync, WebBrowserPresentationStyle } from 'expo-web-browser';
-import { type ComponentProps } from 'react';
-
-type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
-
-export function ExternalLink({ href, ...rest }: Props) {
-  return (
-    <Link
-      target="_blank"
-      {...rest}
-      href={href}
-      onPress={async (event) => {
-        if (process.env.EXPO_OS !== 'web') {
-          // Prevent the default behavior of linking to the default browser on native.
-          event.preventDefault();
-          // Open the link in an in-app browser.
-          await openBrowserAsync(href, {
-            presentationStyle: WebBrowserPresentationStyle.AUTOMATIC,
-          });
-        }
-      }}
-    />
-  );
-}
diff --git a/apps/ExpoApp57/src/components/hint-row.tsx b/apps/ExpoApp57/src/components/hint-row.tsx
deleted file mode 100644
index acf4dc5d8..000000000
--- a/apps/ExpoApp57/src/components/hint-row.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { ReactNode } from 'react';
-import { View, StyleSheet } from 'react-native';
-
-import { ThemedText } from './themed-text';
-import { ThemedView } from './themed-view';
-
-import { Spacing } from '@/constants/theme';
-
-type HintRowProps = {
-  title?: string;
-  hint?: ReactNode;
-};
-
-export function HintRow({ title = 'Try editing', hint = 'app/index.tsx' }: HintRowProps) {
-  return (
-    <View style={styles.stepRow}>
-      <ThemedText type="small">{title}</ThemedText>
-      <ThemedView type="backgroundSelected" style={styles.codeSnippet}>
-        <ThemedText themeColor="textSecondary">{hint}</ThemedText>
-      </ThemedView>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  stepRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  codeSnippet: {
-    borderRadius: Spacing.two,
-    paddingVertical: Spacing.half,
-    paddingHorizontal: Spacing.two,
-  },
-});
diff --git a/apps/ExpoApp57/src/components/postMessage/MessageBubble.tsx b/apps/ExpoApp57/src/components/postMessage/MessageBubble.tsx
deleted file mode 100644
index b8975896e..000000000
--- a/apps/ExpoApp57/src/components/postMessage/MessageBubble.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Animated, StyleSheet } from 'react-native';
-import { Message } from './Message';
-import { useEffect, useState } from 'react';
-import { brownfieldE2ETestIds } from '@callstack/brownfield-example-shared-tests/e2eTestIds';
-import { ThemedText } from '@/components/themed-text';
-
-export function MessageBubble({ item }: { item: Message }) {
-  const [opacity] = useState(() => new Animated.Value(0));
-  const [translateY] = useState(() => new Animated.Value(20));
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.timing(opacity, {
-        toValue: 1,
-        duration: 300,
-        useNativeDriver: true,
-      }),
-      Animated.spring(translateY, {
-        toValue: 0,
-        tension: 80,
-        friction: 10,
-        useNativeDriver: true,
-      }),
-    ]).start();
-  }, [opacity, translateY]);
-
-  const isFromNative = item.from === 'native';
-
-  return (
-    <Animated.View
-      style={[
-        styles.bubble,
-        isFromNative ? styles.bubbleNative : styles.bubbleRN,
-        {
-          opacity,
-          transform: [{ translateY }],
-          borderColor: isFromNative ? '#4F8EF7' : '#DAA520',
-        },
-      ]}
-    >
-      <ThemedText style={styles.bubbleLabel}>
-        {isFromNative ? 'From Native' : 'From RN'}
-      </ThemedText>
-      <ThemedText
-        style={styles.bubbleText}
-        testID={
-          isFromNative ? undefined : brownfieldE2ETestIds.rnPostMessageText
-        }>
-        {item.text}
-      </ThemedText>
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  bubble: {
-    padding: 10,
-    borderRadius: 10,
-    borderWidth: 1,
-    marginBottom: 6,
-  },
-  bubbleNative: {
-    alignSelf: 'flex-start',
-    backgroundColor: 'rgba(79, 142, 247, 0.1)',
-    maxWidth: '80%',
-  },
-  bubbleRN: {
-    alignSelf: 'flex-end',
-    backgroundColor: 'rgba(218, 165, 32, 0.1)',
-    maxWidth: '80%',
-  },
-  bubbleLabel: {
-    fontSize: 10,
-    fontWeight: '600',
-    marginBottom: 2,
-    textTransform: 'uppercase',
-  },
-  bubbleText: {
-    fontSize: 14,
-  },
-});
diff --git a/apps/ExpoApp57/src/components/themed-view.tsx b/apps/ExpoApp57/src/components/themed-view.tsx
deleted file mode 100644
index c710df9b6..000000000
--- a/apps/ExpoApp57/src/components/themed-view.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { View, type ViewProps } from 'react-native';
-
-import { ThemeColor } from '@/constants/theme';
-import { useTheme } from '@/hooks/use-theme';
-
-export type ThemedViewProps = ViewProps & {
-  lightColor?: string;
-  darkColor?: string;
-  type?: ThemeColor;
-};
-
-export function ThemedView({ style, lightColor, darkColor, type, ...otherProps }: ThemedViewProps) {
-  const theme = useTheme();
-
-  return <View style={[{ backgroundColor: theme[type ?? 'background'] }, style]} {...otherProps} />;
-}
diff --git a/apps/ExpoApp57/src/components/ui/collapsible.tsx b/apps/ExpoApp57/src/components/ui/collapsible.tsx
deleted file mode 100644
index d0d745b40..000000000
--- a/apps/ExpoApp57/src/components/ui/collapsible.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { SymbolView } from 'expo-symbols';
-import { PropsWithChildren, useState } from 'react';
-import { Pressable, StyleSheet } from 'react-native';
-import Animated, { FadeIn } from 'react-native-reanimated';
-
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { Spacing } from '@/constants/theme';
-import { useTheme } from '@/hooks/use-theme';
-
-export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const theme = useTheme();
-
-  return (
-    <ThemedView>
-      <Pressable
-        style={({ pressed }) => [styles.heading, pressed && styles.pressedHeading]}
-        onPress={() => setIsOpen((value) => !value)}>
-        <ThemedView type="backgroundElement" style={styles.button}>
-          <SymbolView
-            name={{ ios: 'chevron.right', android: 'chevron_right', web: 'chevron_right' }}
-            size={14}
-            weight="bold"
-            tintColor={theme.text}
-            style={{ transform: [{ rotate: isOpen ? '-90deg' : '90deg' }] }}
-          />
-        </ThemedView>
-
-        <ThemedText type="small">{title}</ThemedText>
-      </Pressable>
-      {isOpen && (
-        <Animated.View entering={FadeIn.duration(200)}>
-          <ThemedView type="backgroundElement" style={styles.content}>
-            {children}
-          </ThemedView>
-        </Animated.View>
-      )}
-    </ThemedView>
-  );
-}
-
-const styles = StyleSheet.create({
-  heading: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: Spacing.two,
-  },
-  pressedHeading: {
-    opacity: 0.7,
-  },
-  button: {
-    width: Spacing.four,
-    height: Spacing.four,
-    borderRadius: 12,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  content: {
-    marginTop: Spacing.three,
-    borderRadius: Spacing.three,
-    marginLeft: Spacing.four,
-    padding: Spacing.four,
-  },
-});
diff --git a/apps/ExpoApp57/src/global.css b/apps/ExpoApp57/src/global.css
deleted file mode 100644
index c8fe5031a..000000000
--- a/apps/ExpoApp57/src/global.css
+++ /dev/null
@@ -1,9 +0,0 @@
-:root {
-  --font-display:
-    Spline Sans, Inter, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-    Segoe UI Symbol, Noto Color Emoji;
-  --font-mono:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
-  --font-rounded: 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif;
-  --font-serif: Georgia, 'Times New Roman', serif;
-}
diff --git a/apps/ExpoApp57/src/hooks/use-color-scheme.web.ts b/apps/ExpoApp57/src/hooks/use-color-scheme.web.ts
deleted file mode 100644
index 85252d55e..000000000
--- a/apps/ExpoApp57/src/hooks/use-color-scheme.web.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useColorScheme as useRNColorScheme } from 'react-native';
-
-/**
- * To support static rendering, this value needs to be re-calculated on the client side for web
- */
-export function useColorScheme() {
-  const [hasHydrated, setHasHydrated] = useState(false);
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setHasHydrated(true);
-  }, []);
-
-  const colorScheme = useRNColorScheme();
-
-  if (hasHydrated) {
-    return colorScheme;
-  }
-
-  return 'light';
-}
diff --git a/apps/ExpoApp57/src/hooks/use-mark-fully-displayed.ts b/apps/ExpoApp57/src/hooks/use-mark-fully-displayed.ts
deleted file mode 100644
index 2028a55e1..000000000
--- a/apps/ExpoApp57/src/hooks/use-mark-fully-displayed.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-import ReactNativeBrownfield from '@callstack/react-native-brownfield';
-
-/**
- * Demo only: stands in for the data this screen would load before it is useful.
- * Real apps call `markFullyDisplayed` once that data has rendered, not after a fixed delay.
- */
-const DEMO_FULL_DISPLAY_DELAY_MS = 500;
-
-/** Marks the native presentation as fully displayed (TTFD) after the demo delay. */
-export function useMarkFullyDisplayed(brownfieldPresentationID?: string) {
-  useEffect(() => {
-    if (!brownfieldPresentationID) {
-      return;
-    }
-    const timeout = setTimeout(
-      () => ReactNativeBrownfield.markFullyDisplayed(brownfieldPresentationID),
-      DEMO_FULL_DISPLAY_DELAY_MS
-    );
-    return () => clearTimeout(timeout);
-  }, [brownfieldPresentationID]);
-}
diff --git a/apps/ExpoApp57/src/utils/expo-rn-updates.ts b/apps/ExpoApp57/src/utils/expo-rn-updates.ts
deleted file mode 100644
index 58eaed017..000000000
--- a/apps/ExpoApp57/src/utils/expo-rn-updates.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as Updates from 'expo-updates';
-import { Alert } from 'react-native';
-
-export async function checkAndFetchUpdate() {
-  try {
-    const update = await Updates.checkForUpdateAsync();
-    if (update.isAvailable) {
-      await Updates.fetchUpdateAsync();
-
-      await Updates.reloadAsync({
-        reloadScreenOptions: {
-          spinner: {
-            enabled: true,
-            color: 'red',
-            size: 'large',
-          },
-        },
-      });
-    } else {
-      Alert.alert('No update available');
-    }
-  } catch (error) {
-    Alert.alert('Update check failed', String(error));
-  }
-}
diff --git a/apps/ExpoApp57/tsconfig.json b/apps/ExpoApp57/tsconfig.json
index 2e9a6695e..99560b9aa 100644
--- a/apps/ExpoApp57/tsconfig.json
+++ b/apps/ExpoApp57/tsconfig.json
@@ -9,7 +9,12 @@
       "@/assets/*": [
         "./assets/*"
       ]
-    }
+    },
+    "preserveSymlinks": true,
+    "types": [
+      "expo/types",
+      "jest"
+    ]
   },
   "include": [
     "**/*.ts",
diff --git a/apps/ExpoApp58/RNApp.tsx b/apps/ExpoApp58/RNApp.tsx
index ee304543b..9a3d5b58c 100644
--- a/apps/ExpoApp58/RNApp.tsx
+++ b/apps/ExpoApp58/RNApp.tsx
@@ -1,107 +1,11 @@
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { Button, StyleSheet, Text, View } from 'react-native';
-import BrownfieldNavigation from '@callstack/brownfield-navigation';
-import { checkAndFetchUpdate } from './src/utils/expo-rn-updates';
-
-import Counter from './src/components/counter';
-import { useMarkFullyDisplayed } from './src/hooks/use-mark-fully-displayed';
-
-type RNAppProps = {
-  nativeOsVersionLabel?: string;
-  brownfieldPresentationID?: string;
-};
-
-export default function RNApp({
-  nativeOsVersionLabel,
-  brownfieldPresentationID,
-}: RNAppProps) {
-  useMarkFullyDisplayed(brownfieldPresentationID);
-
-  const requestNativeConfirmation = async () => {
-    try {
-      await BrownfieldNavigation.requestNativeConfirmation(
-        'Are you sure you want to continue?'
-      );
-    } catch (error) {
-      console.error(`Native confirmation failed: ${error}`, 'native');
-    }
-  };
-
-  const showNativeBanner = () => {
-    BrownfieldNavigation.showNativeBanner('Hello from React Native!', () => {
-      console.log('Native banner dismissed');
-    });
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <Text style={styles.title}>Expo React Native Brownfield</Text>
-
-      {nativeOsVersionLabel ? (
-        <Text
-          style={styles.nativeOsVersionLabel}
-          accessibilityLabel="Native OS version"
-        >
-          {nativeOsVersionLabel}
-        </Text>
-      ) : null}
-
-      <View style={styles.content}>
-        <Counter />
-
-        <Button
-          title="Navigate to Settings"
-          onPress={() =>
-            BrownfieldNavigation.navigateToSettings({
-              id: 'expo-user-123',
-              name: 'Expo User',
-              flags: ['expo58'],
-              ids: ['expo-user-123'],
-            })
-          }
-        />
-        <Button
-          title="Navigate to Referrals"
-          onPress={() => BrownfieldNavigation.navigateToReferrals('123')}
-        />
-        <Button
-          onPress={requestNativeConfirmation}
-          title="Request native confirmation"
-        />
-
-        <Button onPress={showNativeBanner} title="Show native banner" />
-
-        <Button title="Fetch Update" onPress={checkAndFetchUpdate} />
-      </View>
-    </SafeAreaView>
-  );
+import SharedRNApp from '@callstack/shared-runtime/expo/RNApp';
+import type { ComponentProps } from 'react';
+
+export default function RNApp(
+  props: Omit<
+    ComponentProps<typeof SharedRNApp>,
+    'sdkVersion' | 'showPopToNative'
+  >
+) {
+  return <SharedRNApp {...props} sdkVersion={58} />;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#eeeeee',
-    paddingTop: 20,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  nativeOsVersionLabel: {
-    fontSize: 11,
-    opacity: 0.75,
-    textAlign: 'center',
-    marginTop: 4,
-  },
-  content: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    fontSize: 18,
-    textAlign: 'center',
-    marginBottom: 5,
-  },
-});
diff --git a/apps/ExpoApp58/__tests__/brownfield.example.test.tsx b/apps/ExpoApp58/__tests__/brownfield.example.test.tsx
index 44ad1f5da..29ef42ec7 100644
--- a/apps/ExpoApp58/__tests__/brownfield.example.test.tsx
+++ b/apps/ExpoApp58/__tests__/brownfield.example.test.tsx
@@ -1,12 +1,15 @@
+import { runUserAlertSuite } from '@callstack/shared-tests';
 import PostMessageTab from '../src/app/postMessage';
-import Counter from '../src/components/counter';
+import Counter from '@callstack/shared-runtime/counter';
 import RNApp from '../RNApp';
 import {
   runPostMessageTabSuite,
   runCounterSuite,
   runExpoRnAppSuite,
-} from '@callstack/brownfield-example-shared-tests';
+} from '@callstack/shared-tests';
 
 runPostMessageTabSuite('ExpoApp58', PostMessageTab);
 runCounterSuite('ExpoApp58', Counter);
-runExpoRnAppSuite('ExpoApp58', RNApp);
+runExpoRnAppSuite('ExpoApp58', RNApp, 58);
+
+runUserAlertSuite('ExpoApp58');
diff --git a/apps/ExpoApp58/assets/images/expo-badge-white.png b/apps/ExpoApp58/assets/images/expo-badge-white.png
deleted file mode 100644
index 28630679f..000000000
Binary files a/apps/ExpoApp58/assets/images/expo-badge-white.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/expo-badge.png b/apps/ExpoApp58/assets/images/expo-badge.png
deleted file mode 100644
index 5d5c5bb5c..000000000
Binary files a/apps/ExpoApp58/assets/images/expo-badge.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/expo-logo.png b/apps/ExpoApp58/assets/images/expo-logo.png
deleted file mode 100644
index 6b1642a0b..000000000
Binary files a/apps/ExpoApp58/assets/images/expo-logo.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/logo-glow.png b/apps/ExpoApp58/assets/images/logo-glow.png
deleted file mode 100644
index edc99be1b..000000000
Binary files a/apps/ExpoApp58/assets/images/logo-glow.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/react-logo.png b/apps/ExpoApp58/assets/images/react-logo.png
deleted file mode 100644
index 9d72a9ffc..000000000
Binary files a/apps/ExpoApp58/assets/images/react-logo.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/react-logo@2x.png b/apps/ExpoApp58/assets/images/react-logo@2x.png
deleted file mode 100644
index 2229b130a..000000000
Binary files a/apps/ExpoApp58/assets/images/react-logo@2x.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/react-logo@3x.png b/apps/ExpoApp58/assets/images/react-logo@3x.png
deleted file mode 100644
index a99b20322..000000000
Binary files a/apps/ExpoApp58/assets/images/react-logo@3x.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/tabIcons/explore.png b/apps/ExpoApp58/assets/images/tabIcons/explore.png
deleted file mode 100644
index 73d825834..000000000
Binary files a/apps/ExpoApp58/assets/images/tabIcons/explore.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/tabIcons/explore@2x.png b/apps/ExpoApp58/assets/images/tabIcons/explore@2x.png
deleted file mode 100644
index 21b9bd266..000000000
Binary files a/apps/ExpoApp58/assets/images/tabIcons/explore@2x.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/tabIcons/explore@3x.png b/apps/ExpoApp58/assets/images/tabIcons/explore@3x.png
deleted file mode 100644
index 422202d5e..000000000
Binary files a/apps/ExpoApp58/assets/images/tabIcons/explore@3x.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/tabIcons/home.png b/apps/ExpoApp58/assets/images/tabIcons/home.png
deleted file mode 100644
index ad5699c42..000000000
Binary files a/apps/ExpoApp58/assets/images/tabIcons/home.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/tabIcons/home@2x.png b/apps/ExpoApp58/assets/images/tabIcons/home@2x.png
deleted file mode 100644
index 22a1f2c74..000000000
Binary files a/apps/ExpoApp58/assets/images/tabIcons/home@2x.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/tabIcons/home@3x.png b/apps/ExpoApp58/assets/images/tabIcons/home@3x.png
deleted file mode 100644
index f5d1f9a41..000000000
Binary files a/apps/ExpoApp58/assets/images/tabIcons/home@3x.png and /dev/null differ
diff --git a/apps/ExpoApp58/assets/images/tutorial-web.png b/apps/ExpoApp58/assets/images/tutorial-web.png
deleted file mode 100644
index e4a8c58f7..000000000
Binary files a/apps/ExpoApp58/assets/images/tutorial-web.png and /dev/null differ
diff --git a/apps/ExpoApp58/entry.tsx b/apps/ExpoApp58/entry.tsx
index 0fedc055a..2299ecaf8 100644
--- a/apps/ExpoApp58/entry.tsx
+++ b/apps/ExpoApp58/entry.tsx
@@ -4,10 +4,10 @@ import { AppRegistry } from 'react-native';
 import {
   syncBrownfieldE2EModeFromRootProps,
   type BrownfieldRootProps,
-} from '@callstack/brownfield-example-shared-tests/runtime';
+} from '@callstack/shared-runtime';
 
 import RNApp from './RNApp';
-import { useMarkFullyDisplayed } from './src/hooks/use-mark-fully-displayed';
+import { useMarkFullyDisplayed } from '@callstack/shared-runtime/useMarkFullyDisplayed';
 
 function App(
   props: BrownfieldRootProps & { brownfieldPresentationID?: string }
diff --git a/apps/ExpoApp58/jest.config.js b/apps/ExpoApp58/jest.config.js
index 0b956813c..4ccf8b8e4 100644
--- a/apps/ExpoApp58/jest.config.js
+++ b/apps/ExpoApp58/jest.config.js
@@ -1,6 +1,6 @@
 const {
   createExpoJestConfig,
-} = require('@callstack/brownfield-example-shared-tests/jest/expo-config');
+} = require('@callstack/shared-tests/jest/expo-config');
 
 module.exports = createExpoJestConfig({
   appRootDir: __dirname,
diff --git a/apps/ExpoApp58/jest.setup.js b/apps/ExpoApp58/jest.setup.js
index bdb396836..e93f70e87 100644
--- a/apps/ExpoApp58/jest.setup.js
+++ b/apps/ExpoApp58/jest.setup.js
@@ -1,4 +1,4 @@
-require('@callstack/brownfield-example-shared-tests/jest/setup');
+require('@callstack/shared-tests/jest/setup');
 
 // postMessage tab reads safe-area insets; tests render it without a SafeAreaProvider.
 jest.mock(
diff --git a/apps/ExpoApp58/package.json b/apps/ExpoApp58/package.json
index 7323fcbfd..8bf2d3b96 100644
--- a/apps/ExpoApp58/package.json
+++ b/apps/ExpoApp58/package.json
@@ -42,6 +42,7 @@
     "@callstack/brownfield-navigation": "workspace:^",
     "@callstack/brownie": "workspace:^",
     "@callstack/react-native-brownfield": "workspace:^",
+    "@callstack/shared-runtime": "workspace:^",
     "expo": "58.0.0-preview.7",
     "expo-constants": "~58.0.7",
     "expo-device": "~58.0.2",
@@ -68,7 +69,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.29.6",
-    "@callstack/brownfield-example-shared-tests": "workspace:^",
+    "@callstack/shared-tests": "workspace:^",
     "@react-native/jest-preset": "0.88.0-rc.1",
     "@react-native/metro-config": "0.88.0-rc.1",
     "@testing-library/react-native": "^13.3.3",
diff --git a/apps/ExpoApp58/src/app/_layout.tsx b/apps/ExpoApp58/src/app/_layout.tsx
index 10ff15a2d..98e30f88c 100644
--- a/apps/ExpoApp58/src/app/_layout.tsx
+++ b/apps/ExpoApp58/src/app/_layout.tsx
@@ -1,19 +1,4 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router';
-import { useColorScheme } from 'react-native';
-
-import { AnimatedSplashOverlay } from '@/components/animated-icon';
-import AppTabs from '@/components/app-tabs';
-
-export const unstable_settings = {
-  initialRouteName: 'index',
-};
-
-export default function TabLayout() {
-  const colorScheme = useColorScheme();
-  return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <AnimatedSplashOverlay />
-      <AppTabs />
-    </ThemeProvider>
-  );
-}
+export {
+  default,
+  unstable_settings,
+} from '@callstack/shared-runtime/expo/app/layout';
diff --git a/apps/ExpoApp58/src/app/explore.tsx b/apps/ExpoApp58/src/app/explore.tsx
index 29340852d..7e971cc3b 100644
--- a/apps/ExpoApp58/src/app/explore.tsx
+++ b/apps/ExpoApp58/src/app/explore.tsx
@@ -1,180 +1 @@
-import { Image } from 'expo-image';
-import { SymbolView } from 'expo-symbols';
-import { Platform, Pressable, ScrollView, StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { ExternalLink } from '@/components/external-link';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { Collapsible } from '@/components/ui/collapsible';
-import { WebBadge } from '@/components/web-badge';
-import { BottomTabInset, MaxContentWidth, Spacing } from '@/constants/theme';
-import { useTheme } from '@/hooks/use-theme';
-
-export default function TabTwoScreen() {
-  const safeAreaInsets = useSafeAreaInsets();
-  const insets = {
-    ...safeAreaInsets,
-    bottom: safeAreaInsets.bottom + BottomTabInset + Spacing.three,
-  };
-  const theme = useTheme();
-
-  const contentPlatformStyle = Platform.select({
-    android: {
-      paddingTop: insets.top,
-      paddingLeft: insets.left,
-      paddingRight: insets.right,
-      paddingBottom: insets.bottom,
-    },
-    web: {
-      paddingTop: Spacing.six,
-      paddingBottom: Spacing.four,
-    },
-  });
-
-  return (
-    <ScrollView
-      style={[styles.scrollView, { backgroundColor: theme.background }]}
-      contentInset={insets}
-      contentContainerStyle={[styles.contentContainer, contentPlatformStyle]}>
-      <ThemedView style={styles.container}>
-        <ThemedView style={styles.titleContainer}>
-          <ThemedText type="subtitle">Explore</ThemedText>
-          <ThemedText style={styles.centerText} themeColor="textSecondary">
-            This starter app includes example{'\n'}code to help you get started.
-          </ThemedText>
-
-          <ExternalLink href="https://docs.expo.dev" asChild>
-            <Pressable style={({ pressed }) => pressed && styles.pressed}>
-              <ThemedView type="backgroundElement" style={styles.linkButton}>
-                <ThemedText type="link">Expo documentation</ThemedText>
-                <SymbolView
-                  tintColor={theme.text}
-                  name={{ ios: 'arrow.up.right.square', android: 'link', web: 'link' }}
-                  size={12}
-                />
-              </ThemedView>
-            </Pressable>
-          </ExternalLink>
-        </ThemedView>
-
-        <ThemedView style={styles.sectionsWrapper}>
-          <Collapsible title="File-based routing">
-            <ThemedText type="small">
-              This app has two screens: <ThemedText type="code">src/app/index.tsx</ThemedText> and{' '}
-              <ThemedText type="code">src/app/explore.tsx</ThemedText>
-            </ThemedText>
-            <ThemedText type="small">
-              The layout file in <ThemedText type="code">src/app/_layout.tsx</ThemedText> sets up
-              the tab navigator.
-            </ThemedText>
-            <ExternalLink href="https://docs.expo.dev/router/introduction">
-              <ThemedText type="linkPrimary">Learn more</ThemedText>
-            </ExternalLink>
-          </Collapsible>
-
-          <Collapsible title="Android, iOS, and web support">
-            <ThemedView type="backgroundElement" style={styles.collapsibleContent}>
-              <ThemedText type="small">
-                You can open this project on Android, iOS, and the web. To open the web version,
-                press <ThemedText type="smallBold">w</ThemedText> in the terminal running this
-                project.
-              </ThemedText>
-              <Image
-                source={require('@/assets/images/tutorial-web.png')}
-                style={styles.imageTutorial}
-              />
-            </ThemedView>
-          </Collapsible>
-
-          <Collapsible title="Images">
-            <ThemedText type="small">
-              For static images, you can use the <ThemedText type="code">@2x</ThemedText> and{' '}
-              <ThemedText type="code">@3x</ThemedText> suffixes to provide files for different
-              screen densities.
-            </ThemedText>
-            <Image source={require('@/assets/images/react-logo.png')} style={styles.imageReact} />
-            <ExternalLink href="https://reactnative.dev/docs/images">
-              <ThemedText type="linkPrimary">Learn more</ThemedText>
-            </ExternalLink>
-          </Collapsible>
-
-          <Collapsible title="Light and dark mode components">
-            <ThemedText type="small">
-              This template has light and dark mode support. The{' '}
-              <ThemedText type="code">useColorScheme()</ThemedText> hook lets you inspect what the
-              user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
-            </ThemedText>
-            <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-              <ThemedText type="linkPrimary">Learn more</ThemedText>
-            </ExternalLink>
-          </Collapsible>
-
-          <Collapsible title="Animations">
-            <ThemedText type="small">
-              This template includes an example of an animated component. The{' '}
-              <ThemedText type="code">src/components/ui/collapsible.tsx</ThemedText> component uses
-              the powerful <ThemedText type="code">react-native-reanimated</ThemedText> library to
-              animate opening this hint.
-            </ThemedText>
-          </Collapsible>
-        </ThemedView>
-        {Platform.OS === 'web' && <WebBadge />}
-      </ThemedView>
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  scrollView: {
-    flex: 1,
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  container: {
-    maxWidth: MaxContentWidth,
-    flexGrow: 1,
-  },
-  titleContainer: {
-    gap: Spacing.three,
-    alignItems: 'center',
-    paddingHorizontal: Spacing.four,
-    paddingVertical: Spacing.six,
-  },
-  centerText: {
-    textAlign: 'center',
-  },
-  pressed: {
-    opacity: 0.7,
-  },
-  linkButton: {
-    flexDirection: 'row',
-    paddingHorizontal: Spacing.four,
-    paddingVertical: Spacing.two,
-    borderRadius: Spacing.five,
-    justifyContent: 'center',
-    gap: Spacing.one,
-    alignItems: 'center',
-  },
-  sectionsWrapper: {
-    gap: Spacing.five,
-    paddingHorizontal: Spacing.four,
-    paddingTop: Spacing.three,
-  },
-  collapsibleContent: {
-    alignItems: 'center',
-  },
-  imageTutorial: {
-    width: '100%',
-    aspectRatio: 296 / 171,
-    borderRadius: Spacing.three,
-    marginTop: Spacing.two,
-  },
-  imageReact: {
-    width: 100,
-    height: 100,
-    alignSelf: 'center',
-  },
-});
+export { default } from '@callstack/shared-runtime/expo/app/explore';
diff --git a/apps/ExpoApp58/src/app/index.tsx b/apps/ExpoApp58/src/app/index.tsx
index 823248a72..162a53e04 100644
--- a/apps/ExpoApp58/src/app/index.tsx
+++ b/apps/ExpoApp58/src/app/index.tsx
@@ -1,110 +1,5 @@
-import * as Device from 'expo-device';
-import { Button, Platform, StyleSheet } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { brownfieldE2ETestIds } from '@callstack/brownfield-example-shared-tests/e2eTestIds';
+import HomeScreen from '@callstack/shared-runtime/expo/app/home';
 
-import { AnimatedIcon } from '@/components/animated-icon';
-import { HintRow } from '@/components/hint-row';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { WebBadge } from '@/components/web-badge';
-import { BottomTabInset, MaxContentWidth, Spacing } from '@/constants/theme';
-import { checkAndFetchUpdate } from '@/utils/expo-rn-updates';
-
-function getDevMenuHint() {
-  if (Platform.OS === 'web') {
-    return <ThemedText type="small">use browser devtools</ThemedText>;
-  }
-  if (Device.isDevice) {
-    return (
-      <ThemedText type="small">
-        shake device or press <ThemedText type="code">m</ThemedText> in terminal
-      </ThemedText>
-    );
-  }
-  const shortcut = Platform.OS === 'android' ? 'cmd+m (or ctrl+m)' : 'cmd+d';
-  return (
-    <ThemedText type="small">
-      press <ThemedText type="code">{shortcut}</ThemedText>
-    </ThemedText>
-  );
-}
-
-export default function HomeScreen() {
-  return (
-    <ThemedView
-      testID={brownfieldE2ETestIds.rnAppHome}
-      style={styles.container}
-    >
-      <SafeAreaView style={styles.safeArea}>
-        <ThemedView style={styles.heroSection}>
-          <AnimatedIcon />
-          <ThemedText
-            type="title"
-            style={styles.title}
-            testID={brownfieldE2ETestIds.rnAppHomeTitle}
-            accessibilityLabel="Welcome to Expo 58"
-          >
-            Welcome to Expo 58
-          </ThemedText>
-        </ThemedView>
-
-        <ThemedText type="code" style={styles.code}>
-          get started
-        </ThemedText>
-
-        <ThemedView type="backgroundElement" style={styles.stepContainer}>
-          <HintRow
-            title="Try editing"
-            hint={<ThemedText type="code">src/app/index.tsx</ThemedText>}
-          />
-          <HintRow title="Dev tools" hint={getDevMenuHint()} />
-          <HintRow
-            title="Fresh start"
-            hint={<ThemedText type="code">npm run reset-project</ThemedText>}
-          />
-        </ThemedView>
-
-        <Button title="Fetch Update" onPress={checkAndFetchUpdate} />
-
-        {Platform.OS === 'web' && <WebBadge />}
-      </SafeAreaView>
-    </ThemedView>
-  );
+export default function Index() {
+  return <HomeScreen sdkVersion={58} />;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    flexDirection: 'row',
-    paddingTop: Spacing.three,
-  },
-  safeArea: {
-    flex: 1,
-    paddingHorizontal: Spacing.four,
-    alignItems: 'center',
-    gap: Spacing.three,
-    paddingBottom: BottomTabInset + Spacing.three,
-    maxWidth: MaxContentWidth,
-  },
-  heroSection: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: Spacing.four,
-    gap: Spacing.four,
-  },
-  title: {
-    textAlign: 'center',
-  },
-  code: {
-    textTransform: 'uppercase',
-  },
-  stepContainer: {
-    gap: Spacing.three,
-    alignSelf: 'stretch',
-    paddingHorizontal: Spacing.three,
-    paddingVertical: Spacing.four,
-    borderRadius: Spacing.four,
-  },
-});
diff --git a/apps/ExpoApp58/src/app/postMessage.tsx b/apps/ExpoApp58/src/app/postMessage.tsx
index 3c4caf62d..2dfa1033d 100644
--- a/apps/ExpoApp58/src/app/postMessage.tsx
+++ b/apps/ExpoApp58/src/app/postMessage.tsx
@@ -1,118 +1 @@
-import { StyleSheet, FlatList, TouchableOpacity } from 'react-native';
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { brownfieldE2ETestIds } from '@callstack/brownfield-example-shared-tests/e2eTestIds';
-import ReactNativeBrownfield from '@callstack/react-native-brownfield';
-import type { MessageEvent } from '@callstack/react-native-brownfield';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { ThemedView } from '@/components/themed-view';
-import { ThemedText } from '@/components/themed-text';
-import type { Message } from '@/components/postMessage/Message';
-import { MessageBubble } from '@/components/postMessage/MessageBubble';
-import { BottomTabInset, Spacing } from '@/constants/theme';
-
-export default function PostMessageTab() {
-  const insets = useSafeAreaInsets();
-  const [messages, setMessages] = useState<Message[]>([]);
-  const flatListRef = useRef<FlatList<Message>>(null);
-
-  const messageCounterRef = useRef(0);
-
-  useEffect(() => {
-    const sub = ReactNativeBrownfield.onMessage((event: MessageEvent) => {
-      const data = event.data as { text?: string };
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: String(++messageCounterRef.current),
-          text: data?.text ?? JSON.stringify(event.data),
-          from: 'native',
-          timestamp: Date.now(),
-        },
-      ]);
-    });
-    return () => sub.remove();
-  }, []);
-
-  const sendMessage = useCallback(() => {
-    const msg = {
-      text: `Hello from Expo! (#${++messageCounterRef.current})`,
-      timestamp: Date.now(),
-    };
-    ReactNativeBrownfield.postMessage(msg);
-    setMessages((prev) => [
-      ...prev,
-      {
-        id: String(messageCounterRef.current),
-        text: msg.text,
-        from: 'rn',
-        timestamp: msg.timestamp,
-      },
-    ]);
-  }, []);
-
-  return (
-    <ThemedView
-      style={[
-        styles.messageSection,
-        {
-          paddingTop: insets.top + Spacing.three,
-          paddingBottom: insets.bottom + BottomTabInset,
-          paddingLeft: insets.left + 20,
-          paddingRight: insets.right + 20,
-        },
-      ]}
-    >
-      <TouchableOpacity
-        testID={brownfieldE2ETestIds.sendMessageToNative}
-        style={styles.sendButton}
-        onPress={sendMessage}
-        activeOpacity={0.8}
-      >
-        <ThemedText style={styles.sendButtonText}>
-          Send message to Native
-        </ThemedText>
-      </TouchableOpacity>
-
-      <FlatList
-        data={messages}
-        keyExtractor={(item) => `message-${item.id}`}
-        renderItem={({ item }) => <MessageBubble item={item} />}
-        style={styles.messageList}
-        contentContainerStyle={styles.messageListContent}
-        inverted={true} // ensure newest messages are at the top
-        onContentSizeChange={() => {
-          flatListRef.current?.scrollToEnd({ animated: true });
-        }}
-        ref={flatListRef}
-      />
-    </ThemedView>
-  );
-}
-
-const styles = StyleSheet.create({
-  messageSection: {
-    flex: 1,
-    width: '100%',
-  },
-  sendButton: {
-    paddingVertical: 12,
-    paddingHorizontal: 20,
-    borderRadius: 10,
-    alignItems: 'center',
-    marginBottom: 10,
-    backgroundColor: '#4F8EF7',
-  },
-  sendButtonText: {
-    fontWeight: '700',
-    fontSize: 15,
-    color: '#fff',
-  },
-  messageList: {
-    flex: 1,
-  },
-  messageListContent: {
-    paddingBottom: 8,
-  },
-});
+export { default } from '@callstack/shared-runtime/expo/app/postMessage';
diff --git a/apps/ExpoApp58/src/components/animated-icon.module.css b/apps/ExpoApp58/src/components/animated-icon.module.css
deleted file mode 100644
index f8156fec7..000000000
--- a/apps/ExpoApp58/src/components/animated-icon.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.expoLogoBackground {
-  background-image: linear-gradient(180deg, #3c9ffe, #0274df);
-  border-radius: 40px;
-  width: 128px;
-  height: 128px;
-}
diff --git a/apps/ExpoApp58/src/components/animated-icon.tsx b/apps/ExpoApp58/src/components/animated-icon.tsx
deleted file mode 100644
index 9d900a8ca..000000000
--- a/apps/ExpoApp58/src/components/animated-icon.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { Image } from 'expo-image';
-import { useState } from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
-import Animated, { Easing, Keyframe } from 'react-native-reanimated';
-import { scheduleOnRN } from 'react-native-worklets';
-
-const INITIAL_SCALE_FACTOR = Dimensions.get('screen').height / 90;
-const DURATION = 600;
-
-export function AnimatedSplashOverlay() {
-  const [visible, setVisible] = useState(true);
-
-  if (!visible) return null;
-
-  const splashKeyframe = new Keyframe({
-    0: {
-      transform: [{ scale: INITIAL_SCALE_FACTOR }],
-      opacity: 1,
-    },
-    20: {
-      opacity: 1,
-    },
-    70: {
-      opacity: 0,
-      easing: Easing.elastic(0.7),
-    },
-    100: {
-      opacity: 0,
-      transform: [{ scale: 1 }],
-      easing: Easing.elastic(0.7),
-    },
-  });
-
-  return (
-    <Animated.View
-      entering={splashKeyframe.duration(DURATION).withCallback((finished) => {
-        'worklet';
-        if (finished) {
-          scheduleOnRN(setVisible, false);
-        }
-      })}
-      style={styles.backgroundSolidColor}
-    />
-  );
-}
-
-const keyframe = new Keyframe({
-  0: {
-    transform: [{ scale: INITIAL_SCALE_FACTOR }],
-  },
-  100: {
-    transform: [{ scale: 1 }],
-    easing: Easing.elastic(0.7),
-  },
-});
-
-const logoKeyframe = new Keyframe({
-  0: {
-    transform: [{ scale: 1.3 }],
-    opacity: 0,
-  },
-  40: {
-    transform: [{ scale: 1.3 }],
-    opacity: 0,
-    easing: Easing.elastic(0.7),
-  },
-  100: {
-    opacity: 1,
-    transform: [{ scale: 1 }],
-    easing: Easing.elastic(0.7),
-  },
-});
-
-const glowKeyframe = new Keyframe({
-  0: {
-    transform: [{ rotateZ: '0deg' }],
-  },
-  100: {
-    transform: [{ rotateZ: '7200deg' }],
-  },
-});
-
-export function AnimatedIcon() {
-  return (
-    <View style={styles.iconContainer}>
-      <Animated.View entering={glowKeyframe.duration(60 * 1000 * 4)} style={styles.glow}>
-        <Image style={styles.glow} source={require('@/assets/images/logo-glow.png')} />
-      </Animated.View>
-
-      <Animated.View entering={keyframe.duration(DURATION)} style={styles.background} />
-      <Animated.View style={styles.imageContainer} entering={logoKeyframe.duration(DURATION)}>
-        <Image style={styles.image} source={require('@/assets/images/expo-logo.png')} />
-      </Animated.View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  imageContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  glow: {
-    width: 201,
-    height: 201,
-    position: 'absolute',
-  },
-  iconContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 128,
-    height: 128,
-    zIndex: 100,
-  },
-  image: {
-    position: 'absolute',
-    width: 76,
-    height: 71,
-  },
-  background: {
-    borderRadius: 40,
-    experimental_backgroundImage: `linear-gradient(180deg, #3C9FFE, #0274DF)`,
-    width: 128,
-    height: 128,
-    position: 'absolute',
-  },
-  backgroundSolidColor: {
-    ...StyleSheet.absoluteFill,
-    backgroundColor: '#208AEF',
-    zIndex: 1000,
-  },
-});
diff --git a/apps/ExpoApp58/src/components/animated-icon.web.tsx b/apps/ExpoApp58/src/components/animated-icon.web.tsx
deleted file mode 100644
index dfbb1fd7d..000000000
--- a/apps/ExpoApp58/src/components/animated-icon.web.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { Image } from 'expo-image';
-import { StyleSheet, View } from 'react-native';
-import Animated, { Keyframe, Easing } from 'react-native-reanimated';
-
-import classes from './animated-icon.module.css';
-const DURATION = 300;
-
-export function AnimatedSplashOverlay() {
-  return null;
-}
-
-const keyframe = new Keyframe({
-  0: {
-    transform: [{ scale: 0 }],
-  },
-  60: {
-    transform: [{ scale: 1.2 }],
-    easing: Easing.elastic(1.2),
-  },
-  100: {
-    transform: [{ scale: 1 }],
-    easing: Easing.elastic(1.2),
-  },
-});
-
-const logoKeyframe = new Keyframe({
-  0: {
-    opacity: 0,
-  },
-  60: {
-    transform: [{ scale: 1.2 }],
-    opacity: 0,
-    easing: Easing.elastic(1.2),
-  },
-  100: {
-    transform: [{ scale: 1 }],
-    opacity: 1,
-    easing: Easing.elastic(1.2),
-  },
-});
-
-const glowKeyframe = new Keyframe({
-  0: {
-    transform: [{ rotateZ: '-180deg' }, { scale: 0.8 }],
-    opacity: 0,
-  },
-  [DURATION / 1000]: {
-    transform: [{ rotateZ: '0deg' }, { scale: 1 }],
-    opacity: 1,
-    easing: Easing.elastic(0.7),
-  },
-  100: {
-    transform: [{ rotateZ: '7200deg' }],
-  },
-});
-
-export function AnimatedIcon() {
-  return (
-    <View style={styles.iconContainer}>
-      <Animated.View entering={glowKeyframe.duration(60 * 1000 * 4)} style={styles.glow}>
-        <Image style={styles.glow} source={require('@/assets/images/logo-glow.png')} />
-      </Animated.View>
-
-      <Animated.View style={styles.background} entering={keyframe.duration(DURATION)}>
-        <div className={classes.expoLogoBackground} />
-      </Animated.View>
-
-      <Animated.View style={styles.imageContainer} entering={logoKeyframe.duration(DURATION)}>
-        <Image style={styles.image} source={require('@/assets/images/expo-logo.png')} />
-      </Animated.View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    width: '100%',
-    zIndex: 1000,
-    position: 'absolute',
-    top: 128 / 2 + 138,
-  },
-  imageContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  glow: {
-    width: 201,
-    height: 201,
-    position: 'absolute',
-  },
-  iconContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 128,
-    height: 128,
-  },
-  image: {
-    position: 'absolute',
-    width: 76,
-    height: 71,
-  },
-  background: {
-    width: 128,
-    height: 128,
-    position: 'absolute',
-  },
-});
diff --git a/apps/ExpoApp58/src/components/counter/index.tsx b/apps/ExpoApp58/src/components/counter/index.tsx
deleted file mode 100644
index 52b3ccab7..000000000
--- a/apps/ExpoApp58/src/components/counter/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { StyleSheet, Text, Button } from 'react-native';
-import { useStore } from '@callstack/brownie';
-
-const Counter = () => {
-  const [counter, setState] = useStore('BrownfieldStore', (s) => s.counter);
-
-  return (
-    <>
-      <Text style={styles.text}>Count: {counter}</Text>
-
-      <Button
-        onPress={() => setState((prev) => ({ counter: prev.counter + 1 }))}
-        title="Increment"
-      />
-    </>
-  );
-};
-
-export default Counter;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20,
-  },
-  text: {
-    fontSize: 30,
-    fontWeight: 'bold',
-    margin: 10,
-  },
-});
diff --git a/apps/ExpoApp58/src/components/postMessage/Message.ts b/apps/ExpoApp58/src/components/postMessage/Message.ts
deleted file mode 100644
index 35e5f1d13..000000000
--- a/apps/ExpoApp58/src/components/postMessage/Message.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface Message {
-  id: string;
-  text: string;
-  from: 'native' | 'rn';
-  timestamp: number;
-}
diff --git a/apps/ExpoApp58/src/components/themed-text.tsx b/apps/ExpoApp58/src/components/themed-text.tsx
deleted file mode 100644
index 799c8b130..000000000
--- a/apps/ExpoApp58/src/components/themed-text.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Platform, StyleSheet, Text, type TextProps } from 'react-native';
-
-import { Fonts, ThemeColor } from '@/constants/theme';
-import { useTheme } from '@/hooks/use-theme';
-
-export type ThemedTextProps = TextProps & {
-  type?: 'default' | 'title' | 'small' | 'smallBold' | 'subtitle' | 'link' | 'linkPrimary' | 'code';
-  themeColor?: ThemeColor;
-};
-
-export function ThemedText({ style, type = 'default', themeColor, ...rest }: ThemedTextProps) {
-  const theme = useTheme();
-
-  return (
-    <Text
-      style={[
-        { color: theme[themeColor ?? 'text'] },
-        type === 'default' && styles.default,
-        type === 'title' && styles.title,
-        type === 'small' && styles.small,
-        type === 'smallBold' && styles.smallBold,
-        type === 'subtitle' && styles.subtitle,
-        type === 'link' && styles.link,
-        type === 'linkPrimary' && styles.linkPrimary,
-        type === 'code' && styles.code,
-        style,
-      ]}
-      {...rest}
-    />
-  );
-}
-
-const styles = StyleSheet.create({
-  small: {
-    fontSize: 14,
-    lineHeight: 20,
-    fontWeight: 500,
-  },
-  smallBold: {
-    fontSize: 14,
-    lineHeight: 20,
-    fontWeight: 700,
-  },
-  default: {
-    fontSize: 16,
-    lineHeight: 24,
-    fontWeight: 500,
-  },
-  title: {
-    fontSize: 48,
-    fontWeight: 600,
-    lineHeight: 52,
-  },
-  subtitle: {
-    fontSize: 32,
-    lineHeight: 44,
-    fontWeight: 600,
-  },
-  link: {
-    lineHeight: 30,
-    fontSize: 14,
-  },
-  linkPrimary: {
-    lineHeight: 30,
-    fontSize: 14,
-    color: '#3c87f7',
-  },
-  code: {
-    fontFamily: Fonts.mono,
-    fontWeight: Platform.select({ android: 700 }) ?? 500,
-    fontSize: 12,
-  },
-});
diff --git a/apps/ExpoApp58/src/components/themed-view.tsx b/apps/ExpoApp58/src/components/themed-view.tsx
deleted file mode 100644
index c710df9b6..000000000
--- a/apps/ExpoApp58/src/components/themed-view.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { View, type ViewProps } from 'react-native';
-
-import { ThemeColor } from '@/constants/theme';
-import { useTheme } from '@/hooks/use-theme';
-
-export type ThemedViewProps = ViewProps & {
-  lightColor?: string;
-  darkColor?: string;
-  type?: ThemeColor;
-};
-
-export function ThemedView({ style, lightColor, darkColor, type, ...otherProps }: ThemedViewProps) {
-  const theme = useTheme();
-
-  return <View style={[{ backgroundColor: theme[type ?? 'background'] }, style]} {...otherProps} />;
-}
diff --git a/apps/ExpoApp58/src/components/web-badge.tsx b/apps/ExpoApp58/src/components/web-badge.tsx
deleted file mode 100644
index 6667898d8..000000000
--- a/apps/ExpoApp58/src/components/web-badge.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { version } from 'expo/package.json';
-import { Image } from 'expo-image';
-import { useColorScheme, StyleSheet } from 'react-native';
-
-import { ThemedText } from './themed-text';
-import { ThemedView } from './themed-view';
-
-import { Spacing } from '@/constants/theme';
-
-export function WebBadge() {
-  const scheme = useColorScheme();
-
-  return (
-    <ThemedView style={styles.container}>
-      <ThemedText type="code" themeColor="textSecondary" style={styles.versionText}>
-        v{version}
-      </ThemedText>
-      <Image
-        source={
-          scheme === 'dark'
-            ? require('@/assets/images/expo-badge-white.png')
-            : require('@/assets/images/expo-badge.png')
-        }
-        style={styles.badgeImage}
-      />
-    </ThemedView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    padding: Spacing.five,
-    alignItems: 'center',
-    gap: Spacing.two,
-  },
-  versionText: {
-    textAlign: 'center',
-  },
-  badgeImage: {
-    width: 123,
-    aspectRatio: 123 / 24,
-  },
-});
diff --git a/apps/ExpoApp58/src/constants/theme.ts b/apps/ExpoApp58/src/constants/theme.ts
deleted file mode 100644
index c10ed272a..000000000
--- a/apps/ExpoApp58/src/constants/theme.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
- */
-
-import '@/global.css';
-
-import { Platform } from 'react-native';
-
-export const Colors = {
-  light: {
-    text: '#000000',
-    background: '#ffffff',
-    backgroundElement: '#F0F0F3',
-    backgroundSelected: '#E0E1E6',
-    textSecondary: '#60646C',
-  },
-  dark: {
-    text: '#ffffff',
-    background: '#000000',
-    backgroundElement: '#212225',
-    backgroundSelected: '#2E3135',
-    textSecondary: '#B0B4BA',
-  },
-} as const;
-
-export type ThemeColor = keyof typeof Colors.light & keyof typeof Colors.dark;
-
-export const Fonts = Platform.select({
-  ios: {
-    /** iOS `UIFontDescriptorSystemDesignDefault` */
-    sans: 'system-ui',
-    /** iOS `UIFontDescriptorSystemDesignSerif` */
-    serif: 'ui-serif',
-    /** iOS `UIFontDescriptorSystemDesignRounded` */
-    rounded: 'ui-rounded',
-    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
-    mono: 'ui-monospace',
-  },
-  default: {
-    sans: 'normal',
-    serif: 'serif',
-    rounded: 'normal',
-    mono: 'monospace',
-  },
-  web: {
-    sans: 'var(--font-display)',
-    serif: 'var(--font-serif)',
-    rounded: 'var(--font-rounded)',
-    mono: 'var(--font-mono)',
-  },
-});
-
-export const Spacing = {
-  half: 2,
-  one: 4,
-  two: 8,
-  three: 16,
-  four: 24,
-  five: 32,
-  six: 64,
-} as const;
-
-export const BottomTabInset = Platform.select({ ios: 50, android: 80 }) ?? 0;
-export const MaxContentWidth = 800;
diff --git a/apps/ExpoApp58/src/hooks/use-color-scheme.ts b/apps/ExpoApp58/src/hooks/use-color-scheme.ts
deleted file mode 100644
index 17e3c63e1..000000000
--- a/apps/ExpoApp58/src/hooks/use-color-scheme.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useColorScheme } from 'react-native';
diff --git a/apps/ExpoApp58/src/hooks/use-mark-fully-displayed.ts b/apps/ExpoApp58/src/hooks/use-mark-fully-displayed.ts
deleted file mode 100644
index 2028a55e1..000000000
--- a/apps/ExpoApp58/src/hooks/use-mark-fully-displayed.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-import ReactNativeBrownfield from '@callstack/react-native-brownfield';
-
-/**
- * Demo only: stands in for the data this screen would load before it is useful.
- * Real apps call `markFullyDisplayed` once that data has rendered, not after a fixed delay.
- */
-const DEMO_FULL_DISPLAY_DELAY_MS = 500;
-
-/** Marks the native presentation as fully displayed (TTFD) after the demo delay. */
-export function useMarkFullyDisplayed(brownfieldPresentationID?: string) {
-  useEffect(() => {
-    if (!brownfieldPresentationID) {
-      return;
-    }
-    const timeout = setTimeout(
-      () => ReactNativeBrownfield.markFullyDisplayed(brownfieldPresentationID),
-      DEMO_FULL_DISPLAY_DELAY_MS
-    );
-    return () => clearTimeout(timeout);
-  }, [brownfieldPresentationID]);
-}
diff --git a/apps/ExpoApp58/src/hooks/use-theme.ts b/apps/ExpoApp58/src/hooks/use-theme.ts
deleted file mode 100644
index 677e01518..000000000
--- a/apps/ExpoApp58/src/hooks/use-theme.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Learn more about light and dark modes:
- * https://docs.expo.dev/guides/color-schemes/
- */
-
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
-
-export function useTheme() {
-  const scheme = useColorScheme();
-  const theme = scheme === 'unspecified' ? 'light' : scheme;
-
-  return Colors[theme];
-}
diff --git a/apps/ExpoApp58/tsconfig.json b/apps/ExpoApp58/tsconfig.json
index 2e9a6695e..99560b9aa 100644
--- a/apps/ExpoApp58/tsconfig.json
+++ b/apps/ExpoApp58/tsconfig.json
@@ -9,7 +9,12 @@
       "@/assets/*": [
         "./assets/*"
       ]
-    }
+    },
+    "preserveSymlinks": true,
+    "types": [
+      "expo/types",
+      "jest"
+    ]
   },
   "include": [
     "**/*.ts",
diff --git a/apps/README.md b/apps/README.md
index e5ff8bce3..48e497b72 100644
--- a/apps/README.md
+++ b/apps/README.md
@@ -15,3 +15,10 @@ This directory contains demo projects showcasing the usage of the `react-native-
   - `Brownfield Apple App (ExpoApp57)` — uses the artifact from `ExpoApp57` (scheme **Brownfield Apple App Expo 57**, configuration `Release`)
   - `Brownfield Apple App (ExpoAppPreview)` — uses the artifact from `ExpoAppPreview` (scheme **Brownfield Apple App Expo Preview**, configuration `Release`)
   From `apps/AppleApp`, run `yarn build:example:ios-consumer:vanilla`, `yarn build:example:ios-consumer:expo58`, `yarn build:example:ios-consumer:expo57`, or `yarn build:example:ios-consumer:expopreview` to copy XCFrameworks into `package/` and build the matching target. `yarn build:example:ios-consumer:expo` is an alias for `expo57`.
+
+## Shared JavaScript
+
+`shared-runtime` contains the demo runtime used by RNApp and both Expo apps.
+`shared-tests` contains Jest suites, setup, and Detox helpers. See
+[shared-runtime/README.md](shared-runtime/README.md) for the package boundary and
+what stays local to each app.
diff --git a/apps/RNApp/.detoxrc.cjs b/apps/RNApp/.detoxrc.cjs
index ee023bfb6..0907ade8c 100644
--- a/apps/RNApp/.detoxrc.cjs
+++ b/apps/RNApp/.detoxrc.cjs
@@ -1,6 +1,6 @@
 const {
   createIosSimDebugDetoxConfig,
-} = require('../brownfield-example-shared-tests/detox-rc-ios-sim-debug.cjs');
+} = require('../shared-tests/detox-rc-ios-sim-debug.cjs');
 
 /** @type {import('detox').DetoxConfig} */
 module.exports = createIosSimDebugDetoxConfig({
diff --git a/apps/RNApp/__tests__/brownfield.example.test.tsx b/apps/RNApp/__tests__/brownfield.example.test.tsx
index 5ce7dcfcc..6b30b6764 100644
--- a/apps/RNApp/__tests__/brownfield.example.test.tsx
+++ b/apps/RNApp/__tests__/brownfield.example.test.tsx
@@ -1,12 +1,12 @@
-import {
-  runCounterSuite,
-  runHomeScreenSuite,
-} from '@callstack/brownfield-example-shared-tests';
+import { runUserAlertSuite } from '@callstack/shared-tests';
+import { runCounterSuite, runHomeScreenSuite } from '@callstack/shared-tests';
 import { HomeScreen } from '../src/HomeScreen';
-import Counter from '../src/components/counter';
+import Counter from '@callstack/shared-runtime/counter';
 import { getRandomTheme } from '../src/utils';
 
 const theme = getRandomTheme();
 
 runHomeScreenSuite('RNApp', HomeScreen);
 runCounterSuite('RNApp', Counter, { colors: theme });
+
+runUserAlertSuite('RNApp');
diff --git a/apps/RNApp/e2e/jest.config.cjs b/apps/RNApp/e2e/jest.config.cjs
index cc481de2e..f9a3488b0 100644
--- a/apps/RNApp/e2e/jest.config.cjs
+++ b/apps/RNApp/e2e/jest.config.cjs
@@ -1,14 +1,11 @@
 const path = require('node:path');
 const {
   createDetoxJestConfig,
-} = require('../../brownfield-example-shared-tests/e2e/createDetoxJestConfig.cjs');
+} = require('../../shared-tests/e2e/createDetoxJestConfig.cjs');
 
 module.exports = createDetoxJestConfig({
   e2eDir: __dirname,
   testMatch: [
-    path.join(
-      __dirname,
-      '../../brownfield-example-shared-tests/e2e/rnAppBrownfield.e2e.js'
-    ),
+    path.join(__dirname, '../../shared-tests/e2e/rnAppBrownfield.e2e.js'),
   ],
 });
diff --git a/apps/RNApp/jest.config.js b/apps/RNApp/jest.config.js
index 4e9a70735..a514f19ac 100644
--- a/apps/RNApp/jest.config.js
+++ b/apps/RNApp/jest.config.js
@@ -24,6 +24,6 @@ module.exports = {
     ),
   },
   transformIgnorePatterns: [
-    'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@callstack/brownfield-example-shared-tests|@react-navigation|react-native-screens|react-native-safe-area-context)/)',
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@callstack/shared-runtime|@callstack/shared-tests|@react-navigation|react-native-screens|react-native-safe-area-context)/)',
   ],
 };
diff --git a/apps/RNApp/jest.setup.js b/apps/RNApp/jest.setup.js
index 14d2c2591..ff307c3af 100644
--- a/apps/RNApp/jest.setup.js
+++ b/apps/RNApp/jest.setup.js
@@ -1 +1 @@
-require('@callstack/brownfield-example-shared-tests/jest/setup');
+require('@callstack/shared-tests/jest/setup');
diff --git a/apps/RNApp/package.json b/apps/RNApp/package.json
index b7c76f172..47efd6eb1 100644
--- a/apps/RNApp/package.json
+++ b/apps/RNApp/package.json
@@ -20,10 +20,10 @@
     "codegen:navigation": "brownfield navigation:codegen brownfield.navigation.ts"
   },
   "dependencies": {
-    "@callstack/brownfield-example-shared-tests": "workspace:^",
     "@callstack/brownfield-navigation": "workspace:^",
     "@callstack/brownie": "workspace:^",
     "@callstack/react-native-brownfield": "workspace:^",
+    "@callstack/shared-runtime": "workspace:^",
     "@react-navigation/native": "^7.1.33",
     "@react-navigation/native-stack": "^7.14.5",
     "react": "19.2.3",
@@ -35,6 +35,7 @@
     "@babel/core": "^7.29.6",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
+    "@callstack/shared-tests": "workspace:^",
     "@react-native-community/cli": "20.2.0",
     "@react-native-community/cli-platform-android": "20.2.0",
     "@react-native-community/cli-platform-ios": "20.2.0",
diff --git a/apps/RNApp/src/App.tsx b/apps/RNApp/src/App.tsx
index abffd6d6c..941026dd6 100644
--- a/apps/RNApp/src/App.tsx
+++ b/apps/RNApp/src/App.tsx
@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 import {
   syncBrownfieldE2EModeFromRootProps,
   type BrownfieldRootProps,
-} from '@callstack/brownfield-example-shared-tests/runtime';
+} from '@callstack/shared-runtime';
 
 import { HomeScreen } from './HomeScreen';
 import { NativeOsVersionLabelContext } from './nativeHostContext';
diff --git a/apps/RNApp/src/HomeScreen.tsx b/apps/RNApp/src/HomeScreen.tsx
index 05120086e..8df2609fb 100644
--- a/apps/RNApp/src/HomeScreen.tsx
+++ b/apps/RNApp/src/HomeScreen.tsx
@@ -10,14 +10,14 @@ import {
 } from 'react-native';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import ReactNativeBrownfield from '@callstack/react-native-brownfield';
-import { brownfieldE2ETestIds } from '@callstack/brownfield-example-shared-tests/e2eTestIds';
+import { brownfieldE2ETestIds } from '@callstack/shared-runtime/e2eTestIds';
 import BrownfieldNavigation from '@callstack/brownfield-navigation';
 
 import { getRandomTheme } from './utils';
 import type { RootStackParamList } from './navigation/RootStack';
-import Counter from './components/counter';
+import Counter from '@callstack/shared-runtime/counter';
 import { useNativeOsVersionLabel } from './nativeHostContext';
-import { useMarkFullyDisplayed } from './hooks/useMarkFullyDisplayed';
+import { useMarkFullyDisplayed } from '@callstack/shared-runtime/useMarkFullyDisplayed';
 
 interface Message {
   id: string;
diff --git a/apps/RNApp/tsconfig.json b/apps/RNApp/tsconfig.json
index 1f6e0a685..b2b54ba94 100644
--- a/apps/RNApp/tsconfig.json
+++ b/apps/RNApp/tsconfig.json
@@ -3,5 +3,8 @@
   "references": [
     { "path": "../../packages/brownie" },
     { "path": "../../packages/react-native-brownfield" }
-  ]
+  ],
+  "compilerOptions": {
+    "preserveSymlinks": true
+  }
 }
diff --git a/apps/shared-runtime/README.md b/apps/shared-runtime/README.md
new file mode 100644
index 000000000..b4981334c
--- /dev/null
+++ b/apps/shared-runtime/README.md
@@ -0,0 +1,35 @@
+# Shared demo runtime
+
+`@callstack/shared-runtime` contains code bundled into the demo apps:
+
+- `userAlert`, root E2E-mode props, and stable test IDs used by the UI;
+- the Brownie counter and the demo `useMarkFullyDisplayed` hook;
+- Expo screens, components, styles, and their JS-referenced assets.
+
+`RNApp`, `ExpoApp57`, and `ExpoApp58` depend on this private workspace. Test suites,
+Jest setup, and Detox helpers live separately in `apps/shared-tests` and are only
+development dependencies of the demo apps.
+
+The Expo apps keep their entry registration, `require.context`, Router route
+files, native configuration, stores, and app icons local. Route files import the
+shared screens. The wrappers pass the SDK label and preserve the SDK 57-only
+"Pop To Native" action.
+
+React, React Native, and Expo libraries are peers supplied by each app. Do not
+install a particular Expo or React Native version in this package: the demos
+intentionally exercise different versions. Import vanilla helpers through their
+individual exports so `RNApp` does not load Expo code.
+
+After changing shared code, run `yarn test:apps` and lint the affected apps. Also
+bundle both Expo apps and the vanilla app when changing imports or assets, since
+Jest uses mocks for native modules. CI path filters include this package for all
+three demos and both native hosts.
+
+The demo TypeScript configs preserve workspace symlinks so shared source resolves
+types from each consuming app, matching its runtime dependency versions.
+
+For Expo type checks, first run the normal navigation codegen and build
+`@callstack/brownfield-navigation`; its checked-in source is a placeholder. Then
+run `yarn workspace @callstack/brownfield-example-expo-app-57 exec tsc --noEmit`
+and the same command for `@callstack/brownfield-example-expo-app-58`. Do not
+commit generated navigation bindings as part of this refactor.
diff --git a/apps/ExpoApp57/assets/images/expo-badge-white.png b/apps/shared-runtime/assets/images/expo-badge-white.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/expo-badge-white.png
rename to apps/shared-runtime/assets/images/expo-badge-white.png
diff --git a/apps/ExpoApp57/assets/images/expo-badge.png b/apps/shared-runtime/assets/images/expo-badge.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/expo-badge.png
rename to apps/shared-runtime/assets/images/expo-badge.png
diff --git a/apps/ExpoApp57/assets/images/expo-logo.png b/apps/shared-runtime/assets/images/expo-logo.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/expo-logo.png
rename to apps/shared-runtime/assets/images/expo-logo.png
diff --git a/apps/ExpoApp57/assets/images/logo-glow.png b/apps/shared-runtime/assets/images/logo-glow.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/logo-glow.png
rename to apps/shared-runtime/assets/images/logo-glow.png
diff --git a/apps/ExpoApp57/assets/images/react-logo.png b/apps/shared-runtime/assets/images/react-logo.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/react-logo.png
rename to apps/shared-runtime/assets/images/react-logo.png
diff --git a/apps/ExpoApp57/assets/images/react-logo@2x.png b/apps/shared-runtime/assets/images/react-logo@2x.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/react-logo@2x.png
rename to apps/shared-runtime/assets/images/react-logo@2x.png
diff --git a/apps/ExpoApp57/assets/images/react-logo@3x.png b/apps/shared-runtime/assets/images/react-logo@3x.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/react-logo@3x.png
rename to apps/shared-runtime/assets/images/react-logo@3x.png
diff --git a/apps/ExpoApp57/assets/images/tabIcons/explore.png b/apps/shared-runtime/assets/images/tabIcons/explore.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/tabIcons/explore.png
rename to apps/shared-runtime/assets/images/tabIcons/explore.png
diff --git a/apps/ExpoApp57/assets/images/tabIcons/explore@2x.png b/apps/shared-runtime/assets/images/tabIcons/explore@2x.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/tabIcons/explore@2x.png
rename to apps/shared-runtime/assets/images/tabIcons/explore@2x.png
diff --git a/apps/ExpoApp57/assets/images/tabIcons/explore@3x.png b/apps/shared-runtime/assets/images/tabIcons/explore@3x.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/tabIcons/explore@3x.png
rename to apps/shared-runtime/assets/images/tabIcons/explore@3x.png
diff --git a/apps/ExpoApp57/assets/images/tabIcons/home.png b/apps/shared-runtime/assets/images/tabIcons/home.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/tabIcons/home.png
rename to apps/shared-runtime/assets/images/tabIcons/home.png
diff --git a/apps/ExpoApp57/assets/images/tabIcons/home@2x.png b/apps/shared-runtime/assets/images/tabIcons/home@2x.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/tabIcons/home@2x.png
rename to apps/shared-runtime/assets/images/tabIcons/home@2x.png
diff --git a/apps/ExpoApp57/assets/images/tabIcons/home@3x.png b/apps/shared-runtime/assets/images/tabIcons/home@3x.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/tabIcons/home@3x.png
rename to apps/shared-runtime/assets/images/tabIcons/home@3x.png
diff --git a/apps/ExpoApp57/assets/images/tutorial-web.png b/apps/shared-runtime/assets/images/tutorial-web.png
similarity index 100%
rename from apps/ExpoApp57/assets/images/tutorial-web.png
rename to apps/shared-runtime/assets/images/tutorial-web.png
diff --git a/apps/shared-runtime/eslint.config.mjs b/apps/shared-runtime/eslint.config.mjs
new file mode 100644
index 000000000..fdc83527f
--- /dev/null
+++ b/apps/shared-runtime/eslint.config.mjs
@@ -0,0 +1,3 @@
+import eslintRnConfig from '../../eslint.config.rn.mjs';
+
+export default eslintRnConfig;
diff --git a/apps/shared-runtime/package.json b/apps/shared-runtime/package.json
new file mode 100644
index 000000000..7d316a018
--- /dev/null
+++ b/apps/shared-runtime/package.json
@@ -0,0 +1,79 @@
+{
+  "name": "@callstack/shared-runtime",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Runtime code shared by RNApp, ExpoApp57 and ExpoApp58.",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./e2eTestIds": "./src/e2eTestIds.ts",
+    "./counter": "./src/components/counter.tsx",
+    "./expo/RNApp": "./src/expo/RNApp.tsx",
+    "./expo/app/layout": "./src/expo/app/layout.tsx",
+    "./expo/app/home": "./src/expo/app/home.tsx",
+    "./expo/app/explore": "./src/expo/app/explore.tsx",
+    "./expo/app/postMessage": "./src/expo/app/postMessage.tsx",
+    "./useMarkFullyDisplayed": "./src/useMarkFullyDisplayed.ts"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "expo-device": "*",
+    "expo-image": "*",
+    "expo-router": "*",
+    "expo-symbols": "*",
+    "expo-updates": "*",
+    "expo-web-browser": "*",
+    "react": ">=18",
+    "react-native": ">=0.73",
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-worklets": "*"
+  },
+  "peerDependenciesMeta": {
+    "expo": {
+      "optional": true
+    },
+    "expo-device": {
+      "optional": true
+    },
+    "expo-image": {
+      "optional": true
+    },
+    "expo-router": {
+      "optional": true
+    },
+    "expo-symbols": {
+      "optional": true
+    },
+    "expo-updates": {
+      "optional": true
+    },
+    "expo-web-browser": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    },
+    "react-native-worklets": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@callstack/brownfield-navigation": "workspace:^",
+    "@callstack/brownie": "workspace:^",
+    "@callstack/react-native-brownfield": "workspace:^",
+    "@types/react": "^19.1.1",
+    "eslint": "^9.39.3",
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.25.0"
+  }
+}
diff --git a/apps/RNApp/src/components/counter/index.tsx b/apps/shared-runtime/src/components/counter.tsx
similarity index 62%
rename from apps/RNApp/src/components/counter/index.tsx
rename to apps/shared-runtime/src/components/counter.tsx
index f18878b33..0f4494bd4 100644
--- a/apps/RNApp/src/components/counter/index.tsx
+++ b/apps/shared-runtime/src/components/counter.tsx
@@ -1,11 +1,17 @@
-import { brownfieldE2ETestIds } from '@callstack/brownfield-example-shared-tests/e2eTestIds';
 import { Button, StyleSheet, Text } from 'react-native';
 import { useStore } from '@callstack/brownie';
 
+import { brownfieldE2ETestIds } from '../e2eTestIds';
+
 type CounterProps = {
-  colors: { primary: string; secondary: string };
+  /** Optional host palette. RNApp themes the counter; the Expo demos use the default colors. */
+  colors?: { primary: string; secondary: string };
 };
 
+/**
+ * Brownie shared-store demo: the count lives in the native `BrownfieldStore` and stays in sync
+ * with whatever the native host renders.
+ */
 const Counter = ({ colors }: CounterProps) => {
   const [counter, setState] = useStore('BrownfieldStore', (s) => s.counter);
 
@@ -14,7 +20,7 @@ const Counter = ({ colors }: CounterProps) => {
       <Text
         testID={brownfieldE2ETestIds.counterCount}
         accessibilityLabel={`Count: ${counter}`}
-        style={[styles.text, { color: colors.secondary }]}
+        style={[styles.text, colors && { color: colors.secondary }]}
       >
         Count: {counter}
       </Text>
@@ -22,7 +28,7 @@ const Counter = ({ colors }: CounterProps) => {
       <Button
         testID={brownfieldE2ETestIds.counterIncrement}
         onPress={() => setState((prev) => ({ counter: prev.counter + 1 }))}
-        color={colors.secondary}
+        color={colors?.secondary}
         title="Increment"
       />
     </>
diff --git a/apps/brownfield-example-shared-tests/src/e2eTestIds.ts b/apps/shared-runtime/src/e2eTestIds.ts
similarity index 100%
rename from apps/brownfield-example-shared-tests/src/e2eTestIds.ts
rename to apps/shared-runtime/src/e2eTestIds.ts
diff --git a/apps/shared-runtime/src/expo/RNApp.tsx b/apps/shared-runtime/src/expo/RNApp.tsx
new file mode 100644
index 000000000..82b489c87
--- /dev/null
+++ b/apps/shared-runtime/src/expo/RNApp.tsx
@@ -0,0 +1,118 @@
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import ReactNativeBrownfield from '@callstack/react-native-brownfield';
+import BrownfieldNavigation from '@callstack/brownfield-navigation';
+import { checkAndFetchUpdate } from './utils/expo-rn-updates';
+
+import Counter from '../components/counter';
+import { useMarkFullyDisplayed } from '../useMarkFullyDisplayed';
+
+type RNAppProps = {
+  sdkVersion: number;
+  showPopToNative?: boolean;
+  nativeOsVersionLabel?: string;
+  brownfieldPresentationID?: string;
+};
+
+export default function RNApp({
+  sdkVersion,
+  showPopToNative = false,
+  nativeOsVersionLabel,
+  brownfieldPresentationID,
+}: RNAppProps) {
+  useMarkFullyDisplayed(brownfieldPresentationID);
+
+  const requestNativeConfirmation = async () => {
+    try {
+      await BrownfieldNavigation.requestNativeConfirmation(
+        'Are you sure you want to continue?'
+      );
+    } catch (error) {
+      console.error(`Native confirmation failed: ${error}`, 'native');
+    }
+  };
+
+  const showNativeBanner = () => {
+    BrownfieldNavigation.showNativeBanner('Hello from React Native!', () => {
+      console.log('Native banner dismissed');
+    });
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.title}>Expo React Native Brownfield</Text>
+
+      {nativeOsVersionLabel ? (
+        <Text
+          style={styles.nativeOsVersionLabel}
+          accessibilityLabel="Native OS version"
+        >
+          {nativeOsVersionLabel}
+        </Text>
+      ) : null}
+
+      <View style={styles.content}>
+        <Counter />
+
+        <Button
+          title="Navigate to Settings"
+          onPress={() =>
+            BrownfieldNavigation.navigateToSettings({
+              id: 'expo-user-123',
+              name: 'Expo User',
+              flags: [`expo${sdkVersion}`],
+              ids: ['expo-user-123'],
+            })
+          }
+        />
+        <Button
+          title="Navigate to Referrals"
+          onPress={() => BrownfieldNavigation.navigateToReferrals('123')}
+        />
+        <Button
+          onPress={requestNativeConfirmation}
+          title="Request native confirmation"
+        />
+
+        <Button onPress={showNativeBanner} title="Show native banner" />
+
+        <Button title="Fetch Update" onPress={checkAndFetchUpdate} />
+        {showPopToNative && (
+          <Button
+            title="Pop To Native"
+            onPress={() => ReactNativeBrownfield.popToNative(true)}
+          />
+        )}
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#eeeeee',
+    paddingTop: 20,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  nativeOsVersionLabel: {
+    fontSize: 11,
+    opacity: 0.75,
+    textAlign: 'center',
+    marginTop: 4,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 18,
+    textAlign: 'center',
+    marginBottom: 5,
+  },
+});
diff --git a/apps/shared-runtime/src/expo/app/explore.tsx b/apps/shared-runtime/src/expo/app/explore.tsx
new file mode 100644
index 000000000..d4b0dc15f
--- /dev/null
+++ b/apps/shared-runtime/src/expo/app/explore.tsx
@@ -0,0 +1,199 @@
+import { Image } from 'expo-image';
+import { SymbolView } from 'expo-symbols';
+import { Platform, Pressable, ScrollView, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { ExternalLink } from '../components/external-link';
+import { ThemedText } from '../components/themed-text';
+import { ThemedView } from '../components/themed-view';
+import { Collapsible } from '../components/ui/collapsible';
+import { WebBadge } from '../components/web-badge';
+import { BottomTabInset, MaxContentWidth, Spacing } from '../constants/theme';
+import { useTheme } from '../hooks/use-theme';
+
+export default function TabTwoScreen() {
+  const safeAreaInsets = useSafeAreaInsets();
+  const insets = {
+    ...safeAreaInsets,
+    bottom: safeAreaInsets.bottom + BottomTabInset + Spacing.three,
+  };
+  const theme = useTheme();
+
+  const contentPlatformStyle = Platform.select({
+    android: {
+      paddingTop: insets.top,
+      paddingLeft: insets.left,
+      paddingRight: insets.right,
+      paddingBottom: insets.bottom,
+    },
+    web: {
+      paddingTop: Spacing.six,
+      paddingBottom: Spacing.four,
+    },
+  });
+
+  return (
+    <ScrollView
+      style={[styles.scrollView, { backgroundColor: theme.background }]}
+      contentInset={insets}
+      contentContainerStyle={[styles.contentContainer, contentPlatformStyle]}
+    >
+      <ThemedView style={styles.container}>
+        <ThemedView style={styles.titleContainer}>
+          <ThemedText type="subtitle">Explore</ThemedText>
+          <ThemedText style={styles.centerText} themeColor="textSecondary">
+            This starter app includes example{'\n'}code to help you get started.
+          </ThemedText>
+
+          <ExternalLink href="https://docs.expo.dev" asChild>
+            <Pressable style={({ pressed }) => pressed && styles.pressed}>
+              <ThemedView type="backgroundElement" style={styles.linkButton}>
+                <ThemedText type="link">Expo documentation</ThemedText>
+                <SymbolView
+                  tintColor={theme.text}
+                  name={{
+                    ios: 'arrow.up.right.square',
+                    android: 'link',
+                    web: 'link',
+                  }}
+                  size={12}
+                />
+              </ThemedView>
+            </Pressable>
+          </ExternalLink>
+        </ThemedView>
+
+        <ThemedView style={styles.sectionsWrapper}>
+          <Collapsible title="File-based routing">
+            <ThemedText type="small">
+              This app has two screens:{' '}
+              <ThemedText type="code">src/app/index.tsx</ThemedText> and{' '}
+              <ThemedText type="code">src/app/explore.tsx</ThemedText>
+            </ThemedText>
+            <ThemedText type="small">
+              The layout file in{' '}
+              <ThemedText type="code">src/app/_layout.tsx</ThemedText> sets up
+              the tab navigator.
+            </ThemedText>
+            <ExternalLink href="https://docs.expo.dev/router/introduction">
+              <ThemedText type="linkPrimary">Learn more</ThemedText>
+            </ExternalLink>
+          </Collapsible>
+
+          <Collapsible title="Android, iOS, and web support">
+            <ThemedView
+              type="backgroundElement"
+              style={styles.collapsibleContent}
+            >
+              <ThemedText type="small">
+                You can open this project on Android, iOS, and the web. To open
+                the web version, press{' '}
+                <ThemedText type="smallBold">w</ThemedText> in the terminal
+                running this project.
+              </ThemedText>
+              <Image
+                source={require('../../../assets/images/tutorial-web.png')}
+                style={styles.imageTutorial}
+              />
+            </ThemedView>
+          </Collapsible>
+
+          <Collapsible title="Images">
+            <ThemedText type="small">
+              For static images, you can use the{' '}
+              <ThemedText type="code">@2x</ThemedText> and{' '}
+              <ThemedText type="code">@3x</ThemedText> suffixes to provide files
+              for different screen densities.
+            </ThemedText>
+            <Image
+              source={require('../../../assets/images/react-logo.png')}
+              style={styles.imageReact}
+            />
+            <ExternalLink href="https://reactnative.dev/docs/images">
+              <ThemedText type="linkPrimary">Learn more</ThemedText>
+            </ExternalLink>
+          </Collapsible>
+
+          <Collapsible title="Light and dark mode components">
+            <ThemedText type="small">
+              This template has light and dark mode support. The{' '}
+              <ThemedText type="code">useColorScheme()</ThemedText> hook lets
+              you inspect what the user&apos;s current color scheme is, and so
+              you can adjust UI colors accordingly.
+            </ThemedText>
+            <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
+              <ThemedText type="linkPrimary">Learn more</ThemedText>
+            </ExternalLink>
+          </Collapsible>
+
+          <Collapsible title="Animations">
+            <ThemedText type="small">
+              This template includes an example of an animated component. The{' '}
+              <ThemedText type="code">
+                src/components/ui/collapsible.tsx
+              </ThemedText>{' '}
+              component uses the powerful{' '}
+              <ThemedText type="code">react-native-reanimated</ThemedText>{' '}
+              library to animate opening this hint.
+            </ThemedText>
+          </Collapsible>
+        </ThemedView>
+        {Platform.OS === 'web' && <WebBadge />}
+      </ThemedView>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  container: {
+    maxWidth: MaxContentWidth,
+    flexGrow: 1,
+  },
+  titleContainer: {
+    gap: Spacing.three,
+    alignItems: 'center',
+    paddingHorizontal: Spacing.four,
+    paddingVertical: Spacing.six,
+  },
+  centerText: {
+    textAlign: 'center',
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+  linkButton: {
+    flexDirection: 'row',
+    paddingHorizontal: Spacing.four,
+    paddingVertical: Spacing.two,
+    borderRadius: Spacing.five,
+    justifyContent: 'center',
+    gap: Spacing.one,
+    alignItems: 'center',
+  },
+  sectionsWrapper: {
+    gap: Spacing.five,
+    paddingHorizontal: Spacing.four,
+    paddingTop: Spacing.three,
+  },
+  collapsibleContent: {
+    alignItems: 'center',
+  },
+  imageTutorial: {
+    width: '100%',
+    aspectRatio: 296 / 171,
+    borderRadius: Spacing.three,
+    marginTop: Spacing.two,
+  },
+  imageReact: {
+    width: 100,
+    height: 100,
+    alignSelf: 'center',
+  },
+});
diff --git a/apps/shared-runtime/src/expo/app/home.tsx b/apps/shared-runtime/src/expo/app/home.tsx
new file mode 100644
index 000000000..fb8cdaf48
--- /dev/null
+++ b/apps/shared-runtime/src/expo/app/home.tsx
@@ -0,0 +1,110 @@
+import * as Device from 'expo-device';
+import { Button, Platform, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { brownfieldE2ETestIds } from '../../e2eTestIds';
+
+import { AnimatedIcon } from '../components/animated-icon';
+import { HintRow } from '../components/hint-row';
+import { ThemedText } from '../components/themed-text';
+import { ThemedView } from '../components/themed-view';
+import { WebBadge } from '../components/web-badge';
+import { BottomTabInset, MaxContentWidth, Spacing } from '../constants/theme';
+import { checkAndFetchUpdate } from '../utils/expo-rn-updates';
+
+function getDevMenuHint() {
+  if (Platform.OS === 'web') {
+    return <ThemedText type="small">use browser devtools</ThemedText>;
+  }
+  if (Device.isDevice) {
+    return (
+      <ThemedText type="small">
+        shake device or press <ThemedText type="code">m</ThemedText> in terminal
+      </ThemedText>
+    );
+  }
+  const shortcut = Platform.OS === 'android' ? 'cmd+m (or ctrl+m)' : 'cmd+d';
+  return (
+    <ThemedText type="small">
+      press <ThemedText type="code">{shortcut}</ThemedText>
+    </ThemedText>
+  );
+}
+
+export default function HomeScreen({ sdkVersion }: { sdkVersion: number }) {
+  return (
+    <ThemedView
+      testID={brownfieldE2ETestIds.rnAppHome}
+      style={styles.container}
+    >
+      <SafeAreaView style={styles.safeArea}>
+        <ThemedView style={styles.heroSection}>
+          <AnimatedIcon />
+          <ThemedText
+            type="title"
+            style={styles.title}
+            testID={brownfieldE2ETestIds.rnAppHomeTitle}
+            accessibilityLabel={`Welcome to Expo ${sdkVersion}`}
+          >
+            Welcome to Expo {sdkVersion}
+          </ThemedText>
+        </ThemedView>
+
+        <ThemedText type="code" style={styles.code}>
+          get started
+        </ThemedText>
+
+        <ThemedView type="backgroundElement" style={styles.stepContainer}>
+          <HintRow
+            title="Try editing"
+            hint={<ThemedText type="code">src/app/index.tsx</ThemedText>}
+          />
+          <HintRow title="Dev tools" hint={getDevMenuHint()} />
+          <HintRow
+            title="Fresh start"
+            hint={<ThemedText type="code">npm run reset-project</ThemedText>}
+          />
+        </ThemedView>
+
+        <Button title="Fetch Update" onPress={checkAndFetchUpdate} />
+
+        {Platform.OS === 'web' && <WebBadge />}
+      </SafeAreaView>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    flexDirection: 'row',
+    paddingTop: Spacing.three,
+  },
+  safeArea: {
+    flex: 1,
+    paddingHorizontal: Spacing.four,
+    alignItems: 'center',
+    gap: Spacing.three,
+    paddingBottom: BottomTabInset + Spacing.three,
+    maxWidth: MaxContentWidth,
+  },
+  heroSection: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: Spacing.four,
+    gap: Spacing.four,
+  },
+  title: {
+    textAlign: 'center',
+  },
+  code: {
+    textTransform: 'uppercase',
+  },
+  stepContainer: {
+    gap: Spacing.three,
+    alignSelf: 'stretch',
+    paddingHorizontal: Spacing.three,
+    paddingVertical: Spacing.four,
+    borderRadius: Spacing.four,
+  },
+});
diff --git a/apps/shared-runtime/src/expo/app/layout.tsx b/apps/shared-runtime/src/expo/app/layout.tsx
new file mode 100644
index 000000000..0c827d893
--- /dev/null
+++ b/apps/shared-runtime/src/expo/app/layout.tsx
@@ -0,0 +1,19 @@
+import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router';
+import { useColorScheme } from 'react-native';
+
+import { AnimatedSplashOverlay } from '../components/animated-icon';
+import AppTabs from '../components/app-tabs';
+
+export const unstable_settings = {
+  initialRouteName: 'index',
+};
+
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+  return (
+    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <AnimatedSplashOverlay />
+      <AppTabs />
+    </ThemeProvider>
+  );
+}
diff --git a/apps/shared-runtime/src/expo/app/postMessage.tsx b/apps/shared-runtime/src/expo/app/postMessage.tsx
new file mode 100644
index 000000000..1dcdf0c31
--- /dev/null
+++ b/apps/shared-runtime/src/expo/app/postMessage.tsx
@@ -0,0 +1,118 @@
+import { StyleSheet, FlatList, TouchableOpacity } from 'react-native';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { brownfieldE2ETestIds } from '../../e2eTestIds';
+import ReactNativeBrownfield from '@callstack/react-native-brownfield';
+import type { MessageEvent } from '@callstack/react-native-brownfield';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { ThemedView } from '../components/themed-view';
+import { ThemedText } from '../components/themed-text';
+import type { Message } from '../components/postMessage/Message';
+import { MessageBubble } from '../components/postMessage/MessageBubble';
+import { BottomTabInset, Spacing } from '../constants/theme';
+
+export default function PostMessageTab() {
+  const insets = useSafeAreaInsets();
+  const [messages, setMessages] = useState<Message[]>([]);
+  const flatListRef = useRef<FlatList<Message>>(null);
+
+  const messageCounterRef = useRef(0);
+
+  useEffect(() => {
+    const sub = ReactNativeBrownfield.onMessage((event: MessageEvent) => {
+      const data = event.data as { text?: string };
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: String(++messageCounterRef.current),
+          text: data?.text ?? JSON.stringify(event.data),
+          from: 'native',
+          timestamp: Date.now(),
+        },
+      ]);
+    });
+    return () => sub.remove();
+  }, []);
+
+  const sendMessage = useCallback(() => {
+    const msg = {
+      text: `Hello from Expo! (#${++messageCounterRef.current})`,
+      timestamp: Date.now(),
+    };
+    ReactNativeBrownfield.postMessage(msg);
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: String(messageCounterRef.current),
+        text: msg.text,
+        from: 'rn',
+        timestamp: msg.timestamp,
+      },
+    ]);
+  }, []);
+
+  return (
+    <ThemedView
+      style={[
+        styles.messageSection,
+        {
+          paddingTop: insets.top + Spacing.three,
+          paddingBottom: insets.bottom + BottomTabInset,
+          paddingLeft: insets.left + 20,
+          paddingRight: insets.right + 20,
+        },
+      ]}
+    >
+      <TouchableOpacity
+        testID={brownfieldE2ETestIds.sendMessageToNative}
+        style={styles.sendButton}
+        onPress={sendMessage}
+        activeOpacity={0.8}
+      >
+        <ThemedText style={styles.sendButtonText}>
+          Send message to Native
+        </ThemedText>
+      </TouchableOpacity>
+
+      <FlatList
+        data={messages}
+        keyExtractor={(item) => `message-${item.id}`}
+        renderItem={({ item }) => <MessageBubble item={item} />}
+        style={styles.messageList}
+        contentContainerStyle={styles.messageListContent}
+        inverted={true} // ensure newest messages are at the top
+        onContentSizeChange={() => {
+          flatListRef.current?.scrollToEnd({ animated: true });
+        }}
+        ref={flatListRef}
+      />
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  messageSection: {
+    flex: 1,
+    width: '100%',
+  },
+  sendButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 10,
+    alignItems: 'center',
+    marginBottom: 10,
+    backgroundColor: '#4F8EF7',
+  },
+  sendButtonText: {
+    fontWeight: '700',
+    fontSize: 15,
+    color: '#fff',
+  },
+  messageList: {
+    flex: 1,
+  },
+  messageListContent: {
+    paddingBottom: 8,
+  },
+});
diff --git a/apps/ExpoApp57/src/components/animated-icon.module.css b/apps/shared-runtime/src/expo/components/animated-icon.module.css
similarity index 100%
rename from apps/ExpoApp57/src/components/animated-icon.module.css
rename to apps/shared-runtime/src/expo/components/animated-icon.module.css
diff --git a/apps/ExpoApp57/src/components/animated-icon.tsx b/apps/shared-runtime/src/expo/components/animated-icon.tsx
similarity index 81%
rename from apps/ExpoApp57/src/components/animated-icon.tsx
rename to apps/shared-runtime/src/expo/components/animated-icon.tsx
index 9d900a8ca..45be24742 100644
--- a/apps/ExpoApp57/src/components/animated-icon.tsx
+++ b/apps/shared-runtime/src/expo/components/animated-icon.tsx
@@ -83,13 +83,28 @@ const glowKeyframe = new Keyframe({
 export function AnimatedIcon() {
   return (
     <View style={styles.iconContainer}>
-      <Animated.View entering={glowKeyframe.duration(60 * 1000 * 4)} style={styles.glow}>
-        <Image style={styles.glow} source={require('@/assets/images/logo-glow.png')} />
+      <Animated.View
+        entering={glowKeyframe.duration(60 * 1000 * 4)}
+        style={styles.glow}
+      >
+        <Image
+          style={styles.glow}
+          source={require('../../../assets/images/logo-glow.png')}
+        />
       </Animated.View>
 
-      <Animated.View entering={keyframe.duration(DURATION)} style={styles.background} />
-      <Animated.View style={styles.imageContainer} entering={logoKeyframe.duration(DURATION)}>
-        <Image style={styles.image} source={require('@/assets/images/expo-logo.png')} />
+      <Animated.View
+        entering={keyframe.duration(DURATION)}
+        style={styles.background}
+      />
+      <Animated.View
+        style={styles.imageContainer}
+        entering={logoKeyframe.duration(DURATION)}
+      >
+        <Image
+          style={styles.image}
+          source={require('../../../assets/images/expo-logo.png')}
+        />
       </Animated.View>
     </View>
   );
diff --git a/apps/ExpoApp57/src/components/animated-icon.web.tsx b/apps/shared-runtime/src/expo/components/animated-icon.web.tsx
similarity index 76%
rename from apps/ExpoApp57/src/components/animated-icon.web.tsx
rename to apps/shared-runtime/src/expo/components/animated-icon.web.tsx
index dfbb1fd7d..d649f99cb 100644
--- a/apps/ExpoApp57/src/components/animated-icon.web.tsx
+++ b/apps/shared-runtime/src/expo/components/animated-icon.web.tsx
@@ -57,16 +57,31 @@ const glowKeyframe = new Keyframe({
 export function AnimatedIcon() {
   return (
     <View style={styles.iconContainer}>
-      <Animated.View entering={glowKeyframe.duration(60 * 1000 * 4)} style={styles.glow}>
-        <Image style={styles.glow} source={require('@/assets/images/logo-glow.png')} />
+      <Animated.View
+        entering={glowKeyframe.duration(60 * 1000 * 4)}
+        style={styles.glow}
+      >
+        <Image
+          style={styles.glow}
+          source={require('../../../assets/images/logo-glow.png')}
+        />
       </Animated.View>
 
-      <Animated.View style={styles.background} entering={keyframe.duration(DURATION)}>
+      <Animated.View
+        style={styles.background}
+        entering={keyframe.duration(DURATION)}
+      >
         <div className={classes.expoLogoBackground} />
       </Animated.View>
 
-      <Animated.View style={styles.imageContainer} entering={logoKeyframe.duration(DURATION)}>
-        <Image style={styles.image} source={require('@/assets/images/expo-logo.png')} />
+      <Animated.View
+        style={styles.imageContainer}
+        entering={logoKeyframe.duration(DURATION)}
+      >
+        <Image
+          style={styles.image}
+          source={require('../../../assets/images/expo-logo.png')}
+        />
       </Animated.View>
     </View>
   );
diff --git a/apps/ExpoApp58/src/components/app-tabs.tsx b/apps/shared-runtime/src/expo/components/app-tabs.tsx
similarity index 75%
rename from apps/ExpoApp58/src/components/app-tabs.tsx
rename to apps/shared-runtime/src/expo/components/app-tabs.tsx
index 46e1428ea..ecedeee68 100644
--- a/apps/ExpoApp58/src/components/app-tabs.tsx
+++ b/apps/shared-runtime/src/expo/components/app-tabs.tsx
@@ -1,27 +1,29 @@
 import { NativeTabs } from 'expo-router/unstable-native-tabs';
 import { useColorScheme } from 'react-native';
-import { brownfieldE2ETestIds } from '@callstack/brownfield-example-shared-tests/e2eTestIds';
+import { brownfieldE2ETestIds } from '../../e2eTestIds';
 
-import { Colors } from '@/constants/theme';
+import { Colors } from '../constants/theme';
 
 export default function AppTabs() {
   const scheme = useColorScheme();
-  const colors = Colors[scheme === 'unspecified' ? 'light' : scheme];
+  const colors = Colors[scheme === 'dark' ? 'dark' : 'light'];
 
   return (
     <NativeTabs
       backgroundColor={colors.background}
       indicatorColor={colors.backgroundElement}
-      labelStyle={{ selected: { color: colors.text } }}>
+      labelStyle={{ selected: { color: colors.text } }}
+    >
       <NativeTabs.Trigger
         name="index"
         unstable_nativeProps={{
           tabBarItemTestID: brownfieldE2ETestIds.expoHomeTab,
           tabBarItemAccessibilityLabel: 'Home',
-        }}>
+        }}
+      >
         <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
         <NativeTabs.Trigger.Icon
-          src={require('@/assets/images/tabIcons/home.png')}
+          src={require('../../../assets/images/tabIcons/home.png')}
           renderingMode="template"
         />
       </NativeTabs.Trigger>
@@ -29,7 +31,7 @@ export default function AppTabs() {
       <NativeTabs.Trigger name="explore">
         <NativeTabs.Trigger.Label>Explore</NativeTabs.Trigger.Label>
         <NativeTabs.Trigger.Icon
-          src={require('@/assets/images/tabIcons/explore.png')}
+          src={require('../../../assets/images/tabIcons/explore.png')}
           renderingMode="template"
         />
       </NativeTabs.Trigger>
@@ -39,7 +41,8 @@ export default function AppTabs() {
         unstable_nativeProps={{
           tabBarItemTestID: brownfieldE2ETestIds.expoPostMessageTab,
           tabBarItemAccessibilityLabel: 'postMessage API',
-        }}>
+        }}
+      >
         <NativeTabs.Trigger.Label>postMessage API</NativeTabs.Trigger.Label>
         <NativeTabs.Trigger.Icon md="message" sf="message.fill" />
       </NativeTabs.Trigger>
diff --git a/apps/ExpoApp58/src/components/app-tabs.web.tsx b/apps/shared-runtime/src/expo/components/app-tabs.web.tsx
similarity index 89%
rename from apps/ExpoApp58/src/components/app-tabs.web.tsx
rename to apps/shared-runtime/src/expo/components/app-tabs.web.tsx
index ca2787df7..0e9ed31f5 100644
--- a/apps/ExpoApp58/src/components/app-tabs.web.tsx
+++ b/apps/shared-runtime/src/expo/components/app-tabs.web.tsx
@@ -13,7 +13,7 @@ import { ExternalLink } from './external-link';
 import { ThemedText } from './themed-text';
 import { ThemedView } from './themed-view';
 
-import { Colors, MaxContentWidth, Spacing } from '@/constants/theme';
+import { Colors, MaxContentWidth, Spacing } from '../constants/theme';
 
 export default function AppTabs() {
   return (
@@ -33,13 +33,21 @@ export default function AppTabs() {
   );
 }
 
-export function TabButton({ children, isFocused, ...props }: TabTriggerSlotProps) {
+export function TabButton({
+  children,
+  isFocused,
+  ...props
+}: TabTriggerSlotProps) {
   return (
     <Pressable {...props} style={({ pressed }) => pressed && styles.pressed}>
       <ThemedView
         type={isFocused ? 'backgroundSelected' : 'backgroundElement'}
-        style={styles.tabButtonView}>
-        <ThemedText type="small" themeColor={isFocused ? 'text' : 'textSecondary'}>
+        style={styles.tabButtonView}
+      >
+        <ThemedText
+          type="small"
+          themeColor={isFocused ? 'text' : 'textSecondary'}
+        >
           {children}
         </ThemedText>
       </ThemedView>
diff --git a/apps/ExpoApp58/src/components/external-link.tsx b/apps/shared-runtime/src/expo/components/external-link.tsx
similarity index 78%
rename from apps/ExpoApp58/src/components/external-link.tsx
rename to apps/shared-runtime/src/expo/components/external-link.tsx
index 883e515a4..0fe4b314d 100644
--- a/apps/ExpoApp58/src/components/external-link.tsx
+++ b/apps/shared-runtime/src/expo/components/external-link.tsx
@@ -1,8 +1,13 @@
 import { Href, Link } from 'expo-router';
-import { openBrowserAsync, WebBrowserPresentationStyle } from 'expo-web-browser';
+import {
+  openBrowserAsync,
+  WebBrowserPresentationStyle,
+} from 'expo-web-browser';
 import { type ComponentProps } from 'react';
 
-type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
+type Props = Omit<ComponentProps<typeof Link>, 'href'> & {
+  href: Href & string;
+};
 
 export function ExternalLink({ href, ...rest }: Props) {
   return (
diff --git a/apps/ExpoApp58/src/components/hint-row.tsx b/apps/shared-runtime/src/expo/components/hint-row.tsx
similarity index 84%
rename from apps/ExpoApp58/src/components/hint-row.tsx
rename to apps/shared-runtime/src/expo/components/hint-row.tsx
index acf4dc5d8..e9e315b4e 100644
--- a/apps/ExpoApp58/src/components/hint-row.tsx
+++ b/apps/shared-runtime/src/expo/components/hint-row.tsx
@@ -4,14 +4,17 @@ import { View, StyleSheet } from 'react-native';
 import { ThemedText } from './themed-text';
 import { ThemedView } from './themed-view';
 
-import { Spacing } from '@/constants/theme';
+import { Spacing } from '../constants/theme';
 
 type HintRowProps = {
   title?: string;
   hint?: ReactNode;
 };
 
-export function HintRow({ title = 'Try editing', hint = 'app/index.tsx' }: HintRowProps) {
+export function HintRow({
+  title = 'Try editing',
+  hint = 'app/index.tsx',
+}: HintRowProps) {
   return (
     <View style={styles.stepRow}>
       <ThemedText type="small">{title}</ThemedText>
diff --git a/apps/ExpoApp57/src/components/postMessage/Message.ts b/apps/shared-runtime/src/expo/components/postMessage/Message.ts
similarity index 100%
rename from apps/ExpoApp57/src/components/postMessage/Message.ts
rename to apps/shared-runtime/src/expo/components/postMessage/Message.ts
diff --git a/apps/ExpoApp58/src/components/postMessage/MessageBubble.tsx b/apps/shared-runtime/src/expo/components/postMessage/MessageBubble.tsx
similarity index 92%
rename from apps/ExpoApp58/src/components/postMessage/MessageBubble.tsx
rename to apps/shared-runtime/src/expo/components/postMessage/MessageBubble.tsx
index b8975896e..606fa9721 100644
--- a/apps/ExpoApp58/src/components/postMessage/MessageBubble.tsx
+++ b/apps/shared-runtime/src/expo/components/postMessage/MessageBubble.tsx
@@ -1,8 +1,8 @@
 import { Animated, StyleSheet } from 'react-native';
 import { Message } from './Message';
 import { useEffect, useState } from 'react';
-import { brownfieldE2ETestIds } from '@callstack/brownfield-example-shared-tests/e2eTestIds';
-import { ThemedText } from '@/components/themed-text';
+import { brownfieldE2ETestIds } from '../../../e2eTestIds';
+import { ThemedText } from '../themed-text';
 
 export function MessageBubble({ item }: { item: Message }) {
   const [opacity] = useState(() => new Animated.Value(0));
@@ -45,7 +45,8 @@ export function MessageBubble({ item }: { item: Message }) {
         style={styles.bubbleText}
         testID={
           isFromNative ? undefined : brownfieldE2ETestIds.rnPostMessageText
-        }>
+        }
+      >
         {item.text}
       </ThemedText>
     </Animated.View>
diff --git a/apps/ExpoApp57/src/components/themed-text.tsx b/apps/shared-runtime/src/expo/components/themed-text.tsx
similarity index 79%
rename from apps/ExpoApp57/src/components/themed-text.tsx
rename to apps/shared-runtime/src/expo/components/themed-text.tsx
index 799c8b130..36f2d8fb4 100644
--- a/apps/ExpoApp57/src/components/themed-text.tsx
+++ b/apps/shared-runtime/src/expo/components/themed-text.tsx
@@ -1,14 +1,27 @@
 import { Platform, StyleSheet, Text, type TextProps } from 'react-native';
 
-import { Fonts, ThemeColor } from '@/constants/theme';
-import { useTheme } from '@/hooks/use-theme';
+import { Fonts, ThemeColor } from '../constants/theme';
+import { useTheme } from '../hooks/use-theme';
 
 export type ThemedTextProps = TextProps & {
-  type?: 'default' | 'title' | 'small' | 'smallBold' | 'subtitle' | 'link' | 'linkPrimary' | 'code';
+  type?:
+    | 'default'
+    | 'title'
+    | 'small'
+    | 'smallBold'
+    | 'subtitle'
+    | 'link'
+    | 'linkPrimary'
+    | 'code';
   themeColor?: ThemeColor;
 };
 
-export function ThemedText({ style, type = 'default', themeColor, ...rest }: ThemedTextProps) {
+export function ThemedText({
+  style,
+  type = 'default',
+  themeColor,
+  ...rest
+}: ThemedTextProps) {
   const theme = useTheme();
 
   return (
diff --git a/apps/shared-runtime/src/expo/components/themed-view.tsx b/apps/shared-runtime/src/expo/components/themed-view.tsx
new file mode 100644
index 000000000..b28128825
--- /dev/null
+++ b/apps/shared-runtime/src/expo/components/themed-view.tsx
@@ -0,0 +1,19 @@
+import { View, type ViewProps } from 'react-native';
+
+import { ThemeColor } from '../constants/theme';
+import { useTheme } from '../hooks/use-theme';
+
+export type ThemedViewProps = ViewProps & {
+  type?: ThemeColor;
+};
+
+export function ThemedView({ style, type, ...otherProps }: ThemedViewProps) {
+  const theme = useTheme();
+
+  return (
+    <View
+      style={[{ backgroundColor: theme[type ?? 'background'] }, style]}
+      {...otherProps}
+    />
+  );
+}
diff --git a/apps/ExpoApp58/src/components/ui/collapsible.tsx b/apps/shared-runtime/src/expo/components/ui/collapsible.tsx
similarity index 69%
rename from apps/ExpoApp58/src/components/ui/collapsible.tsx
rename to apps/shared-runtime/src/expo/components/ui/collapsible.tsx
index d0d745b40..b4b69269c 100644
--- a/apps/ExpoApp58/src/components/ui/collapsible.tsx
+++ b/apps/shared-runtime/src/expo/components/ui/collapsible.tsx
@@ -3,23 +3,34 @@ import { PropsWithChildren, useState } from 'react';
 import { Pressable, StyleSheet } from 'react-native';
 import Animated, { FadeIn } from 'react-native-reanimated';
 
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { Spacing } from '@/constants/theme';
-import { useTheme } from '@/hooks/use-theme';
+import { ThemedText } from '../themed-text';
+import { ThemedView } from '../themed-view';
+import { Spacing } from '../../constants/theme';
+import { useTheme } from '../../hooks/use-theme';
 
-export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
+export function Collapsible({
+  children,
+  title,
+}: PropsWithChildren & { title: string }) {
   const [isOpen, setIsOpen] = useState(false);
   const theme = useTheme();
 
   return (
     <ThemedView>
       <Pressable
-        style={({ pressed }) => [styles.heading, pressed && styles.pressedHeading]}
-        onPress={() => setIsOpen((value) => !value)}>
+        style={({ pressed }) => [
+          styles.heading,
+          pressed && styles.pressedHeading,
+        ]}
+        onPress={() => setIsOpen((value) => !value)}
+      >
         <ThemedView type="backgroundElement" style={styles.button}>
           <SymbolView
-            name={{ ios: 'chevron.right', android: 'chevron_right', web: 'chevron_right' }}
+            name={{
+              ios: 'chevron.right',
+              android: 'chevron_right',
+              web: 'chevron_right',
+            }}
             size={14}
             weight="bold"
             tintColor={theme.text}
diff --git a/apps/ExpoApp57/src/components/web-badge.tsx b/apps/shared-runtime/src/expo/components/web-badge.tsx
similarity index 72%
rename from apps/ExpoApp57/src/components/web-badge.tsx
rename to apps/shared-runtime/src/expo/components/web-badge.tsx
index 6667898d8..17660e03d 100644
--- a/apps/ExpoApp57/src/components/web-badge.tsx
+++ b/apps/shared-runtime/src/expo/components/web-badge.tsx
@@ -5,21 +5,25 @@ import { useColorScheme, StyleSheet } from 'react-native';
 import { ThemedText } from './themed-text';
 import { ThemedView } from './themed-view';
 
-import { Spacing } from '@/constants/theme';
+import { Spacing } from '../constants/theme';
 
 export function WebBadge() {
   const scheme = useColorScheme();
 
   return (
     <ThemedView style={styles.container}>
-      <ThemedText type="code" themeColor="textSecondary" style={styles.versionText}>
+      <ThemedText
+        type="code"
+        themeColor="textSecondary"
+        style={styles.versionText}
+      >
         v{version}
       </ThemedText>
       <Image
         source={
           scheme === 'dark'
-            ? require('@/assets/images/expo-badge-white.png')
-            : require('@/assets/images/expo-badge.png')
+            ? require('../../../assets/images/expo-badge-white.png')
+            : require('../../../assets/images/expo-badge.png')
         }
         style={styles.badgeImage}
       />
diff --git a/apps/ExpoApp57/src/constants/theme.ts b/apps/shared-runtime/src/expo/constants/theme.ts
similarity index 98%
rename from apps/ExpoApp57/src/constants/theme.ts
rename to apps/shared-runtime/src/expo/constants/theme.ts
index c10ed272a..8de65f678 100644
--- a/apps/ExpoApp57/src/constants/theme.ts
+++ b/apps/shared-runtime/src/expo/constants/theme.ts
@@ -3,7 +3,7 @@
  * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
  */
 
-import '@/global.css';
+import '../global.css';
 
 import { Platform } from 'react-native';
 
diff --git a/apps/ExpoApp58/src/global.css b/apps/shared-runtime/src/expo/global.css
similarity index 50%
rename from apps/ExpoApp58/src/global.css
rename to apps/shared-runtime/src/expo/global.css
index c8fe5031a..9e56c85bd 100644
--- a/apps/ExpoApp58/src/global.css
+++ b/apps/shared-runtime/src/expo/global.css
@@ -1,9 +1,12 @@
 :root {
   --font-display:
-    Spline Sans, Inter, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-    Segoe UI Symbol, Noto Color Emoji;
+    Spline Sans, Inter, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   --font-mono:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
-  --font-rounded: 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif;
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
+    Courier New, monospace;
+  --font-rounded:
+    'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic',
+    sans-serif;
   --font-serif: Georgia, 'Times New Roman', serif;
 }
diff --git a/apps/ExpoApp57/src/hooks/use-color-scheme.ts b/apps/shared-runtime/src/expo/hooks/use-color-scheme.ts
similarity index 100%
rename from apps/ExpoApp57/src/hooks/use-color-scheme.ts
rename to apps/shared-runtime/src/expo/hooks/use-color-scheme.ts
diff --git a/apps/ExpoApp58/src/hooks/use-color-scheme.web.ts b/apps/shared-runtime/src/expo/hooks/use-color-scheme.web.ts
similarity index 80%
rename from apps/ExpoApp58/src/hooks/use-color-scheme.web.ts
rename to apps/shared-runtime/src/expo/hooks/use-color-scheme.web.ts
index a7bb7a4b7..07beece17 100644
--- a/apps/ExpoApp58/src/hooks/use-color-scheme.web.ts
+++ b/apps/shared-runtime/src/expo/hooks/use-color-scheme.web.ts
@@ -7,7 +7,11 @@ const subscribe = () => () => {};
  * To support static rendering, this value needs to be re-calculated on the client side for web
  */
 export function useColorScheme() {
-  const hasHydrated = useSyncExternalStore(subscribe, () => true, () => false);
+  const hasHydrated = useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
   const colorScheme = useRNColorScheme();
 
   if (hasHydrated) {
diff --git a/apps/ExpoApp57/src/hooks/use-theme.ts b/apps/shared-runtime/src/expo/hooks/use-theme.ts
similarity index 53%
rename from apps/ExpoApp57/src/hooks/use-theme.ts
rename to apps/shared-runtime/src/expo/hooks/use-theme.ts
index 677e01518..bd2aa55cd 100644
--- a/apps/ExpoApp57/src/hooks/use-theme.ts
+++ b/apps/shared-runtime/src/expo/hooks/use-theme.ts
@@ -3,12 +3,12 @@
  * https://docs.expo.dev/guides/color-schemes/
  */
 
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
+import { Colors } from '../constants/theme';
+import { useColorScheme } from './use-color-scheme';
 
 export function useTheme() {
   const scheme = useColorScheme();
-  const theme = scheme === 'unspecified' ? 'light' : scheme;
+  const theme = scheme === 'dark' ? 'dark' : 'light';
 
   return Colors[theme];
 }
diff --git a/apps/ExpoApp58/src/utils/expo-rn-updates.ts b/apps/shared-runtime/src/expo/utils/expo-rn-updates.ts
similarity index 87%
rename from apps/ExpoApp58/src/utils/expo-rn-updates.ts
rename to apps/shared-runtime/src/expo/utils/expo-rn-updates.ts
index 521b4719d..13825b13d 100644
--- a/apps/ExpoApp58/src/utils/expo-rn-updates.ts
+++ b/apps/shared-runtime/src/expo/utils/expo-rn-updates.ts
@@ -1,4 +1,4 @@
-import { userAlert } from '@callstack/brownfield-example-shared-tests/runtime';
+import { userAlert } from '../../userAlert';
 import * as Updates from 'expo-updates';
 
 export async function checkAndFetchUpdate() {
diff --git a/apps/brownfield-example-shared-tests/src/runtime.ts b/apps/shared-runtime/src/index.ts
similarity index 100%
rename from apps/brownfield-example-shared-tests/src/runtime.ts
rename to apps/shared-runtime/src/index.ts
diff --git a/apps/RNApp/src/hooks/useMarkFullyDisplayed.ts b/apps/shared-runtime/src/useMarkFullyDisplayed.ts
similarity index 100%
rename from apps/RNApp/src/hooks/useMarkFullyDisplayed.ts
rename to apps/shared-runtime/src/useMarkFullyDisplayed.ts
diff --git a/apps/brownfield-example-shared-tests/src/userAlert.ts b/apps/shared-runtime/src/userAlert.ts
similarity index 100%
rename from apps/brownfield-example-shared-tests/src/userAlert.ts
rename to apps/shared-runtime/src/userAlert.ts
diff --git a/apps/brownfield-example-shared-tests/CHANGELOG.md b/apps/shared-tests/CHANGELOG.md
similarity index 86%
rename from apps/brownfield-example-shared-tests/CHANGELOG.md
rename to apps/shared-tests/CHANGELOG.md
index f617b237b..fbc2fef4a 100644
--- a/apps/brownfield-example-shared-tests/CHANGELOG.md
+++ b/apps/shared-tests/CHANGELOG.md
@@ -1,4 +1,4 @@
-# @callstack/brownfield-example-shared-tests
+# @callstack/shared-tests
 
 ## 0.1.0
 
diff --git a/apps/brownfield-example-shared-tests/detox-android-emulator-device.cjs b/apps/shared-tests/detox-android-emulator-device.cjs
similarity index 100%
rename from apps/brownfield-example-shared-tests/detox-android-emulator-device.cjs
rename to apps/shared-tests/detox-android-emulator-device.cjs
diff --git a/apps/brownfield-example-shared-tests/detox-androidapp-variants.cjs b/apps/shared-tests/detox-androidapp-variants.cjs
similarity index 100%
rename from apps/brownfield-example-shared-tests/detox-androidapp-variants.cjs
rename to apps/shared-tests/detox-androidapp-variants.cjs
diff --git a/apps/brownfield-example-shared-tests/detox-appleapp-variants.cjs b/apps/shared-tests/detox-appleapp-variants.cjs
similarity index 100%
rename from apps/brownfield-example-shared-tests/detox-appleapp-variants.cjs
rename to apps/shared-tests/detox-appleapp-variants.cjs
diff --git a/apps/brownfield-example-shared-tests/detox-artifacts-config.cjs b/apps/shared-tests/detox-artifacts-config.cjs
similarity index 100%
rename from apps/brownfield-example-shared-tests/detox-artifacts-config.cjs
rename to apps/shared-tests/detox-artifacts-config.cjs
diff --git a/apps/brownfield-example-shared-tests/detox-ios-simulator-device.cjs b/apps/shared-tests/detox-ios-simulator-device.cjs
similarity index 100%
rename from apps/brownfield-example-shared-tests/detox-ios-simulator-device.cjs
rename to apps/shared-tests/detox-ios-simulator-device.cjs
diff --git a/apps/brownfield-example-shared-tests/detox-ios-simulator-device.test.cjs b/apps/shared-tests/detox-ios-simulator-device.test.cjs
similarity index 100%
rename from apps/brownfield-example-shared-tests/detox-ios-simulator-device.test.cjs
rename to apps/shared-tests/detox-ios-simulator-device.test.cjs
diff --git a/apps/brownfield-example-shared-tests/detox-rc-androidapp-emulator-release.cjs b/apps/shared-tests/detox-rc-androidapp-emulator-release.cjs
similarity index 100%
rename from apps/brownfield-example-shared-tests/detox-rc-androidapp-emulator-release.cjs
rename to apps/shared-tests/detox-rc-androidapp-emulator-release.cjs
diff --git a/apps/brownfield-example-shared-tests/detox-rc-androidapp-emulator-release.test.cjs b/apps/shared-tests/detox-rc-androidapp-emulator-release.test.cjs
similarity index 100%
rename from apps/brownfield-example-shared-tests/detox-rc-androidapp-emulator-release.test.cjs
rename to apps/shared-tests/detox-rc-androidapp-emulator-release.test.cjs
diff --git a/apps/brownfield-example-shared-tests/detox-rc-appleapp-ios-sim-debug.cjs b/apps/shared-tests/detox-rc-appleapp-ios-sim-debug.cjs
similarity index 100%
rename from apps/brownfield-example-shared-tests/detox-rc-appleapp-ios-sim-debug.cjs
rename to apps/shared-tests/detox-rc-appleapp-ios-sim-debug.cjs
diff --git a/apps/brownfield-example-shared-tests/detox-rc-ios-sim-debug.cjs b/apps/shared-tests/detox-rc-ios-sim-debug.cjs
similarity index 100%
rename from apps/brownfield-example-shared-tests/detox-rc-ios-sim-debug.cjs
rename to apps/shared-tests/detox-rc-ios-sim-debug.cjs
diff --git a/apps/brownfield-example-shared-tests/e2e/androidAppBrownfield.e2e.js b/apps/shared-tests/e2e/androidAppBrownfield.e2e.js
similarity index 88%
rename from apps/brownfield-example-shared-tests/e2e/androidAppBrownfield.e2e.js
rename to apps/shared-tests/e2e/androidAppBrownfield.e2e.js
index a87617881..9e22c1be3 100644
--- a/apps/brownfield-example-shared-tests/e2e/androidAppBrownfield.e2e.js
+++ b/apps/shared-tests/e2e/androidAppBrownfield.e2e.js
@@ -1,16 +1,16 @@
 const { element, by, expect: detoxExpect } = require('detox');
-const { brownfieldE2ETestIds: ids } = require('@callstack/brownfield-example-shared-tests/e2e/e2eTestIds');
+const { brownfieldE2ETestIds: ids } = require('@callstack/shared-tests/e2e/e2eTestIds');
 const {
   assertDetoxTextEventually,
   assertDetoxTextMatches,
   launchBrownfieldAppForDetox,
   pollUntilUiAutomatorContains,
-} = require('@callstack/brownfield-example-shared-tests/e2e/detoxUtils');
+} = require('@callstack/shared-tests/e2e/detoxUtils');
 const {
   openReactNativeVanilla,
   tapAndWaitForNativeScreen,
   waitForAndroidAppReadyVanilla,
-} = require('@callstack/brownfield-example-shared-tests/e2e/androidAppDetoxUtils');
+} = require('@callstack/shared-tests/e2e/androidAppDetoxUtils');
 
 describe('Brownfield (AndroidApp — Vanilla)', () => {
   beforeEach(async () => {
diff --git a/apps/brownfield-example-shared-tests/e2e/androidAppDetoxUtils.cjs b/apps/shared-tests/e2e/androidAppDetoxUtils.cjs
similarity index 97%
rename from apps/brownfield-example-shared-tests/e2e/androidAppDetoxUtils.cjs
rename to apps/shared-tests/e2e/androidAppDetoxUtils.cjs
index 3f424d854..57c91a1a1 100644
--- a/apps/brownfield-example-shared-tests/e2e/androidAppDetoxUtils.cjs
+++ b/apps/shared-tests/e2e/androidAppDetoxUtils.cjs
@@ -1,5 +1,5 @@
 const { device, element, by } = require('detox');
-const { brownfieldE2ETestIds: ids } = require('@callstack/brownfield-example-shared-tests/e2e/e2eTestIds');
+const { brownfieldE2ETestIds: ids } = require('@callstack/shared-tests/e2e/e2eTestIds');
 const {
   assertDetoxTextMatches,
   dismissAndroidSystemOverlays,
@@ -9,7 +9,7 @@ const {
   tapUiAutomatorTarget,
   waitForVisible,
   waitForNativeOverlayVisible,
-} = require('@callstack/brownfield-example-shared-tests/e2e/detoxUtils');
+} = require('@callstack/shared-tests/e2e/detoxUtils');
 
 /** Matches Expo 56 / 57 native shell greeting (`Hello native Android (Expo N)`). */
 const EXPO_ANDROID_GREETING_NEEDLES = [
diff --git a/apps/brownfield-example-shared-tests/e2e/androidAppExpoBrownfield.e2e.js b/apps/shared-tests/e2e/androidAppExpoBrownfield.e2e.js
similarity index 87%
rename from apps/brownfield-example-shared-tests/e2e/androidAppExpoBrownfield.e2e.js
rename to apps/shared-tests/e2e/androidAppExpoBrownfield.e2e.js
index 3e27af2c5..6214e69b6 100644
--- a/apps/brownfield-example-shared-tests/e2e/androidAppExpoBrownfield.e2e.js
+++ b/apps/shared-tests/e2e/androidAppExpoBrownfield.e2e.js
@@ -1,20 +1,20 @@
 const { element, by, expect: detoxExpect, waitFor } = require('detox');
 const {
   brownfieldE2ETestIds: ids,
-} = require('@callstack/brownfield-example-shared-tests/e2e/e2eTestIds');
+} = require('@callstack/shared-tests/e2e/e2eTestIds');
 const {
   assertDetoxTextMatches,
   dismissAndroidSystemOverlays,
   launchBrownfieldAppForDetox,
   pollUntilUiAutomatorContainsAny,
-} = require('@callstack/brownfield-example-shared-tests/e2e/detoxUtils');
+} = require('@callstack/shared-tests/e2e/detoxUtils');
 const {
   openReactNativeExpo,
   waitForAndroidAppReadyExpo,
   openPostMessageTabExpo,
   tapSendMessageToNativeExpo,
   EXPO_ANDROID_GREETING_NEEDLES,
-} = require('@callstack/brownfield-example-shared-tests/e2e/androidAppDetoxUtils');
+} = require('@callstack/shared-tests/e2e/androidAppDetoxUtils');
 
 describe('Brownfield (AndroidApp — Expo)', () => {
   beforeAll(async () => {
diff --git a/apps/brownfield-example-shared-tests/e2e/appleAppBrownfield.e2e.js b/apps/shared-tests/e2e/appleAppBrownfield.e2e.js
similarity index 89%
rename from apps/brownfield-example-shared-tests/e2e/appleAppBrownfield.e2e.js
rename to apps/shared-tests/e2e/appleAppBrownfield.e2e.js
index 71c8e6761..c535539b3 100644
--- a/apps/brownfield-example-shared-tests/e2e/appleAppBrownfield.e2e.js
+++ b/apps/shared-tests/e2e/appleAppBrownfield.e2e.js
@@ -1,17 +1,17 @@
 const { element, by, expect: detoxExpect } = require('detox');
 const {
   brownfieldE2ETestIds: ids,
-} = require('@callstack/brownfield-example-shared-tests/e2e/e2eTestIds');
+} = require('@callstack/shared-tests/e2e/e2eTestIds');
 const {
   assertDetoxTextMatches,
   launchBrownfieldAppForDetox,
   waitForNativeOverlayVisible,
-} = require('@callstack/brownfield-example-shared-tests/e2e/detoxUtils');
+} = require('@callstack/shared-tests/e2e/detoxUtils');
 const {
   openReactNativeVanilla,
   waitForAppleAppReady,
   sendPostMessageToNativeAndWaitForToast,
-} = require('@callstack/brownfield-example-shared-tests/e2e/appleAppDetoxUtils');
+} = require('@callstack/shared-tests/e2e/appleAppDetoxUtils');
 
 describe('Brownfield (AppleApp — Vanilla)', () => {
   beforeEach(async () => {
diff --git a/apps/brownfield-example-shared-tests/e2e/appleAppDetoxUtils.cjs b/apps/shared-tests/e2e/appleAppDetoxUtils.cjs
similarity index 97%
rename from apps/brownfield-example-shared-tests/e2e/appleAppDetoxUtils.cjs
rename to apps/shared-tests/e2e/appleAppDetoxUtils.cjs
index b2f72b75f..62ad77db4 100644
--- a/apps/brownfield-example-shared-tests/e2e/appleAppDetoxUtils.cjs
+++ b/apps/shared-tests/e2e/appleAppDetoxUtils.cjs
@@ -1,13 +1,13 @@
 const { device, element, by, expect: detoxExpect } = require('detox');
 const {
   brownfieldE2ETestIds: ids,
-} = require('@callstack/brownfield-example-shared-tests/e2e/e2eTestIds');
+} = require('@callstack/shared-tests/e2e/e2eTestIds');
 const { DETOX_TIMING } = require('./detoxTiming.cjs');
 const {
   detoxLaunchArgs,
   waitForVisible,
   waitForNativeOverlayVisible,
-} = require('@callstack/brownfield-example-shared-tests/e2e/detoxUtils');
+} = require('@callstack/shared-tests/e2e/detoxUtils');
 
 const EXPO_HOME_TAB_MATCHERS = [by.id(ids.expoHomeTab), by.label('Home')];
 const EXPO_POST_MESSAGE_TAB_MATCHERS = [
diff --git a/apps/brownfield-example-shared-tests/e2e/appleAppExpoBrownfield.e2e.js b/apps/shared-tests/e2e/appleAppExpoBrownfield.e2e.js
similarity index 87%
rename from apps/brownfield-example-shared-tests/e2e/appleAppExpoBrownfield.e2e.js
rename to apps/shared-tests/e2e/appleAppExpoBrownfield.e2e.js
index f02bc7dfd..28a828b53 100644
--- a/apps/brownfield-example-shared-tests/e2e/appleAppExpoBrownfield.e2e.js
+++ b/apps/shared-tests/e2e/appleAppExpoBrownfield.e2e.js
@@ -1,17 +1,17 @@
 const { device, element, by, expect: detoxExpect } = require('detox');
 const {
   brownfieldE2ETestIds: ids,
-} = require('@callstack/brownfield-example-shared-tests/e2e/e2eTestIds');
+} = require('@callstack/shared-tests/e2e/e2eTestIds');
 const {
   assertDetoxTextMatches,
   launchBrownfieldAppForDetox,
-} = require('@callstack/brownfield-example-shared-tests/e2e/detoxUtils');
+} = require('@callstack/shared-tests/e2e/detoxUtils');
 const {
   waitForAppleAppReady,
   openHomeTabExpo,
   openPostMessageTabExpo,
   sendPostMessageToNativeAndWaitForToast,
-} = require('@callstack/brownfield-example-shared-tests/e2e/appleAppDetoxUtils');
+} = require('@callstack/shared-tests/e2e/appleAppDetoxUtils');
 
 describe('Brownfield (AppleApp — Expo)', () => {
   beforeEach(async () => {
diff --git a/apps/brownfield-example-shared-tests/e2e/createDetoxJestConfig.cjs b/apps/shared-tests/e2e/createDetoxJestConfig.cjs
similarity index 81%
rename from apps/brownfield-example-shared-tests/e2e/createDetoxJestConfig.cjs
rename to apps/shared-tests/e2e/createDetoxJestConfig.cjs
index 9864d939f..9d8985e26 100644
--- a/apps/brownfield-example-shared-tests/e2e/createDetoxJestConfig.cjs
+++ b/apps/shared-tests/e2e/createDetoxJestConfig.cjs
@@ -10,16 +10,13 @@ const { DETOX_TIMING } = require('./detoxTiming.cjs');
  */
 function createDetoxJestConfig({ e2eDir, testMatch, testTimeout }) {
   const appRoot = path.join(e2eDir, '..');
-  const sharedTestsRoot = path.join(
-    e2eDir,
-    '../../brownfield-example-shared-tests'
-  );
+  const sharedTestsRoot = path.join(e2eDir, '../../shared-tests');
 
   return {
     maxWorkers: 1,
     rootDir: appRoot,
     roots: [appRoot, sharedTestsRoot],
-    // Shared E2E files live under brownfield-example-shared-tests; resolve host-app deps (detox) from here.
+    // Shared E2E files live under shared-tests; resolve host-app deps (detox) from here.
     modulePaths: [path.join(appRoot, 'node_modules')],
     testTimeout: testTimeout ?? DETOX_TIMING.TEST_TIMEOUT_MS,
     verbose: true,
diff --git a/apps/brownfield-example-shared-tests/e2e/detoxTiming.cjs b/apps/shared-tests/e2e/detoxTiming.cjs
similarity index 100%
rename from apps/brownfield-example-shared-tests/e2e/detoxTiming.cjs
rename to apps/shared-tests/e2e/detoxTiming.cjs
diff --git a/apps/brownfield-example-shared-tests/e2e/detoxUtils.cjs b/apps/shared-tests/e2e/detoxUtils.cjs
similarity index 100%
rename from apps/brownfield-example-shared-tests/e2e/detoxUtils.cjs
rename to apps/shared-tests/e2e/detoxUtils.cjs
diff --git a/apps/brownfield-example-shared-tests/e2e/e2eTestIds.cjs b/apps/shared-tests/e2e/e2eTestIds.cjs
similarity index 90%
rename from apps/brownfield-example-shared-tests/e2e/e2eTestIds.cjs
rename to apps/shared-tests/e2e/e2eTestIds.cjs
index dbbc9c15f..61696cba4 100644
--- a/apps/brownfield-example-shared-tests/e2e/e2eTestIds.cjs
+++ b/apps/shared-tests/e2e/e2eTestIds.cjs
@@ -1,6 +1,6 @@
 'use strict';
 
-// Detox E2E (CJS). Keep in sync with ../src/e2eTestIds.ts and native E2eTestIds (Swift/Kotlin).
+// Detox E2E (CJS). Keep in sync with ../../shared-runtime/src/e2eTestIds.ts and native E2eTestIds (Swift/Kotlin).
 const brownfieldE2ETestIds = {
   rnAppHome: 'brownfield-e2e-rnapp-home',
   rnAppHomeTitle: 'brownfield-e2e-rnapp-home-title',
diff --git a/apps/brownfield-example-shared-tests/e2e/expoPostMessageBrownfield.e2e.js b/apps/shared-tests/e2e/expoPostMessageBrownfield.e2e.js
similarity index 89%
rename from apps/brownfield-example-shared-tests/e2e/expoPostMessageBrownfield.e2e.js
rename to apps/shared-tests/e2e/expoPostMessageBrownfield.e2e.js
index 180923300..d02da18f2 100644
--- a/apps/brownfield-example-shared-tests/e2e/expoPostMessageBrownfield.e2e.js
+++ b/apps/shared-tests/e2e/expoPostMessageBrownfield.e2e.js
@@ -1,12 +1,12 @@
 const { device, element, by, expect: detoxExpect } = require('detox');
 const {
   brownfieldE2ETestIds: ids,
-} = require('@callstack/brownfield-example-shared-tests/e2e/e2eTestIds');
+} = require('@callstack/shared-tests/e2e/e2eTestIds');
 const {
   assertDetoxTextMatches,
   launchBrownfieldAppForDetox,
   waitForVisible,
-} = require('@callstack/brownfield-example-shared-tests/e2e/detoxUtils');
+} = require('@callstack/shared-tests/e2e/detoxUtils');
 
 async function openPostMessageTab() {
   await device.disableSynchronization();
diff --git a/apps/brownfield-example-shared-tests/e2e/rnAppBrownfield.e2e.js b/apps/shared-tests/e2e/rnAppBrownfield.e2e.js
similarity index 92%
rename from apps/brownfield-example-shared-tests/e2e/rnAppBrownfield.e2e.js
rename to apps/shared-tests/e2e/rnAppBrownfield.e2e.js
index 29249167c..5e311643c 100644
--- a/apps/brownfield-example-shared-tests/e2e/rnAppBrownfield.e2e.js
+++ b/apps/shared-tests/e2e/rnAppBrownfield.e2e.js
@@ -1,12 +1,12 @@
 const { device, element, by, expect: detoxExpect } = require('detox');
 const {
   brownfieldE2ETestIds: ids,
-} = require('@callstack/brownfield-example-shared-tests/e2e/e2eTestIds');
+} = require('@callstack/shared-tests/e2e/e2eTestIds');
 const {
   assertDetoxTextMatches,
   launchBrownfieldAppForDetox,
   waitForVisible,
-} = require('@callstack/brownfield-example-shared-tests/e2e/detoxUtils');
+} = require('@callstack/shared-tests/e2e/detoxUtils');
 
 describe('Brownfield (RNApp)', () => {
   beforeAll(async () => {
diff --git a/apps/shared-tests/e2eTestIds.test.cjs b/apps/shared-tests/e2eTestIds.test.cjs
new file mode 100644
index 000000000..82f5756c3
--- /dev/null
+++ b/apps/shared-tests/e2eTestIds.test.cjs
@@ -0,0 +1,8 @@
+const assert = require('node:assert/strict');
+const test = require('node:test');
+const { brownfieldE2ETestIds } = require('./e2e/e2eTestIds.cjs');
+
+test('Detox identifiers match the identifiers bundled in the demo apps', async () => {
+  const runtime = await import('../shared-runtime/src/e2eTestIds.ts');
+  assert.deepEqual(brownfieldE2ETestIds, runtime.brownfieldE2ETestIds);
+});
diff --git a/apps/brownfield-example-shared-tests/jest/expo-config.js b/apps/shared-tests/jest/expo-config.js
similarity index 85%
rename from apps/brownfield-example-shared-tests/jest/expo-config.js
rename to apps/shared-tests/jest/expo-config.js
index a556274d6..5b7f28f36 100644
--- a/apps/brownfield-example-shared-tests/jest/expo-config.js
+++ b/apps/shared-tests/jest/expo-config.js
@@ -6,6 +6,8 @@ function createExpoJestConfig({ appRootDir, moduleNameMapper = {} }) {
 
   return {
     preset: 'jest-expo',
+    // Shared source uses the consuming app's dependency versions.
+    modulePaths: [path.join(appRootDir, 'node_modules')],
     setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
     moduleNameMapper: {
       '^react$': appRequire.resolve('react'),
@@ -30,7 +32,7 @@ function createExpoJestConfig({ appRootDir, moduleNameMapper = {} }) {
       ),
     },
     transformIgnorePatterns: [
-      '/node_modules/(?!(.pnpm|react-native|@react-native|@react-native-community|expo|@expo|@expo-google-fonts|react-navigation|@react-navigation|@sentry/react-native|native-base|@callstack/brownfield-example-shared-tests))',
+      '/node_modules/(?!(.pnpm|react-native|@react-native|@react-native-community|expo|@expo|@expo-google-fonts|react-navigation|@react-navigation|@sentry/react-native|native-base|@callstack/shared-tests|@callstack/shared-runtime))',
     ],
   };
 }
diff --git a/apps/brownfield-example-shared-tests/jest/setup.js b/apps/shared-tests/jest/setup.js
similarity index 100%
rename from apps/brownfield-example-shared-tests/jest/setup.js
rename to apps/shared-tests/jest/setup.js
diff --git a/apps/brownfield-example-shared-tests/package.json b/apps/shared-tests/package.json
similarity index 89%
rename from apps/brownfield-example-shared-tests/package.json
rename to apps/shared-tests/package.json
index a66feba1b..23040b343 100644
--- a/apps/brownfield-example-shared-tests/package.json
+++ b/apps/shared-tests/package.json
@@ -1,17 +1,15 @@
 {
-  "name": "@callstack/brownfield-example-shared-tests",
+  "name": "@callstack/shared-tests",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "test": "node --test ./*.test.cjs"
+    "test": "node --experimental-strip-types --no-warnings --test ./*.test.cjs"
   },
   "main": "src/index.ts",
   "types": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./runtime": "./src/runtime.ts",
     "./jest/setup": "./jest/setup.js",
-    "./e2eTestIds": "./src/e2eTestIds.ts",
     "./e2e/e2eTestIds": "./e2e/e2eTestIds.cjs",
     "./e2e/detoxUtils": "./e2e/detoxUtils.cjs",
     "./e2e/appleAppDetoxUtils": "./e2e/appleAppDetoxUtils.cjs",
@@ -36,6 +34,7 @@
     "@babel/runtime": "^7.25.0",
     "@callstack/brownfield-navigation": "workspace:^",
     "@callstack/react-native-brownfield": "workspace:^",
+    "@callstack/shared-runtime": "workspace:^",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.1.1",
diff --git a/apps/brownfield-example-shared-tests/scripts/prepare-android-emulator-for-detox.sh b/apps/shared-tests/scripts/prepare-android-emulator-for-detox.sh
similarity index 100%
rename from apps/brownfield-example-shared-tests/scripts/prepare-android-emulator-for-detox.sh
rename to apps/shared-tests/scripts/prepare-android-emulator-for-detox.sh
diff --git a/apps/brownfield-example-shared-tests/scripts/run-with-android-logcat.sh b/apps/shared-tests/scripts/run-with-android-logcat.sh
similarity index 100%
rename from apps/brownfield-example-shared-tests/scripts/run-with-android-logcat.sh
rename to apps/shared-tests/scripts/run-with-android-logcat.sh
diff --git a/apps/brownfield-example-shared-tests/src/global.d.ts b/apps/shared-tests/src/global.d.ts
similarity index 100%
rename from apps/brownfield-example-shared-tests/src/global.d.ts
rename to apps/shared-tests/src/global.d.ts
diff --git a/apps/brownfield-example-shared-tests/src/index.ts b/apps/shared-tests/src/index.ts
similarity index 67%
rename from apps/brownfield-example-shared-tests/src/index.ts
rename to apps/shared-tests/src/index.ts
index 632194374..64bb8d8f9 100644
--- a/apps/brownfield-example-shared-tests/src/index.ts
+++ b/apps/shared-tests/src/index.ts
@@ -3,10 +3,3 @@ export { runCounterSuite } from './suites/counter.suite';
 export { runExpoRnAppSuite } from './suites/expoRnApp.suite';
 export { runHomeScreenSuite } from './suites/homeScreen.suite';
 export { runUserAlertSuite } from './suites/userAlert.suite';
-export {
-  isBrownfieldE2EMode,
-  setBrownfieldE2EMode,
-  syncBrownfieldE2EModeFromRootProps,
-  userAlert,
-  type BrownfieldRootProps,
-} from './runtime';
diff --git a/apps/brownfield-example-shared-tests/src/suites/counter.suite.tsx b/apps/shared-tests/src/suites/counter.suite.tsx
similarity index 100%
rename from apps/brownfield-example-shared-tests/src/suites/counter.suite.tsx
rename to apps/shared-tests/src/suites/counter.suite.tsx
diff --git a/apps/brownfield-example-shared-tests/src/suites/expoRnApp.suite.tsx b/apps/shared-tests/src/suites/expoRnApp.suite.tsx
similarity index 59%
rename from apps/brownfield-example-shared-tests/src/suites/expoRnApp.suite.tsx
rename to apps/shared-tests/src/suites/expoRnApp.suite.tsx
index e98bc342c..97848c687 100644
--- a/apps/brownfield-example-shared-tests/src/suites/expoRnApp.suite.tsx
+++ b/apps/shared-tests/src/suites/expoRnApp.suite.tsx
@@ -1,6 +1,7 @@
-import type { BrownfieldRootProps } from '../userAlert';
+import type { BrownfieldRootProps } from '@callstack/shared-runtime';
 import type { ComponentType } from 'react';
 import { render, fireEvent, screen } from '@testing-library/react-native';
+import ReactNativeBrownfield from '@callstack/react-native-brownfield';
 import BrownfieldNavigation from '@callstack/brownfield-navigation';
 
 type RNAppProps = BrownfieldRootProps;
@@ -12,18 +13,18 @@ function resetBrownieExampleStore() {
   g.__resetBrownieExampleStore?.();
 }
 
-const brownfieldNavigation =
-  BrownfieldNavigation as unknown as {
-    navigateToSettings: jest.Mock;
-    navigateToReferrals: jest.Mock;
-  };
+const brownfieldNavigation = BrownfieldNavigation as unknown as {
+  navigateToSettings: jest.Mock;
+  navigateToReferrals: jest.Mock;
+};
 
 /**
  * Root RN surface used by Expo brownfield examples (navigation + counter).
  */
 export function runExpoRnAppSuite(
   appLabel: string,
-  RNApp: ComponentType<RNAppProps>
+  RNApp: ComponentType<RNAppProps>,
+  sdkVersion: number
 ) {
   describe(`Expo RNApp — ${appLabel}`, () => {
     beforeEach(() => {
@@ -35,7 +36,12 @@ export function runExpoRnAppSuite(
       render(<RNApp />);
 
       fireEvent.press(screen.getByText('Navigate to Settings'));
-      expect(brownfieldNavigation.navigateToSettings).toHaveBeenCalled();
+      expect(brownfieldNavigation.navigateToSettings).toHaveBeenCalledWith({
+        id: 'expo-user-123',
+        name: 'Expo User',
+        flags: [`expo${sdkVersion}`],
+        ids: ['expo-user-123'],
+      });
 
       fireEvent.press(screen.getByText('Navigate to Referrals'));
       expect(brownfieldNavigation.navigateToReferrals).toHaveBeenCalledWith(
@@ -43,6 +49,18 @@ export function runExpoRnAppSuite(
       );
     });
 
+    it('preserves the SDK-specific native action', () => {
+      render(<RNApp />);
+      const button = screen.queryByText('Pop To Native');
+      if (sdkVersion === 57) {
+        expect(button).toBeTruthy();
+        fireEvent.press(button!);
+        expect(ReactNativeBrownfield.popToNative).toHaveBeenCalledWith(true);
+      } else {
+        expect(button).toBeNull();
+      }
+    });
+
     it('renders the native OS version label when provided', () => {
       render(<RNApp nativeOsVersionLabel="iOS 18" />);
 
diff --git a/apps/brownfield-example-shared-tests/src/suites/homeScreen.suite.tsx b/apps/shared-tests/src/suites/homeScreen.suite.tsx
similarity index 96%
rename from apps/brownfield-example-shared-tests/src/suites/homeScreen.suite.tsx
rename to apps/shared-tests/src/suites/homeScreen.suite.tsx
index 6390dae97..c1735f6a4 100644
--- a/apps/brownfield-example-shared-tests/src/suites/homeScreen.suite.tsx
+++ b/apps/shared-tests/src/suites/homeScreen.suite.tsx
@@ -20,11 +20,10 @@ function resetBrownieExampleStore() {
   g.__resetBrownieExampleStore?.();
 }
 
-const brownfieldNavigation =
-  BrownfieldNavigation as unknown as {
-    navigateToSettings: jest.Mock;
-    navigateToReferrals: jest.Mock;
-  };
+const brownfieldNavigation = BrownfieldNavigation as unknown as {
+  navigateToSettings: jest.Mock;
+  navigateToReferrals: jest.Mock;
+};
 
 /**
  * Home screen in the plain RN example: postMessage, back gesture, popToNative, brownfield navigation.
diff --git a/apps/brownfield-example-shared-tests/src/suites/postMessageTab.suite.tsx b/apps/shared-tests/src/suites/postMessageTab.suite.tsx
similarity index 100%
rename from apps/brownfield-example-shared-tests/src/suites/postMessageTab.suite.tsx
rename to apps/shared-tests/src/suites/postMessageTab.suite.tsx
diff --git a/apps/brownfield-example-shared-tests/src/suites/userAlert.suite.ts b/apps/shared-tests/src/suites/userAlert.suite.ts
similarity index 92%
rename from apps/brownfield-example-shared-tests/src/suites/userAlert.suite.ts
rename to apps/shared-tests/src/suites/userAlert.suite.ts
index d5672f32b..52b3af5d7 100644
--- a/apps/brownfield-example-shared-tests/src/suites/userAlert.suite.ts
+++ b/apps/shared-tests/src/suites/userAlert.suite.ts
@@ -1,5 +1,5 @@
 import { Alert } from 'react-native';
-import { setBrownfieldE2EMode, userAlert } from '../userAlert';
+import { setBrownfieldE2EMode, userAlert } from '@callstack/shared-runtime';
 
 export function runUserAlertSuite(appLabel: string) {
   describe(`userAlert - ${appLabel}`, () => {
diff --git a/apps/brownfield-example-shared-tests/tsconfig.json b/apps/shared-tests/tsconfig.json
similarity index 100%
rename from apps/brownfield-example-shared-tests/tsconfig.json
rename to apps/shared-tests/tsconfig.json
diff --git a/scripts/ci-local-androidapp-android-e2e.sh b/scripts/ci-local-androidapp-android-e2e.sh
index 0ca43acff..eca4cc893 100755
--- a/scripts/ci-local-androidapp-android-e2e.sh
+++ b/scripts/ci-local-androidapp-android-e2e.sh
@@ -61,7 +61,7 @@ const {
   getAndroidEmulatorAvdName,
   getRunningEmulatorAvdName,
   listAvdNames,
-} = require('${REPO_ROOT}/apps/brownfield-example-shared-tests/detox-android-emulator-device.cjs');
+} = require('${REPO_ROOT}/apps/shared-tests/detox-android-emulator-device.cjs');
 
 const expected = getAndroidEmulatorAvdName();
 const running = getRunningEmulatorAvdName();
@@ -82,7 +82,7 @@ start_detox_emulator() {
 
   echo "==> Starting emulator: ${avd}"
   nohup emulator -avd "${avd}" -no-boot-anim -no-snapshot-load >/tmp/detox-emulator.log 2>&1 &
-  bash "${REPO_ROOT}/apps/brownfield-example-shared-tests/scripts/prepare-android-emulator-for-detox.sh"
+  bash "${REPO_ROOT}/apps/shared-tests/scripts/prepare-android-emulator-for-detox.sh"
 }
 
 ensure_android_emulator() {
@@ -114,7 +114,7 @@ ensure_android_emulator() {
 
 resolve_variant() {
   node <<NODE
-const { getAndroidAppDetoxVariant } = require('${REPO_ROOT}/apps/brownfield-example-shared-tests/detox-androidapp-variants.cjs');
+const { getAndroidAppDetoxVariant } = require('${REPO_ROOT}/apps/shared-tests/detox-androidapp-variants.cjs');
 const variant = getAndroidAppDetoxVariant('${VARIANT}');
 console.log([
   variant.rnAppDir,
@@ -184,7 +184,7 @@ if [[ "${BUILD_ONLY}" == "false" ]]; then
   ensure_android_emulator
 
   echo "==> Prepare Android emulator for Detox"
-  bash "${REPO_ROOT}/apps/brownfield-example-shared-tests/scripts/prepare-android-emulator-for-detox.sh"
+  bash "${REPO_ROOT}/apps/shared-tests/scripts/prepare-android-emulator-for-detox.sh"
 
   echo "==> Detox test (AndroidApp ${VARIANT}, emulator — Metro not required)"
   (cd "${ANDROID_APP_PATH}" && yarn "${E2E_TEST_SCRIPT}")
diff --git a/scripts/ci-local-appleapp-ios-e2e.sh b/scripts/ci-local-appleapp-ios-e2e.sh
index abf30a11f..a0dfbbc25 100755
--- a/scripts/ci-local-appleapp-ios-e2e.sh
+++ b/scripts/ci-local-appleapp-ios-e2e.sh
@@ -47,7 +47,7 @@ ci_local_e2e_require_macos
 
 resolve_variant() {
   node <<NODE
-const { getAppleAppDetoxVariant } = require('${REPO_ROOT}/apps/brownfield-example-shared-tests/detox-appleapp-variants.cjs');
+const { getAppleAppDetoxVariant } = require('${REPO_ROOT}/apps/shared-tests/detox-appleapp-variants.cjs');
 const variant = getAppleAppDetoxVariant('${VARIANT}');
 console.log([
   variant.xcframeworkApp,
diff --git a/yarn.lock b/yarn.lock
index 79c14bdc0..ce7777096 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1873,7 +1873,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@callstack/brownfield-example-android-app@workspace:apps/AndroidApp"
   dependencies:
-    "@callstack/brownfield-example-shared-tests": "workspace:^"
+    "@callstack/shared-tests": "workspace:^"
     detox: "npm:^20.27.0"
     jest: "npm:^29.7.0"
   languageName: unknown
@@ -1883,11 +1883,16 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@callstack/brownfield-example-expo-app-57@workspace:apps/ExpoApp57"
   dependencies:
-    "@callstack/brownfield-example-shared-tests": "workspace:^"
+    "@babel/core": "npm:^7.29.6"
     "@callstack/brownfield-navigation": "workspace:^"
     "@callstack/brownie": "workspace:^"
     "@callstack/react-native-brownfield": "workspace:^"
+    "@callstack/shared-runtime": "workspace:^"
+    "@callstack/shared-tests": "workspace:^"
     "@expo/ui": "npm:~57.0.1"
+    "@react-native/jest-preset": "npm:0.86.0"
+    "@testing-library/react-native": "npm:^13.3.3"
+    "@types/jest": "npm:29.5.14"
     "@types/react": "npm:~19.2.2"
     eslint: "npm:~9.25.0"
     eslint-config-expo: "npm:~57.0.0"
@@ -1905,6 +1910,8 @@ __metadata:
     expo-system-ui: "npm:~57.0.0"
     expo-updates: "npm:^57.0.6"
     expo-web-browser: "npm:~57.0.0"
+    jest: "npm:^29.7.0"
+    jest-expo: "npm:~57.0.1"
     lottie-react-native: "npm:~7.3.8"
     react: "npm:19.2.3"
     react-dom: "npm:19.2.3"
@@ -1915,6 +1922,7 @@ __metadata:
     react-native-screens: "npm:4.25.2"
     react-native-web: "npm:~0.21.0"
     react-native-worklets: "npm:0.10.0"
+    react-test-renderer: "npm:19.2.3"
     typescript: "npm:~6.0.3"
   languageName: unknown
   linkType: soft
@@ -1924,10 +1932,11 @@ __metadata:
   resolution: "@callstack/brownfield-example-expo-app-58@workspace:apps/ExpoApp58"
   dependencies:
     "@babel/core": "npm:^7.29.6"
-    "@callstack/brownfield-example-shared-tests": "workspace:^"
     "@callstack/brownfield-navigation": "workspace:^"
     "@callstack/brownie": "workspace:^"
     "@callstack/react-native-brownfield": "workspace:^"
+    "@callstack/shared-runtime": "workspace:^"
+    "@callstack/shared-tests": "workspace:^"
     "@react-native/jest-preset": "npm:0.88.0-rc.1"
     "@react-native/metro-config": "npm:0.88.0-rc.1"
     "@testing-library/react-native": "npm:^13.3.3"
@@ -1970,7 +1979,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@callstack/brownfield-example-ios-app@workspace:apps/AppleApp"
   dependencies:
-    "@callstack/brownfield-example-shared-tests": "workspace:^"
+    "@callstack/shared-tests": "workspace:^"
     "@rock-js/tools": "npm:^0.13.5"
     detox: "npm:^20.27.0"
     jest: "npm:^29.7.0"
@@ -1984,10 +1993,11 @@ __metadata:
     "@babel/core": "npm:^7.29.6"
     "@babel/preset-env": "npm:^7.25.3"
     "@babel/runtime": "npm:^7.25.0"
-    "@callstack/brownfield-example-shared-tests": "workspace:^"
     "@callstack/brownfield-navigation": "workspace:^"
     "@callstack/brownie": "workspace:^"
     "@callstack/react-native-brownfield": "workspace:^"
+    "@callstack/shared-runtime": "workspace:^"
+    "@callstack/shared-tests": "workspace:^"
     "@react-native-community/cli": "npm:20.2.0"
     "@react-native-community/cli-platform-android": "npm:20.2.0"
     "@react-native-community/cli-platform-ios": "npm:20.2.0"
@@ -2016,25 +2026,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@callstack/brownfield-example-shared-tests@workspace:^, @callstack/brownfield-example-shared-tests@workspace:apps/brownfield-example-shared-tests":
-  version: 0.0.0-use.local
-  resolution: "@callstack/brownfield-example-shared-tests@workspace:apps/brownfield-example-shared-tests"
-  dependencies:
-    "@babel/runtime": "npm:^7.25.0"
-    "@callstack/brownfield-navigation": "workspace:^"
-    "@callstack/react-native-brownfield": "workspace:^"
-    "@testing-library/react-native": "npm:^13.3.3"
-    "@types/jest": "npm:^30.0.0"
-    "@types/react": "npm:^19.1.1"
-    typescript: "npm:5.9.3"
-  peerDependencies:
-    "@testing-library/react-native": ">=12"
-    react: ">=18"
-    react-native: ">=0.73"
-    react-test-renderer: ">=18"
-  languageName: unknown
-  linkType: soft
-
 "@callstack/brownfield-gradle-plugin-react@workspace:gradle-plugins/react":
   version: 0.0.0-use.local
   resolution: "@callstack/brownfield-gradle-plugin-react@workspace:gradle-plugins/react"
@@ -2201,6 +2192,74 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@callstack/shared-runtime@workspace:^, @callstack/shared-runtime@workspace:apps/shared-runtime":
+  version: 0.0.0-use.local
+  resolution: "@callstack/shared-runtime@workspace:apps/shared-runtime"
+  dependencies:
+    "@babel/runtime": "npm:^7.25.0"
+    "@callstack/brownfield-navigation": "workspace:^"
+    "@callstack/brownie": "workspace:^"
+    "@callstack/react-native-brownfield": "workspace:^"
+    "@types/react": "npm:^19.1.1"
+    eslint: "npm:^9.39.3"
+    typescript: "npm:5.9.3"
+  peerDependencies:
+    expo: "*"
+    expo-device: "*"
+    expo-image: "*"
+    expo-router: "*"
+    expo-symbols: "*"
+    expo-updates: "*"
+    expo-web-browser: "*"
+    react: ">=18"
+    react-native: ">=0.73"
+    react-native-reanimated: "*"
+    react-native-safe-area-context: "*"
+    react-native-worklets: "*"
+  peerDependenciesMeta:
+    expo:
+      optional: true
+    expo-device:
+      optional: true
+    expo-image:
+      optional: true
+    expo-router:
+      optional: true
+    expo-symbols:
+      optional: true
+    expo-updates:
+      optional: true
+    expo-web-browser:
+      optional: true
+    react-native-reanimated:
+      optional: true
+    react-native-safe-area-context:
+      optional: true
+    react-native-worklets:
+      optional: true
+  languageName: unknown
+  linkType: soft
+
+"@callstack/shared-tests@workspace:^, @callstack/shared-tests@workspace:apps/shared-tests":
+  version: 0.0.0-use.local
+  resolution: "@callstack/shared-tests@workspace:apps/shared-tests"
+  dependencies:
+    "@babel/runtime": "npm:^7.25.0"
+    "@callstack/brownfield-navigation": "workspace:^"
+    "@callstack/react-native-brownfield": "workspace:^"
+    "@callstack/shared-runtime": "workspace:^"
+    "@testing-library/react-native": "npm:^13.3.3"
+    "@types/jest": "npm:^30.0.0"
+    "@types/react": "npm:^19.1.1"
+    typescript: "npm:5.9.3"
+  peerDependencies:
+    "@testing-library/react-native": ">=12"
+    react: ">=18"
+    react-native: ">=0.73"
+    react-test-renderer: ">=18"
+  languageName: unknown
+  linkType: soft
+
 "@changesets/apply-release-plan@npm:^8.0.0":
   version: 8.0.0
   resolution: "@changesets/apply-release-plan@npm:8.0.0"
@@ -6202,6 +6261,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native/jest-preset@npm:0.86.0":
+  version: 0.86.0
+  resolution: "@react-native/jest-preset@npm:0.86.0"
+  dependencies:
+    "@jest/create-cache-key-function": "npm:^29.7.0"
+    "@react-native/js-polyfills": "npm:0.86.0"
+    babel-jest: "npm:^29.7.0"
+    jest-environment-node: "npm:^29.7.0"
+    regenerator-runtime: "npm:^0.13.2"
+  peerDependencies:
+    react: ^19.2.3
+  checksum: 10/4dbb2a000da21753203dbaa5dd37224add83463ee46be1ac120974a4b1dfd836cf91831921960699efcf4508eb191707fba3b2d38924367cd2d77635542c1620
+  languageName: node
+  linkType: hard
+
 "@react-native/jest-preset@npm:0.87.0":
   version: 0.87.0
   resolution: "@react-native/jest-preset@npm:0.87.0"
@@ -15070,6 +15144,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-expo@npm:~57.0.1":
+  version: 57.0.6
+  resolution: "jest-expo@npm:57.0.6"
+  dependencies:
+    "@jest/create-cache-key-function": "npm:^29.2.1"
+    "@jest/globals": "npm:^29.2.1"
+    babel-jest: "npm:^29.2.1"
+    jest-environment-jsdom: "npm:^29.2.1"
+    jest-snapshot: "npm:^29.2.1"
+    jest-watch-select-projects: "npm:^2.0.0"
+    jest-watch-typeahead: "npm:2.2.1"
+    json5: "npm:^2.2.3"
+    lodash: "npm:^4.17.19"
+    react-test-renderer: "npm:19.2.3"
+    server-only: "npm:^0.0.1"
+    stacktrace-js: "npm:^2.0.2"
+  peerDependencies:
+    "@react-native/jest-preset": ^0.86.3
+    expo: "*"
+    react-native: "*"
+    react-server-dom-webpack: ~19.0.4 || ~19.1.5 || ~19.2.4
+  peerDependenciesMeta:
+    expo:
+      optional: true
+    react-server-dom-webpack:
+      optional: true
+  bin:
+    jest: bin/jest.js
+  checksum: 10/502bb8ff46605e4991cd64752a95e864da567b86d27912e6e3cb1861b98baeee4d292bfc09b6687c1a1e0a48e7d798cebab4b071f1947bb697e067b1ff791844
+  languageName: node
+  linkType: hard
+
 "jest-expo@npm:~58.0.3":
   version: 58.0.3
   resolution: "jest-expo@npm:58.0.3"