I am re-writing our react-native App in new Arch using turborepo for code sharing as the previous version had a lot of issues. What I am trying to do is have following workspaces

__
  | apps
  |  |__ App1
  |  |__ App2
  |
  | packages
     |__ native-ui

Our apps have a lot of common code that I would like to add to the native-ui folder so that we can avoid rewriting it.

What I have tried is copy the ui folder and update the package.json to look like this

{
    "name": "@repo/native-ui",
    "version": "0.0.0",
    "private": true,
    "exports": {
        "./button": "./src/button.tsx",
        "./card": "./src/card.tsx",
        "./code": "./src/code.tsx"
    },
    "scripts": {
        "build": "tsup",
        "dev": "tsup --watch",
        "clean": "rm -rf dist",
        "lint": "eslint . --max-warnings 0",
        "generate:component": "turbo gen react-component"
    },
    "dependencies": {
        "react-native": "0.74.1",
        "tsup": "^8.0.2"
    },
    "devDependencies": {
        "@repo/eslint-config": "workspace:*",
        "@repo/typescript-config": "workspace:*",
        "@turbo/gen": "^1.12.4",
        "@types/eslint": "^8.56.5",
        "@types/node": "^20.11.24",
        "@types/react": "^18.2.0",
        "eslint": "^8.19.0",
        "react": "^18.2.0",
        "typescript": "5.0.4"
    }
}

And added this newly created local-package to the App1.
But it throws the following Error

error: Error: Unable to resolve module @babel/runtime/helpers/interopRequireDefault from packages/native-ui/src/button.tsx: @babel/runtime/helpers/interopRequireDefault could not be found within the project or in these directories:
  ../../packages/native-ui/node_modules
  ../../node_modules
> 1 | import { View, Text } from 'react-native'
    | ^
  2 | import React from 'react'
  3 |
  4 | const Button = () => {
    at ModuleResolver.resolveDependency (node_modules/.pnpm/[email protected]/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:138:15)
    at DependencyGraph.resolveDependency (node_modules/.pnpm/[email protected]/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at node_modules/.pnpm/[email protected]/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (node_modules/.pnpm/[email protected]/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (node_modules/.pnpm/[email protected]/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 1)
    at async visit (node_modules/.pnpm/[email protected]/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 2)
    at async visit (node_modules/.pnpm/[email protected]/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)

It seems like metro was unable to resolve ‘react-native’ because it is a symlink. I have already added the flag unstable_enableSymlinks to metro-config.