React Native Updates

babel.config.js

@@ -0,0 +1,8 @@
+module.exports = function (api) {
+  api.cache(true)
+  return {
+    presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'],
+
+    plugins: ['@babel/plugin-proposal-export-namespace-from', 'react-native-reanimated/plugin'],
+  }
+}

capacitor.config.json

@@ -2,6 +2,12 @@
   "appId": "chat.ansari.app",
   "appName": "Ansari Chat",
   "webDir": "dist",
+  "android": {
+    "path": "./capacitor/android"
+  },
+  "ios": {
+    "path": "./capacitor/ios"
+  },
   "plugins": {
     "StatusBar": {
       "overlaysWebView": false

capacitor/android/capacitor.settings.gradle

@@ -0,0 +1,15 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../../node_modules/@capacitor/app/android')
+
+include ':capacitor-haptics'
+project(':capacitor-haptics').projectDir = new File('../../node_modules/@capacitor/haptics/android')
+
+include ':capacitor-keyboard'
+project(':capacitor-keyboard').projectDir = new File('../../node_modules/@capacitor/keyboard/android')
+
+include ':capacitor-status-bar'
+project(':capacitor-status-bar').projectDir = new File('../../node_modules/@capacitor/status-bar/android')

capacitor/ios/App/Podfile

@@ -0,0 +1,27 @@
+require_relative '../../../node_modules/@capacitor/ios/scripts/pods_helpers'
+
+platform :ios, '14.0'
+use_frameworks!
+
+# workaround to avoid Xcode caching of Pods that requires
+# Product -> Clean Build Folder after new Cordova plugins installed
+# Requires CocoaPods 1.6 or newer
+install! 'cocoapods', :disable_input_output_paths => true
+
+def capacitor_pods
+  pod 'Capacitor', :path => '../../../node_modules/@capacitor/ios'
+  pod 'CapacitorCordova', :path => '../../../node_modules/@capacitor/ios'
+  pod 'CapacitorApp', :path => '../../../node_modules/@capacitor/app'
+  pod 'CapacitorHaptics', :path => '../../../node_modules/@capacitor/haptics'
+  pod 'CapacitorKeyboard', :path => '../../../node_modules/@capacitor/keyboard'
+  pod 'CapacitorStatusBar', :path => '../../../node_modules/@capacitor/status-bar'
+end
+
+target 'App' do
+  capacitor_pods
+  # Add your Pods here
+end
+
+post_install do |installer|
+  assertDeploymentTarget(installer)
+end

metro.config.js

@@ -0,0 +1,9 @@
+const { getDefaultConfig } = require('expo/metro-config')
+const { withNativeWind } = require('nativewind/metro')
+const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config')
+
+const config = getDefaultConfig(__dirname)
+
+const nativeWindConfig = withNativeWind(config, { input: './src/global.css' })
+
+module.exports = wrapWithReanimatedMetroConfig(nativeWindConfig)

nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package.json

@@ -4,6 +4,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@capacitor/android": "^7.0.1",
     "@capacitor/app": "7.0.0",
     "@capacitor/core": "7.0.1",
@@ -29,24 +30,25 @@
     "expo-symbols": "~0.2.1",
     "expo-system-ui": "~4.0.7",
     "expo-web-browser": "~14.0.2",
-    "flowbite": "^1.6.5",
-    "flowbite-react": "^0.10.2",
     "formik": "^2.4.5",
     "history": "^5.3.0",
     "i18next": "^23.7.20",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.4.2",
     "lodash.debounce": "^4.0.8",
+    "nativewind": "^4.1.23",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-i18next": "^14.0.1",
     "react-native": "0.76.6",
+    "react-native-drawer-layout": "^4.1.1",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-markdown-display": "^7.0.2",
     "react-native-popover-view": "^5.1.8",
-    "react-native-reanimated": "~3.16.1",
+    "react-native-reanimated": "3.16.2",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
+    "react-native-svg": "15.8.0",
     "react-native-user-avatar": "^1.0.8",
     "react-native-web": "~0.19.13",
     "react-native-webview": "13.12.5",
@@ -60,6 +62,7 @@
   "scripts": {
     "depcheck": "./node_modules/.bin/depcheck",
     "start": "expo start",
+    "start:clear": "expo start --clear",
     "open:android": "npx cap open android",
     "open:ios": "npx cap open ios",
     "start:android": "npx cap run android",
@@ -84,7 +87,6 @@
     "@babel/core": "^7.25.2",
     "@capacitor/assets": "^3.0.5",
     "@capacitor/cli": "7.0.1",
-    "@tailwindcss/postcss": "^4.0.3",
     "@types/jest": "^29.5.12",
     "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^16.18.76",
@@ -102,13 +104,12 @@
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "flowbite": "^1.6.5",
     "jest": "^29.2.1",
     "jest-expo": "~52.0.3",
     "postcss": "^8.5.1",
     "prettier": "^3.4.2",
     "react-test-renderer": "18.3.1",
-    "tailwindcss": "^4.0.3",
+    "tailwindcss": "^3.4.0",
     "typescript": "^5.3.3"
   }
 }

src/app/(app)/_layout.tsx

@@ -6,7 +6,7 @@ import { Dimensions, KeyboardAvoidingView, Pressable, ScrollView, StyleSheet, Vi
 import { useDispatch, useSelector } from 'react-redux'
 import Footer from '@/components/Footer'
 import Header from '@/components/Header'
-import { SideMenu } from '@/components/menu'
+import { MenuDrawer } from '@/components/menu'
 import { Redirect, Slot } from 'expo-router'
 
 /**
@@ -86,34 +86,39 @@ export const AppLayout = () => {
 
   // Render the component
   return (
-    <KeyboardAvoidingView style={[styles.mainContainer]} behavior='padding' enabled>
-      <View style={[styles.container]}>
-        <View style={styles.bodyContainer}>
-          {/* Side menu */}
-          <SideMenu />
-          <View style={styles.main}>
-            <View style={styles.mainBody}>
-              {/* Header */}
-              <Header />
-              <View style={[styles.bodyContainer, { flexDirection: 'row' }]}>
-                {/* Toggle button for side menu */}
-                {isAuthenticated && !isGuest && !isMobile && (
-                  <View style={styles.closeButton}>
-                    <Pressable onPress={togglePopup}>{isSideMenuOpened ? <LineIcon /> : <RightArrowIcon />}</Pressable>
+    <View>
+      <MenuDrawer>
+        <KeyboardAvoidingView style={[styles.mainContainer]} behavior='padding' enabled>
+          <View style={[styles.container]}>
+            <View style={styles.bodyContainer}>
+              {/* Side menu */}
+              <View style={styles.main}>
+                <View style={styles.mainBody}>
+                  {/* Header */}
+                  <Header />
+                  <View style={[styles.bodyContainer, { flexDirection: 'row' }]}>
+                    {/* Toggle button for side menu */}
+                    {isAuthenticated && !isGuest && !isMobile && (
+                      <View style={styles.closeButton}>
+                        <Pressable onPress={togglePopup}>
+                          {isSideMenuOpened ? <LineIcon /> : <RightArrowIcon />}
+                        </Pressable>
+                      </View>
+                    )}
+                    {/* Main content area */}
+                    <ScrollView contentContainerStyle={styles.appContent}>
+                      <Slot />
+                    </ScrollView>
                   </View>
-                )}
-                {/* Main content area */}
-                <ScrollView contentContainerStyle={styles.appContent}>
-                  <Slot />
-                </ScrollView>
+                  {/* Footer */}
+                  {showFooter && <Footer />}
+                </View>
               </View>
-              {/* Footer */}
-              {showFooter && <Footer />}
             </View>
           </View>
-        </View>
-      </View>
-    </KeyboardAvoidingView>
+        </KeyboardAvoidingView>
+      </MenuDrawer>
+    </View>
   )
 }
 

