Fixing a mobile classname bug • The nav mobile works on mobile • addi…

…ng react native animated for future

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',
         {

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,

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 (

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',
+  },
+});

libs/features/src/lib/navigation/nav.mobile/nav.mobile.module.ts

@@ -0,0 +1,3 @@
+import styles from './nav.mobile.module.css';
+
+export { styles };

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 (

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;
+}

libs/ui/src/lib-base/ui/switch/switch.module.native.ts

@@ -4,15 +4,13 @@ export const styles = StyleSheet.create({
   switchWrapper: {
     borderRadius: 100,
     backgroundColor: 'grey',
-    display: 'flex',
     width: 85,
     paddingTop: 14,
     paddingBottom: 14,
     paddingLeft: 10,
     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,

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 };

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",