NativeWind migration

src/app/(app)/_layout.tsx

@@ -2,7 +2,7 @@ import { LineIcon, RightArrowIcon } from '@/components/svg'
 import { useAuth, useScreenInfo } from '@/hooks'
 import { AppDispatch, RootState, toggleSideMenu } from '@/store'
 import React from 'react'
-import { Dimensions, ImageBackground, KeyboardAvoidingView, Pressable, StyleSheet, View } from 'react-native'
+import { Dimensions, ImageBackground, KeyboardAvoidingView, Platform, Pressable, StyleSheet, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 import Footer from '@/components/Footer'
 import Header from '@/components/Header'
@@ -11,16 +11,12 @@ import { Redirect, Slot } from 'expo-router'
 
 /**
  * AppLayout Component.
- * This component defines the layout for the entire application.
- * It includes a header, side menu, main content area, and a footer.
- * The side menu can be toggled open/closed by clicking a button.
- * @returns JSX element representing the AppLayout component.
+ * This component serves as the main layout for the application.
+ * It includes the header, side menu, and main content area.
  */
 export const AppLayout = () => {
   // Hook to get screen information
   const { isSmallScreen, isMobile } = useScreenInfo()
-  // Redux hook to get theme data
-  const theme = useSelector((state: RootState) => state.theme.theme)
   // Redux hook to get side menu state
   const { isOpen: isSideMenuOpened } = useSelector((state: RootState) => state.sideMenu)
   // Hook to check authentication status
@@ -43,73 +39,28 @@ export const AppLayout = () => {
     return <Redirect href='/welcome' />
   }
 
-  // Styles for the component
-  const styles = StyleSheet.create({
-    mainContainer: {
-      flex: 1,
-      minHeight: height > 600 ? height : height - 48, // Set minimum height based on screen height
-      backgroundRepeat: 'repeat',
-      backgroundSize: 'contain',
-      overflowY: 'auto',
-    },
-    container: {
-      flexGrow: 1,
-      fontFamily: 'Inter',
-      alignItems: 'center', // Center children horizontally
-      justifyContent: 'space-between',
-      width: '100%',
-    },
-    bodyContainer: {
-      flex: 1,
-      width: '100%',
-      flexDirection: 'row',
-      fontFamily: 'Inter',
-    },
-    mainBody: { width: '100%', flex: 1 },
-    appContent: {
-      flexGrow: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      alignSelf: 'center', // Center the content area within the parent container
-      fontFamily: 'Inter',
-      paddingBottom: isSmallScreen ? 4 : null,
-    },
-    closeButton: {
-      marginTop: 'auto',
-      marginBottom: 'auto',
-      marginHorizontal: isSideMenuOpened ? 8 : 16,
-    },
-    bodyInnerContainer: {
-      flexDirection: 'row',
-    },
-  })
-
-  // Render the component
   return (
-    <ImageBackground style={{ width, height }} source={require('@/assets/images/background.png')}>
+    <ImageBackground
+      style={{ width, height }}
+      className='bg-repeat bg-contain'
+      source={require('@/assets/images/background.png')}
+    >
       <MenuDrawer>
-        <KeyboardAvoidingView style={[styles.mainContainer]} behavior='padding' enabled>
-          <View style={styles.container}>
-            <View style={styles.bodyContainer}>
-              {/* Side menu */}
-              <View style={styles.mainBody}>
-                {/* Header */}
-                <Header />
-                <View style={styles.bodyInnerContainer}>
-                  {/* Toggle button for side menu */}
-                  {isAuthenticated && !isGuest && !isMobile && (
-                    <View style={styles.closeButton}>
-                      <Pressable onPress={togglePopup}>
-                        {isSideMenuOpened ? <LineIcon /> : <RightArrowIcon />}
-                      </Pressable>
-                    </View>
-                  )}
-                  {/* Main content area */}
-                  <View style={styles.appContent}>
-                    <Slot />
-                  </View>
+        <KeyboardAvoidingView
+          className='flex-1 overflow-y-auto'
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          enabled
+        >
+          <View className='flex-1'>
+            <Header />
+            <View className='flex-1'>
+              {isAuthenticated && !isGuest && !isMobile && (
+                <View className={`mt-auto mb-auto ${isSideMenuOpened ? 'mx-2' : 'mx-4'}`}>
+                  <Pressable onPress={togglePopup}>{isSideMenuOpened ? <LineIcon /> : <RightArrowIcon />}</Pressable>
                 </View>
-                {/* Footer */}
+              )}
+              <View className={`flex-grow justify-center items-center self-center ${isSmallScreen ? 'pb-1' : ''}`}>
+                <Slot />
                 {showFooter && <Footer />}
               </View>
             </View>

src/app/(app)/chat/[threadId].tsx

@@ -5,7 +5,7 @@ import { useChat, useDirection, useScreenInfo } from '@/hooks'
 import { AppDispatch, RootState, fetchThread, toggleSharePopup } from '@/store'
 import getEnv from '@/utils/getEnv'
 import React, { useEffect } from 'react'
-import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, View } from 'react-native'
+import { KeyboardAvoidingView, Platform, Pressable, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 import { useRouter, useLocalSearchParams } from 'expo-router'
 
@@ -44,33 +44,18 @@ const ChatScreen: React.FC = () => {
     }
   }, [])
 
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      alignItems: 'center', // Ensure content is centered
-      justifyContent: 'space-between', // Distributes children evenly
-      width: '100%',
-    },
-    shareIcon: {
-      position: 'absolute',
-      left: isRTL ? 24 : 'auto',
-      right: isRTL ? 'auto' : 24,
-      padding: 8,
-      borderRadius: 4,
-      backgroundColor: theme.popupBackgroundColor,
-    },
-  })
-
   return (
-    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.container}>
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      className='flex-1 items-center justify-between w-full'
+    >
       <ChatContainer isHome={false} />
       {getEnv('ENABLE_SHARE') && !isSmallScreen && (
-        <View style={styles.shareIcon}>
-          <Pressable
-            onPress={() => {
-              dispatch(toggleSharePopup(!isSharePopupVisible))
-            }}
-          >
+        <View
+          className={`absolute p-2 rounded ${isRTL ? 'left-6' : 'right-6'}`}
+          style={{ backgroundColor: theme.popupBackgroundColor }}
+        >
+          <Pressable onPress={() => dispatch(toggleSharePopup(!isSharePopupVisible))}>
             <ShareIcon />
           </Pressable>
         </View>

src/app/(app)/index.tsx

@@ -2,7 +2,7 @@ import { ChatContainer, Toast } from '@/components'
 import { useAuth, useScreenInfo } from '@/hooks'
 import { AppDispatch, setActiveThread, toggleSideMenu } from '@/store'
 import React, { useEffect, useState } from 'react'
-import { SafeAreaView, StyleSheet } from 'react-native'
+import { SafeAreaView } from 'react-native'
 import { useDispatch } from 'react-redux'
 import { useLocalSearchParams } from 'expo-router'
 
@@ -21,7 +21,7 @@ const HomeScreen: React.FC = () => {
     if (isAuthenticated && !isGuest) {
       dispatch(setActiveThread(null))
     }
-    if (!isMobile) {
+    if (!isMobile && !isGuest) {
       dispatch(toggleSideMenu(true))
     }
   }, [])
@@ -34,20 +34,11 @@ const HomeScreen: React.FC = () => {
   }, [errorMessage])
 
   return (
-    <SafeAreaView style={[styles.container]}>
+    <SafeAreaView className='flex-1 items-center justify-between'>
       <ChatContainer isHome={true} />
       {toastVisible && <Toast message={errorMessage} duration={3000} onDismiss={() => setToastVisible(false)} />}
     </SafeAreaView>
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center', // Ensure content is centered
-    justifyContent: 'space-between', // Distributes children evenly
-  },
-  // Additional styles as needed
-})
-
 export default HomeScreen