src/app/_layout.tsx

@@ -1,4 +1,5 @@
 import { i18n } from '@/i18n'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { RootState, initStore } from '@/store'
 import { Slot } from 'expo-router'
 import { EnhancedStore } from '@reduxjs/toolkit'
@@ -8,7 +9,7 @@ import { Provider } from 'react-redux'
 import { LoadingScreen } from '@/components'
 import { useFonts, Inter_400Regular } from '@expo-google-fonts/inter'
 
-import '../index.css'
+import '../global.css'
 
 const AppLayout = () => {
   // Specify the type of the state to be either null or an EnhancedStore instance
@@ -29,11 +30,13 @@ const AppLayout = () => {
   }
 
   return (
-    <I18nextProvider i18n={i18n}>
-      <Provider store={reduxStore}>
-        <Slot />
-      </Provider>
-    </I18nextProvider>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <I18nextProvider i18n={i18n}>
+        <Provider store={reduxStore}>
+          <Slot />
+        </Provider>
+      </I18nextProvider>
+    </GestureHandlerRootView>
   )
 }
 

src/components/Header.tsx

@@ -1,10 +1,10 @@
 import { useAuth, useDirection, useScreenInfo } from '@/hooks'
-import { RootState } from '@/store'
+import { AppDispatch, RootState, toggleSideMenu } from '@/store'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { useSelector } from 'react-redux'
+import { Pressable, StyleSheet, View } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
 import ActionButtons from './ActionButtons'
-import { MenuDrawer } from './menu'
+import { MenuIcon } from './svg'
 
 const Header: React.FC = () => {
   const { isAuthenticated, isGuest } = useAuth()
@@ -13,11 +13,17 @@ const Header: React.FC = () => {
   const isSideMenuOpened = useSelector((state: RootState) => state.sideMenu.isOpen)
   const displayMenuDrawer = isAuthenticated && !isGuest && (!isSideMenuOpened || isSmallScreen)
   const isInputFullMode = useSelector((state: RootState) => state.input.fullMode)
+  const theme = useSelector((state: RootState) => state.theme.theme)
+  const dispatch = useDispatch<AppDispatch>()
 
   if (isInputFullMode || (!isSmallScreen && !isAuthenticated)) {
     return null
   }
 
+  const togglePopup = () => {
+    dispatch(toggleSideMenu(!isSideMenuOpened))
+  }
+
   const styles = StyleSheet.create({
     container: {
       zIndex: 10,
@@ -41,12 +47,22 @@ const Header: React.FC = () => {
     rightContent: {
       flexDirection: isRTL ? 'row-reverse' : 'row',
     },
+    button: {
+      padding: 8,
+      borderRadius: 4,
+    },
   })
 
   return (
     <View style={styles.container}>
       <View style={styles.contentWarper}>
-        <View style={styles.leftContent}>{displayMenuDrawer && <MenuDrawer />}</View>
+        <View style={styles.leftContent}>
+          {displayMenuDrawer && (
+            <Pressable onPress={() => togglePopup()} style={styles.button}>
+              <MenuIcon stroke={theme.iconFill} hoverStroke={theme.hoverColor} width={28} height={28} />
+            </Pressable>
+          )}
+        </View>
         <View style={styles.rightContent}>{isMobile && <ActionButtons isTop={true} />}</View>
       </View>
     </View>