From 8275042eedd94e2fab3b49cb0591b8a220130491 Mon Sep 17 00:00:00 2001 From: Anselm Marie Date: Fri, 13 Sep 2024 16:13:21 -0400 Subject: [PATCH] =?UTF-8?q?Fixing=20a=20mobile=20classname=20bug=20?= =?UTF-8?q?=E2=80=A2=20The=20nav=20mobile=20works=20on=20mobile=20?= =?UTF-8?q?=E2=80=A2=20adding=20react=20native=20animated=20for=20future?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/mobile-app/.babelrc.js | 1 + apps/mobile-app/metro.config.js | 4 +-- .../switch.theme/switch.theme.view.tsx | 14 +++++----- .../nav.mobile/nav.mobile.module.native.ts | 26 +++++++++++++++++++ .../nav.mobile/nav.mobile.module.ts | 3 +++ .../lib/navigation/nav.mobile/nav.mobile.tsx | 2 +- .../lib-base/ui/switch/switch.interface.ts | 4 +++ .../ui/switch/switch.module.native.ts | 3 --- .../lib-base/utils/classnames.util.native.ts | 4 +-- package-lock.json | 8 +++--- package.json | 2 +- 11 files changed, 51 insertions(+), 20 deletions(-) create mode 100644 libs/features/src/lib/navigation/nav.mobile/nav.mobile.module.native.ts create mode 100644 libs/features/src/lib/navigation/nav.mobile/nav.mobile.module.ts diff --git a/apps/mobile-app/.babelrc.js b/apps/mobile-app/.babelrc.js index 1132360..118f9f3 100644 --- a/apps/mobile-app/.babelrc.js +++ b/apps/mobile-app/.babelrc.js @@ -3,6 +3,7 @@ module.exports = function (api) { return { presets: ['babel-preset-expo'], plugins: [ + 'react-native-reanimated/plugin', [ 'module:react-native-dotenv', { diff --git a/apps/mobile-app/metro.config.js b/apps/mobile-app/metro.config.js index 3601549..fff74a9 100644 --- a/apps/mobile-app/metro.config.js +++ b/apps/mobile-app/metro.config.js @@ -11,7 +11,7 @@ const { assetExts, sourceExts } = defaultConfig.resolver; * * @type {import('metro-config').MetroConfig} */ -const customConfig = { +const svgConfig = { transformer: { babelTransformerPath: require.resolve('react-native-svg-transformer'), }, @@ -21,7 +21,7 @@ const customConfig = { }, }; -module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), { +module.exports = withNxMetro(mergeConfig(defaultConfig, svgConfig), { // Change this to true to see debugging info. // Useful if you have issues resolving modules debug: false, diff --git a/libs/features/src/lib/navigation/component/switch.theme/switch.theme.view.tsx b/libs/features/src/lib/navigation/component/switch.theme/switch.theme.view.tsx index 2e397e7..1b043d5 100644 --- a/libs/features/src/lib/navigation/component/switch.theme/switch.theme.view.tsx +++ b/libs/features/src/lib/navigation/component/switch.theme/switch.theme.view.tsx @@ -1,19 +1,20 @@ import { memo, ReactElement, useEffect } from 'react'; import { ThemeTypeEnum, useThemeStore } from '@pokemon-pet-shop/store'; -import { IconTypeEnum, SwitchStatusEnum, UiSwitch } from '@pokemon-pet-shop/ui'; +import { IconTypeEnum, SwitchStatusEnum, UiSwitch, UiTypography } from '@pokemon-pet-shop/ui'; import { SwitchProps } from './switch.theme.interface'; +/** @todo hiding this code until a way to create a theming process for web and mobile */ const SwitchTheme = ({ className }: SwitchProps): ReactElement => { const { theme, updateTheme } = useThemeStore(); const updateTheming = (newTheme: ThemeTypeEnum) => { updateTheme(newTheme); - const el = document.querySelector('html'); + // const el = document.querySelector('html'); - el?.classList.toggle(ThemeTypeEnum.DARK); - el?.classList.toggle(ThemeTypeEnum.LIGHT); + // el?.classList.toggle(ThemeTypeEnum.DARK); + // el?.classList.toggle(ThemeTypeEnum.LIGHT); }; const turnLightOnClick = () => { @@ -25,9 +26,8 @@ const SwitchTheme = ({ className }: SwitchProps): ReactElement => { }; useEffect(() => { - const el = document.querySelector('html'); - - el?.classList.add(theme); + // const el = document.querySelector('html'); + // el?.classList.add(theme); }, [theme]); return ( diff --git a/libs/features/src/lib/navigation/nav.mobile/nav.mobile.module.native.ts b/libs/features/src/lib/navigation/nav.mobile/nav.mobile.module.native.ts new file mode 100644 index 0000000..b675aa9 --- /dev/null +++ b/libs/features/src/lib/navigation/nav.mobile/nav.mobile.module.native.ts @@ -0,0 +1,26 @@ +import { StyleSheet } from 'react-native'; + +export const styles = StyleSheet.create({ + modal: { + backgroundColor: 'white', + position: 'relative', + display: 'flex', + flexDirection: 'row', + height: '94%', + width: '100%', + }, + navWrapper: { + display: 'flex', + justifyContent: 'space-between', + flex: 1, + flexDirection: 'column', + marginLeft: 15, + marginRight: 15, + marginBottom: 15, + }, + switchWrapper: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + }, +}); diff --git a/libs/features/src/lib/navigation/nav.mobile/nav.mobile.module.ts b/libs/features/src/lib/navigation/nav.mobile/nav.mobile.module.ts new file mode 100644 index 0000000..10b6e5f --- /dev/null +++ b/libs/features/src/lib/navigation/nav.mobile/nav.mobile.module.ts @@ -0,0 +1,3 @@ +import styles from './nav.mobile.module.css'; + +export { styles }; diff --git a/libs/features/src/lib/navigation/nav.mobile/nav.mobile.tsx b/libs/features/src/lib/navigation/nav.mobile/nav.mobile.tsx index 6a0afe5..7bf5992 100644 --- a/libs/features/src/lib/navigation/nav.mobile/nav.mobile.tsx +++ b/libs/features/src/lib/navigation/nav.mobile/nav.mobile.tsx @@ -4,7 +4,7 @@ import { UiElementLayout, UiTypography } from '@pokemon-pet-shop/ui'; import { UiSwitchTheme } from '../component/switch.theme'; -import styles from './nav.mobile.module.css'; +import { styles } from './nav.mobile.module'; const NavMobileModal = (): ReactElement => { return ( diff --git a/libs/ui/src/lib-base/ui/switch/switch.interface.ts b/libs/ui/src/lib-base/ui/switch/switch.interface.ts index 0f4c9c5..f48a501 100644 --- a/libs/ui/src/lib-base/ui/switch/switch.interface.ts +++ b/libs/ui/src/lib-base/ui/switch/switch.interface.ts @@ -13,3 +13,7 @@ export interface SwitchProps { onLeftClick?: GenericNonReturnType; onRightClick?: GenericNonReturnType; } + +export interface SwitchButtonProps { + className?: string; +} diff --git a/libs/ui/src/lib-base/ui/switch/switch.module.native.ts b/libs/ui/src/lib-base/ui/switch/switch.module.native.ts index 0667b84..83d677d 100644 --- a/libs/ui/src/lib-base/ui/switch/switch.module.native.ts +++ b/libs/ui/src/lib-base/ui/switch/switch.module.native.ts @@ -4,7 +4,6 @@ export const styles = StyleSheet.create({ switchWrapper: { borderRadius: 100, backgroundColor: 'grey', - display: 'flex', width: 85, paddingTop: 14, paddingBottom: 14, @@ -12,7 +11,6 @@ export const styles = StyleSheet.create({ paddingRight: 10, alignItems: 'center', justifyContent: 'space-between', - position: 'relative', flexDirection: 'row', }, icon: { @@ -32,7 +30,6 @@ export const styles = StyleSheet.create({ backgroundColor: 'blue', zIndex: 0, borderRadius: 100, - // transition: left 100ms ease-in-out; }, circleLightPosition: { left: 8, diff --git a/libs/utils/src/lib-base/utils/classnames.util.native.ts b/libs/utils/src/lib-base/utils/classnames.util.native.ts index f782e3f..9e9d32a 100644 --- a/libs/utils/src/lib-base/utils/classnames.util.native.ts +++ b/libs/utils/src/lib-base/utils/classnames.util.native.ts @@ -2,10 +2,10 @@ export const classNamesUtil = (...args) => { const mergedStyles = args.reduce((accumulator, currentValue) => { let newAcc = accumulator; let newCurVal = currentValue; - if (typeof accumulator !== 'object') { + if (typeof newAcc !== 'object' || newAcc === undefined) { newAcc = {}; } - if (typeof accumulator !== 'object') { + if (typeof newCurVal !== 'object' || newCurVal === undefined) { newCurVal = {}; } return { ...newAcc, ...newCurVal }; diff --git a/package-lock.json b/package-lock.json index db55262..908e7b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,7 @@ "react-native": "0.74.5", "react-native-dotenv": "^3.4.11", "react-native-error-boundary": "^1.2.4", - "react-native-reanimated": "^3.14.0", + "react-native-reanimated": "~3.10.1", "react-native-svg": "15.2.0", "react-native-svg-transformer": "^1.5.0", "react-native-web": "~0.19.11", @@ -31942,9 +31942,9 @@ } }, "node_modules/react-native-reanimated": { - "version": "3.14.0", - "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.14.0.tgz", - "integrity": "sha512-TAxLtCfRyC/nOLeWoX/8MhdIF+Fi1e1NbLhIgEm5Kv9/gioAwSNaqLUYxjIClU1RaLwSTE8iaiHNVhTU4TS9DA==", + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.10.1.tgz", + "integrity": "sha512-sfxg6vYphrDc/g4jf/7iJ7NRi+26z2+BszPmvmk0Vnrz6FL7HYljJqTf531F1x6tFmsf+FEAmuCtTUIXFLVo9w==", "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", diff --git a/package.json b/package.json index 8cf6e1b..7625330 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "react-native": "0.74.5", "react-native-dotenv": "^3.4.11", "react-native-error-boundary": "^1.2.4", - "react-native-reanimated": "^3.14.0", + "react-native-reanimated": "~3.10.1", "react-native-svg": "15.2.0", "react-native-svg-transformer": "^1.5.0", "react-native-web": "~0.19.11",