src/app/(public)/404.tsx

@@ -5,7 +5,7 @@ import { useAuth, useDirection } from '@/hooks'
 import { AppDispatch, RootState, setActiveThread } from '@/store'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native'
+import { Pressable, SafeAreaView, Text, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 import { useRouter, useLocalSearchParams } from 'expo-router'
 
@@ -47,51 +47,19 @@ const NotFoundScreen: React.FC = () => {
     return () => setToastVisible(false)
   }, [errorMessage])
 
-  // Define component styles
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      alignItems: 'center', // Ensure content is centered
-      justifyContent: 'space-between', // Distributes children evenly
-      height: '100vh',
-      width: '100%',
-    },
-    body: {
-      margin: 'auto',
-      flexDirection: isRTL ? 'row-reverse' : 'row',
-      alignItems: 'center',
-    },
-    text: {
-      color: theme.textColor,
-      fontFamily: 'Inter',
-      fontSize: 24,
-      lineHeight: 28,
-    },
-    textSmall: {
-      color: theme.textColor,
-      fontFamily: 'Inter',
-      fontSize: 16,
-      lineHeight: 21,
-    },
-    logo: {
-      cursor: 'pointer',
-    },
-    // Additional styles as needed
-  })
-
-  // Render the component
   return (
-    <SafeAreaView style={[styles.container]}>
-      {/* Pressable logo to navigate back to home screen */}
-      <Pressable style={styles.logo} onPress={() => router.push('/')}>
+    <SafeAreaView className='flex-1 items-center justify-between h-screen w-full'>
+      <Pressable className='cursor-pointer' onPress={() => router.push('/')}>
         <LogoIcon fill={theme.iconFill} />
       </Pressable>
-      {/* Body text indicating 404 error */}
-      <View style={styles.body}>
-        <Text style={styles.text}>404 | </Text>
-        <Text style={styles.textSmall}>{t('notfoundMessage')}</Text>
+      <View className={`flex ${isRTL ? 'flex-row-reverse' : 'flex-row'} items-center m-auto`}>
+        <Text style={{ color: theme.textColor, fontFamily: 'Inter' }} className='text-2xl leading-7'>
+          404 |{' '}
+        </Text>
+        <Text style={{ color: theme.textColor, fontFamily: 'Inter' }} className='text-base leading-[21px]'>
+          {t('notfoundMessage')}
+        </Text>
       </View>
-      {/* Toast component to display error message if present */}
       {toastVisible && <Toast message={errorMessage} duration={3000} onDismiss={() => setToastVisible(false)} />}
     </SafeAreaView>
   )

