From 56f7df53843f9cb2591a43694e98392017dcf9ad Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Mon, 31 May 2021 20:03:29 +0200 Subject: [PATCH] chore: fix running the example app on web --- example/webpack.config.js | 22 ++++++++----- .../src/views/DebugContainer.native.tsx | 33 +++++++++++++++++++ .../native-stack/src/views/DebugContainer.tsx | 14 ++++++++ .../src/views/FontProcessor.native.tsx | 13 ++++++++ .../native-stack/src/views/FontProcessor.tsx | 12 ++----- .../src/views/NativeStackView.tsx | 32 +++--------------- 6 files changed, 79 insertions(+), 47 deletions(-) create mode 100644 packages/native-stack/src/views/DebugContainer.native.tsx create mode 100644 packages/native-stack/src/views/DebugContainer.tsx create mode 100644 packages/native-stack/src/views/FontProcessor.native.tsx diff --git a/example/webpack.config.js b/example/webpack.config.js index 90ac0632..975b994d 100644 --- a/example/webpack.config.js +++ b/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; diff --git a/packages/native-stack/src/views/DebugContainer.native.tsx b/packages/native-stack/src/views/DebugContainer.native.tsx new file mode 100644 index 00000000..2006570f --- /dev/null +++ b/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; + +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 ( + + + + ); + } + + return ; + }; + + Container = DebugContainer; +} + +export default Container; diff --git a/packages/native-stack/src/views/DebugContainer.tsx b/packages/native-stack/src/views/DebugContainer.tsx new file mode 100644 index 00000000..a1b5cacd --- /dev/null +++ b/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 ; +} diff --git a/packages/native-stack/src/views/FontProcessor.native.tsx b/packages/native-stack/src/views/FontProcessor.native.tsx new file mode 100644 index 00000000..00e22151 --- /dev/null +++ b/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; +} diff --git a/packages/native-stack/src/views/FontProcessor.tsx b/packages/native-stack/src/views/FontProcessor.tsx index 00e22151..142abe45 100644 --- a/packages/native-stack/src/views/FontProcessor.tsx +++ b/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'); } diff --git a/packages/native-stack/src/views/NativeStackView.tsx b/packages/native-stack/src/views/NativeStackView.tsx index 55a66c45..2ebd2456 100644 --- a/packages/native-stack/src/views/NativeStackView.tsx +++ b/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; - -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 ( - - - - ); - } - - return ; - }; - - Container = DebugContainer; -} - const MaybeNestedStack = ({ options, route, @@ -81,7 +57,7 @@ const MaybeNestedStack = ({ }, [headerShown, presentation, route.name]); const content = ( - {children} - + ); if (isHeaderInModal) {