Alternative approach to module alias using tsconfig paths.

    
Instead of using pnpm, alias the module using tsconfig paths.
    
```
"paths": {
  "~react-native": ["./node_modules/react-native-web"],
  "~/*": ["./app/*"],
},
```
    
Remix currently only accepts paths with prefixes with ~ or ., as mentioned in this [this issues](remix-run/remix#1405), but this has the added benefit of allowing us to import react-native as well, or dependencies that have react-native as a peer dependency.

app/entry.client.tsx

@@ -1,6 +1,6 @@
 import { RemixBrowser } from "remix";
 import { hydrate } from "react-dom";
-import { AppRegistry } from "react-native";
+import { AppRegistry } from "~react-native";
 import { ReactNativeStylesContext } from "./rn-styles";
 
 const App = () => <RemixBrowser />;

app/entry.server.tsx

@@ -1,6 +1,6 @@
 import { renderToString } from "react-dom/server";
 import { RemixServer, type EntryContext } from "remix";
-import { AppRegistry } from "react-native";
+import { AppRegistry } from "~react-native";
 import { ReactNativeStylesContext } from "./rn-styles";
 
 export default function handleRequest(

app/root.tsx

@@ -9,7 +9,7 @@ import {
 } from "remix";
 import type { MetaFunction } from "remix";
 import { useReactNativeStyles } from "./rn-styles";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "~react-native";
 import globalStyles from "./styles/global.css";
 
 export const links: LinksFunction = () => {

app/routes/index.tsx

@@ -1,4 +1,4 @@
-import { Text, View } from "react-native";
+import { Text, View } from "~react-native";
 
 export default function Index() {
   return (

package.json

@@ -14,7 +14,7 @@
     "@remix-run/serve": "^1.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-native": "npm:react-native-web@^0.17.5",
+    "react-native-web": "^0.17.5",
     "remix": "^1.1.3"
   },
   "devDependencies": {