src/app/(public)/_layout.tsx

@@ -1,7 +1,7 @@
 import { useAuth, useScreenInfo } from '@/hooks'
 import { RootState } from '@/store'
 import React from 'react'
-import { ImageBackground, KeyboardAvoidingView, StyleSheet, View } from 'react-native'
+import { ImageBackground, KeyboardAvoidingView, Platform, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import ActionButtons from '@/components/ActionButtons'
 import Footer from '@/components/Footer'
@@ -24,64 +24,26 @@ export const PublicLayout = () => {
     return <Redirect href='/' />
   }
 
-  // Styles for the component
-  const styles = StyleSheet.create({
-    mainContainer: {
-      flex: 1,
-      minHeight: height > 600 ? height : height - 48, // Set minimum height based on screen height
-      backgroundRepeat: 'repeat',
-      backgroundSize: 'contain',
-      width: '100%',
-    },
-    container: {
-      flexGrow: 1,
-      fontFamily: 'Inter',
-      alignItems: 'center', // Center children horizontally
-      justifyContent: 'space-between',
-      width: '100%',
-    },
-    bodyContainer: {
-      flex: 1,
-      width: '100%',
-    },
-    pageContainer: {
-      flex: 1,
-      width: '100%',
-    },
-    main: { flex: 1, flexGrow: 1, width: '100%' },
-    appContent: {
-      flexGrow: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: '100%', // Ensure it spans the full width
-      alignSelf: 'center', // Center the content area within the parent container
-      fontFamily: 'Inter',
-      paddingBottom: isSmallScreen ? 4 : null,
-    },
-    header: {
-      flexDirection: 'row',
-      justifyContent: 'flex-end',
-      width: '100%',
-      alignItems: 'center',
-      padding: isSmallScreen ? 8 : 16,
-    },
-  })
-
-  // Render the component
   return (
-    <ImageBackground style={{ width, height }} source={require('@/assets/images/background.png')}>
-      <KeyboardAvoidingView style={[styles.mainContainer]} behavior='padding' enabled>
-        <View style={[styles.container]}>
-          <View style={styles.pageContainer}>
+    <ImageBackground
+      style={{ width, height }}
+      className='bg-repeat bg-contain'
+      source={require('@/assets/images/background.png')}
+    >
+      <KeyboardAvoidingView className='flex-1 w-full' behavior={Platform.OS === 'ios' ? 'padding' : undefined} enabled>
+        <View className='flex-grow w-full items-center justify-between font-inter'>
+          <View className='flex-1 w-full'>
             {isMobile && (
-              <View style={styles.header}>
+              <View className={`flex-row justify-end w-full items-center p-${isSmallScreen ? '2' : '4'}`}>
                 <ActionButtons isTop={true} />
               </View>
             )}
 
-            <View style={styles.main}>
-              <View style={styles.bodyContainer}>
-                <View style={styles.appContent}>
+            <View className='flex-1 flex-grow w-full'>
+              <View className='flex-1 w-full'>
+                <View
+                  className={`flex-grow justify-center items-center w-full self-center font-inter ${isSmallScreen ? 'pb-1' : ''}`}
+                >
                   <Slot />
                 </View>
               </View>