feat: add expo managed tester app

Author: ceopaludetto

.changeset/full-nails-grin.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack-plugin-expo": minor
+---
+
+Add Expo Managed tester application

apps/tester-expo-app/.gitignore

@@ -0,0 +1,7 @@
+# Build artifacts
+.expo
+build
+
+# Native directories
+/android
+/ios

apps/tester-expo-app/app.json

@@ -0,0 +1,16 @@
+{
+  "name": "tester-expo-app",
+  "slug": "tester-expo-app",
+  "scheme": "testerexpoapp",
+  "version": "0.0.1",
+  "android": {
+    "package": "com.testerexpoapp"
+  },
+  "ios": {
+    "bundleIdentifier": "com.testerexpoapp"
+  },
+  "plugins": [
+    ["expo-router", { "root": "./src/screens" }],
+    "@callstack/repack-plugin-expo/plugin"
+  ]
+}

apps/tester-expo-app/index.js

@@ -0,0 +1,4 @@
+import { AppRegistry } from 'react-native';
+import Application from './src/App.tsx';
+
+AppRegistry.registerComponent('main', () => Application);

apps/tester-expo-app/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "tester-expo-app",
+  "version": "0.0.1",
+  "private": true,
+  "main": "./index.js",
+  "scripts": {
+    "start": "react-native start",
+    "ios": "react-native run-ios --no-packager",
+    "android": "react-native run-android --no-packager",
+    "prebuild": "expo prebuild"
+  },
+  "dependencies": {
+    "expo": "^53.0.22",
+    "expo-linking": "~7.1.7",
+    "expo-router": "~5.1.5",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.11.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@callstack/repack": "workspace:*",
+    "@callstack/repack-plugin-expo": "workspace:*",
+    "@react-native-community/cli": "catalog:testers",
+    "@react-native-community/cli-platform-android": "catalog:testers",
+    "@react-native-community/cli-platform-ios": "catalog:testers",
+    "@react-native/babel-preset": "catalog:testers",
+    "@react-native/typescript-config": "catalog:testers",
+    "@rspack/core": "catalog:",
+    "@swc/core": "^1.13.3",
+    "@swc/helpers": "catalog:",
+    "@types/react": "catalog:testers",
+    "react-native-test-app": "catalog:testers",
+    "typescript": "catalog:"
+  }
+}

apps/tester-expo-app/react-native.config.js

@@ -0,0 +1,17 @@
+const { configureProjects } = require('react-native-test-app');
+
+const useWebpack = Boolean(process.env.USE_WEBPACK);
+
+module.exports = {
+  project: configureProjects({
+    android: {
+      sourceDir: 'android',
+    },
+    ios: {
+      sourceDir: 'ios',
+    },
+  }),
+  commands: useWebpack
+    ? require('@callstack/repack/commands/webpack')
+    : require('@callstack/repack/commands/rspack'),
+};

apps/tester-expo-app/rspack.config.mjs

@@ -0,0 +1,46 @@
+import { createRequire } from 'node:module';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import * as Repack from '@callstack/repack';
+import { ExpoPlugin } from '@callstack/repack-plugin-expo';
+import { IgnorePlugin } from '@rspack/core';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const require = createRequire(import.meta.url);
+
+export default Repack.defineRspackConfig({
+  context: __dirname,
+  entry: './index.js',
+  resolve: {
+    ...Repack.getResolveOptions({ enablePackageExports: true }),
+    alias: {
+      // Alias both react and react-native to ensure that we don't end up with multiple versions
+      // of these libraries in the bundle.
+      //
+      // This is needed in these monorepo setups where there are multiple copies of react
+      // and react-native in the node_modules.
+      react: require.resolve('react'),
+      'react-native': require.resolve('react-native'),
+    },
+  },
+  module: {
+    rules: [
+      ...Repack.getJsTransformRules(),
+      ...Repack.getAssetTransformRules(),
+    ],
+  },
+  plugins: [
+    new Repack.RepackPlugin(),
+    new ExpoPlugin({
+      router: {
+        root: resolve('./src/screens'),
+      },
+    }),
+
+    // Ignore @react-native-masked-view warnings
+    new IgnorePlugin({ resourceRegExp: /^@react-native-masked-view/ }),
+  ],
+});

apps/tester-expo-app/src/App.tsx

@@ -0,0 +1,8 @@
+import { ExpoRoot } from 'expo-router';
+import { ctx } from 'expo-router/_ctx';
+
+console.log(ctx.keys());
+
+export default function Application() {
+  return <ExpoRoot context={ctx} />;
+}

apps/tester-expo-app/src/screens/_layout.tsx

@@ -0,0 +1,10 @@
+import { Stack } from 'expo-router';
+
+export default function RootLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerTitle: 'Home' }} />
+      <Stack.Screen name="about" options={{ headerTitle: 'About' }} />
+    </Stack>
+  );
+}

apps/tester-expo-app/src/screens/about.tsx

@@ -0,0 +1,18 @@
+import { useRouter } from 'expo-router';
+import { Button, ScrollView } from 'react-native';
+
+export default function AboutScreen() {
+  const router = useRouter();
+
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Button title="Go back" onPress={router.back} />
+    </ScrollView>
+  );
+}