Merge pull request #13 from williamjayjay/step10-add-libs-classnames-…

…rn-safe-container-component-wrapper

feat: add libs classnames and rn safe area, and create component to u…

package.json

@@ -37,7 +37,8 @@
     "@tanstack/react-query": "^5.48.0",
     "@testing-library/react-hooks": "^8.0.1",
     "axios": "^1.7.2",
-    "expo": "~51.0.20",
+    "classnames": "^2.5.1",
+    "expo": "51.0.22",
     "expo-font": "~12.0.9",
     "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",
@@ -46,17 +47,18 @@
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.74.3",
+    "react-native-safe-area-context": "4.10.5",
     "tailwindcss": "3.3.2",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@types/react": "~18.2.79",
-    "typescript": "~5.3.3",
+    "@testing-library/jest-native": "^5.4.3",
     "@types/jest": "^29.5.12",
+    "@types/react": "~18.2.79",
     "jest": "^29.4.0",
     "jest-fetch-mock": "^3.0.3",
-    "@testing-library/jest-native": "^5.4.3"
+    "typescript": "~5.3.3"
   },
   "private": true
 }

src/presentation/ui/components/SafeAreaContainer/safeAreaContainer.index.tsx

@@ -0,0 +1,70 @@
+import { useMemo, type FC, type ReactNode } from 'react';
+import classNames from 'classnames';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+    KeyboardAvoidingView,
+    ScrollView,
+    View,
+} from 'react-native';
+
+export const SafeAreaContainer: FC<{
+    children: ReactNode;
+    haveKeyboard?: boolean;
+    viewKeyboardClassName?: string;
+    containerClassName?: string;
+    disableScroll?: boolean;
+    testID?: string;
+}> = ({
+    viewKeyboardClassName = '',
+    containerClassName = '',
+    haveKeyboard = false,
+    children,
+    testID,
+    disableScroll = false,
+}) => {
+        const insets = useSafeAreaInsets();
+
+        const renderChildren = useMemo(() => {
+            const stylContainer = classNames('flex flex-1 z-10', containerClassName);
+
+            return (
+                <View
+                    className={stylContainer}
+                    style={{ paddingTop: insets.top + 8, paddingBottom: insets.bottom + 8 , paddingHorizontal:8}}
+                    testID={testID}>
+                    {children}
+                </View>
+            );
+        }, [
+            children,
+            containerClassName,
+            insets.bottom,
+            insets.top
+        ]);
+
+        if (disableScroll) return renderChildren;
+
+        if (haveKeyboard) {
+            return (
+                <KeyboardAvoidingView
+                    className={classNames('flex-1', viewKeyboardClassName)}
+                    behavior="padding"
+                    enabled>
+                    <ScrollView
+                        showsVerticalScrollIndicator={false}
+                        className={classNames('flex flex-1', containerClassName)}>
+                        {renderChildren}
+                    </ScrollView>
+                </KeyboardAvoidingView>
+            );
+        }
+
+        return (
+            <ScrollView
+                showsVerticalScrollIndicator={false}
+                className={classNames('flex flex-1', containerClassName)}>
+                {renderChildren}
+            </ScrollView>
+        );
+    };

src/presentation/ui/main/main.index.tsx

@@ -3,10 +3,11 @@ import { IMain } from "./types/main.type";
 import { useMain } from "./hooks/main.hook";
 import { FC } from 'react';
 import { AllModelsContexts } from '@/presentation/contexts/AllModels/allModel.index';
-import { HomeScreen } from '../HomeScreen/home.index';
 import { ReactQuery } from '@/presentation/contexts/ReactQuery/reactQuery.index';
 import { StatusBar } from 'expo-status-bar';
 import { View } from 'react-native';
+import { HomeScreen } from '@/presentation/ui/screens/HomeScreen/home.index';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 SplashScreen.preventAutoHideAsync().then()
 
@@ -19,14 +20,17 @@ const Main: FC<IMain.Input> = (props = {}) => {
 
     return (
         <>
-            <View className="flex-1" testID="main" onLayout={onLayoutRootView}>
-                <ReactQuery>
-                    <AllModelsContexts  >
-                        <HomeScreen  />
-                    </AllModelsContexts>
-                </ReactQuery>
-            </View>
-            <StatusBar style="auto" />
+            <SafeAreaProvider>
+                <View className="flex-1" testID="main" onLayout={onLayoutRootView}>
+
+                    <ReactQuery>
+                        <AllModelsContexts  >
+                            <HomeScreen />
+                        </AllModelsContexts>
+                    </ReactQuery>
+                </View>
+                <StatusBar style="auto" />
+            </SafeAreaProvider>
         </>
 
 

src/presentation/ui/screens/HomeScreen/home.index.tsx

@@ -0,0 +1,21 @@
+import { useHomeViewModel } from "@/presentation/viewmodels/HomeViewModel/hooks/home.hook";
+import { FC } from "react";
+import { Text } from "react-native";
+import { IHome } from "./types/home.type";
+import { SafeAreaContainer } from "@/presentation/ui/components/SafeAreaContainer/safeAreaContainer.index";
+
+const HomeScreen: FC<IHome.Input> = () => {
+
+    const { students } = useHomeViewModel({})
+
+    console.log('students', students.length)
+
+    return (
+        <SafeAreaContainer haveKeyboard >
+                <Text className="font-karla600SemiBold" >Ola mundo</Text>
+                <Text className="font-karla200ExtraLight" >Ola mundo</Text>
+        </SafeAreaContainer>
+    );
+};
+
+export { HomeScreen }