chore: fix running the example app on web

example/webpack.config.js

@@ -8,8 +8,6 @@ const packages = path.resolve(__dirname, '..', 'packages');
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
 
-  config.context = path.resolve(__dirname, '..');
-
   config.module.rules.push({
     test: /\.(js|ts|tsx)$/,
     include: /(packages|example)\/.+/,
@@ -19,19 +17,25 @@ module.exports = async function (env, argv) {
 
   Object.assign(config.resolve.alias, {
     'react': path.resolve(node_modules, 'react'),
-    'react-native': path.resolve(node_modules, 'react-native-web'),
-    'react-native-web': path.resolve(node_modules, 'react-native-web'),
+    'react-native': path.resolve(__dirname, 'node_modules', 'react-native-web'),
+    'react-native-web': path.resolve(
+      __dirname,
+      'node_modules',
+      'react-native-web'
+    ),
     '@expo/vector-icons': path.resolve(node_modules, '@expo/vector-icons'),
   });
 
   fs.readdirSync(packages)
     .filter((name) => !name.startsWith('.'))
     .forEach((name) => {
-      config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
-        packages,
-        name,
-        require(`../packages/${name}/package.json`).source
-      );
+      const pak = require(`../packages/${name}/package.json`);
+
+      if (pak.source == null) {
+        return;
+      }
+
+      config.resolve.alias[pak.name] = path.resolve(packages, name, pak.source);
     });
 
   return config;

packages/native-stack/src/views/DebugContainer.native.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Platform, View, ViewProps } from 'react-native';
+// @ts-ignore Getting private component
+import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
+import type { StackPresentationTypes } from 'react-native-screens';
+
+type ContainerProps = ViewProps & {
+  stackPresentation: StackPresentationTypes;
+  children: React.ReactNode;
+};
+
+let Container = (View as unknown) as React.ComponentType<ContainerProps>;
+
+if (process.env.NODE_ENV !== 'production') {
+  const DebugContainer = (props: ContainerProps) => {
+    const { stackPresentation, ...rest } = props;
+
+    if (Platform.OS === 'ios' && stackPresentation !== 'push') {
+      // This is necessary for LogBox
+      return (
+        <AppContainer>
+          <View {...rest} />
+        </AppContainer>
+      );
+    }
+
+    return <View {...rest} />;
+  };
+
+  Container = DebugContainer;
+}
+
+export default Container;

packages/native-stack/src/views/DebugContainer.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+import type { StackPresentationTypes } from 'react-native-screens';
+
+type ContainerProps = ViewProps & {
+  stackPresentation: StackPresentationTypes;
+  children: React.ReactNode;
+};
+
+export default function Container(props: ContainerProps) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { stackPresentation: _, ...rest } = props;
+  return <View {...rest} />;
+}

packages/native-stack/src/views/FontProcessor.native.tsx

@@ -0,0 +1,13 @@
+// @ts-ignore: No declaration available
+import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
+
+export function processFonts(
+  fontFamilies: (string | undefined)[]
+): (string | undefined)[] {
+  // @ts-ignore: React Native types are incorrect here and don't consider fontFamily a style value
+  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
+  if (typeof fontFamilyProcessor === 'function') {
+    return fontFamilies.map(fontFamilyProcessor);
+  }
+  return fontFamilies;
+}

packages/native-stack/src/views/FontProcessor.tsx

@@ -1,13 +1,5 @@
-// @ts-ignore: No declaration available
-import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
-
 export function processFonts(
-  fontFamilies: (string | undefined)[]
+  _: (string | undefined)[]
 ): (string | undefined)[] {
-  // @ts-ignore: React Native types are incorrect here and don't consider fontFamily a style value
-  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
-  if (typeof fontFamilyProcessor === 'function') {
-    return fontFamilies.map(fontFamilyProcessor);
-  }
-  return fontFamilies;
+  throw new Error('Not supported on Web');
 }

packages/native-stack/src/views/NativeStackView.tsx

@@ -7,9 +7,7 @@ import {
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Platform, StyleSheet, View, ViewProps } from 'react-native';
-// @ts-ignore Getting private component
-import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
+import { Platform, StyleSheet } from 'react-native';
 import {
   Screen,
   ScreenStack,
@@ -22,33 +20,11 @@ import type {
   NativeStackNavigationHelpers,
   NativeStackNavigationOptions,
 } from '../types';
+import DebugContainer from './DebugContainer';
 import HeaderConfig from './HeaderConfig';
 
 const isAndroid = Platform.OS === 'android';
 
-type ContainerProps = ViewProps & { stackPresentation: StackPresentationTypes };
-
-let Container = (View as unknown) as React.ComponentType<ContainerProps>;
-
-if (process.env.NODE_ENV !== 'production') {
-  const DebugContainer = (props: ContainerProps) => {
-    const { stackPresentation, ...rest } = props;
-
-    if (Platform.OS === 'ios' && stackPresentation !== 'push') {
-      // This is necessary for LogBox
-      return (
-        <AppContainer>
-          <View {...rest} />
-        </AppContainer>
-      );
-    }
-
-    return <View {...rest} />;
-  };
-
-  Container = DebugContainer;
-}
-
 const MaybeNestedStack = ({
   options,
   route,
@@ -81,7 +57,7 @@ const MaybeNestedStack = ({
   }, [headerShown, presentation, route.name]);
 
   const content = (
-    <Container
+    <DebugContainer
       style={[
         styles.container,
         presentation !== 'transparentModal' &&
@@ -93,7 +69,7 @@ const MaybeNestedStack = ({
       stackPresentation={presentation === 'card' ? 'push' : presentation}
     >
       {children}
-    </Container>
+    </DebugContainer>
   );
 
   if (isHeaderInModal) {