UI Updates and Bug Fixes

App.tsx

@@ -6,113 +6,20 @@
  */
 
 import React from 'react';
-import type {PropsWithChildren} from 'react';
+import { AppNavigator } from './src/navigation/AppNavigator';
-import {
+import { SafeAreaProvider } from 'react-native-safe-area-context';
-  SafeAreaView,
+import { LogBox, StatusBar } from 'react-native';
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
 
-import {
+// LogBox.ignoreAllLogs(true);
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-function Section({children, title}: SectionProps): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-}
 
 function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
   return (
-    <SafeAreaView style={backgroundStyle}>
+    <SafeAreaProvider>
-      <StatusBar
+      <StatusBar barStyle="dark-content" backgroundColor="#808080" translucent={false} />
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+      <AppNavigator />
-        backgroundColor={backgroundStyle.backgroundColor}
+    </SafeAreaProvider>
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
   );
 }
 
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
-
 export default App;
+

android/app/build.gradle

@@ -19,9 +19,9 @@ react {
 
     /* Variants */
     //   The list of variants to that are debuggable. For those we're going to
-    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   skip the bundling of the JS bundle and the assets. Default is "debug", "debugOptimized".
     //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
-    // debuggableVariants = ["liteDebug", "prodDebug"]
+    // debuggableVariants = ["liteDebug", "liteDebugOptimized", "prodDebug", "prodDebugOptimized"]
 
     /* Bundling */
     //   A list containing the node command and its flags. Default is just 'node'.
@@ -63,14 +63,14 @@ def enableProguardInReleaseBuilds = false
  * The preferred build flavor of JavaScriptCore (JSC)
  *
  * For example, to use the international variant, you can use:
- * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ * `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
  *
  * The international variant includes ICU i18n library and necessary data
  * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
  * give correct results when using with locales other than en-US. Note that
  * this variant is about 6MiB larger per architecture than default.
  */
-def jscFlavor = 'org.webkit:android-jsc:+'
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
 
 android {
     ndkVersion rootProject.ext.ndkVersion
@@ -102,7 +102,7 @@ android {
             // see https://reactnative.dev/docs/signed-apk-android.
             signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            proguardFiles getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro"
         }
     }
 }

android/app/src/debug/AndroidManifest.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <application
-        android:usesCleartextTraffic="true"
-        tools:targetApi="28"
-        tools:ignore="GoogleAppIndexingWarning"/>
-</manifest>

android/app/src/main/AndroidManifest.xml

@@ -9,6 +9,7 @@
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
       android:theme="@style/AppTheme"
+      android:usesCleartextTraffic="${usesCleartextTraffic}"
       android:supportsRtl="true">
       <activity
         android:name=".MainActivity"

android/app/src/main/java/com/caregiverapp/MainApplication.kt

@@ -4,40 +4,24 @@ import android.app.Application
 import com.facebook.react.PackageList
 import com.facebook.react.ReactApplication
 import com.facebook.react.ReactHost
-import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
-import com.facebook.react.ReactPackage
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
-import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.soloader.SoLoader
 
 class MainApplication : Application(), ReactApplication {
 
-  override val reactNativeHost: ReactNativeHost =
+  override val reactHost: ReactHost by lazy {
-      object : DefaultReactNativeHost(this) {
+    getDefaultReactHost(
-        override fun getPackages(): List<ReactPackage> =
+      context = applicationContext,
-            PackageList(this).packages.apply {
+      packageList =
-              // Packages that cannot be autolinked yet can be added manually here, for example:
+        PackageList(this).packages.apply {
-              // add(MyReactNativePackage())
+          // Packages that cannot be autolinked yet can be added manually here, for example:
-            }
+          // add(MyReactNativePackage())
-
+        },
-        override fun getJSMainModuleName(): String = "index"
+    )
-
+  }
-        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-
-        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-      }
-
-  override val reactHost: ReactHost
-    get() = getDefaultReactHost(applicationContext, reactNativeHost)
 
   override fun onCreate() {
     super.onCreate()
-    SoLoader.init(this, false)
+    loadReactNative(this)
-    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-      // If you opted-in for the New Architecture, we load the native entry point for this app.
-      load()
-    }
   }
 }

android/build.gradle

@@ -1,11 +1,11 @@
 buildscript {
     ext {
-        buildToolsVersion = "34.0.0"
+        buildToolsVersion = "37.0.0"
-        minSdkVersion = 23
+        minSdkVersion = 24
-        compileSdkVersion = 34
+        compileSdkVersion = 37
-        targetSdkVersion = 34
+        targetSdkVersion = 36
-        ndkVersion = "26.1.10909125"
+        ndkVersion = "27.1.12297006"
-        kotlinVersion = "1.9.24"
+        kotlinVersion = "2.2.0"
     }
     repositories {
         google()

android/gradle.properties

@@ -32,8 +32,18 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=false
+newArchEnabled=true
 
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.
 hermesEnabled=true
+
+# Use this property to enable edge-to-edge display support.
+# This allows your app to draw behind system bars for an immersive UI.
+# Note: Only works with ReactActivity and should not be used with custom Activity.
+edgeToEdgeEnabled=true
+
+# Opt out of built-in kotlin and new DSL behavior that ships with AGP 9.
+# Starting from AGP 10.x these opt outs will be removed.
+android.builtInKotlin=false
+android.newDsl=false

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.4.1-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

android/gradlew

@@ -1,7 +1,7 @@
 #!/bin/sh
 
 #
-# Copyright © 2015-2021 the original authors.
+# Copyright © 2015 the original authors.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -15,6 +15,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 #
+# SPDX-License-Identifier: Apache-2.0
+#
 
 ##############################################################################
 #
@@ -55,7 +57,7 @@
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       https://github.com/gradle/gradle/blob/2d6327017519d23b96af35865dc997fcb544fb40/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
 #       within the Gradle project.
 #
 #       You can find Gradle at https://github.com/gradle/gradle/.
@@ -84,7 +86,7 @@ done
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
 # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
-APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
@@ -112,7 +114,6 @@ case "$( uname )" in                #(
   NONSTOP* )        nonstop=true ;;
 esac
 
-CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
 
 # Determine the Java command to use to start the JVM.
@@ -170,7 +171,6 @@ fi
 # For Cygwin or MSYS, switch paths to Windows format before running java
 if "$cygwin" || "$msys" ; then
     APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
-    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
 
     JAVACMD=$( cygpath --unix "$JAVACMD" )
 
@@ -203,15 +203,14 @@ fi
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
 # Collect all arguments for the java command:
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
 #     and any embedded shellness will be escaped.
 #   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
 #     treated as '${Hostname}' itself on the command line.
 
 set -- \
         "-Dorg.gradle.appname=$APP_BASE_NAME" \
-        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
-        org.gradle.wrapper.GradleWrapperMain \
         "$@"
 
 # Stop when "xargs" is not available.

android/gradlew.bat

@@ -1,3 +1,8 @@
+@REM Copyright (c) Meta Platforms, Inc. and affiliates.
+@REM
+@REM This source code is licensed under the MIT license found in the
+@REM LICENSE file in the root directory of this source tree.
+
 @rem
 @rem Copyright 2015 the original author or authors.
 @rem
@@ -13,6 +18,8 @@
 @rem See the License for the specific language governing permissions and
 @rem limitations under the License.
 @rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
 
 @if "%DEBUG%"=="" @echo off
 @rem ##########################################################################
@@ -68,11 +75,10 @@ goto fail
 :execute
 @rem Setup the command line
 
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
 
 @rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
 
 :end
 @rem End local scope for the variables with windows NT shell

babel.config.js

@@ -1,3 +1,9 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    ['module:react-native-dotenv', {
+      moduleName: '@env',
+      path: '.env',
+    }]
+  ]
 };

ios/CaregiverApp.xcodeproj/project.pbxproj

@@ -7,55 +7,26 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
-		00E356F31AD99517003FC87E /* CaregiverAppTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* CaregiverAppTests.m */; };
 		0C80B921A6F3F58F76C31292 /* libPods-CaregiverApp.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5DCACB8F33CDC322A6C60F78 /* libPods-CaregiverApp.a */; };
-		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
-		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
+		761780ED2CA45674006654EE /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 761780EC2CA45674006654EE /* AppDelegate.swift */; };
-		7699B88040F8A987B510C191 /* libPods-CaregiverApp-CaregiverAppTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-CaregiverApp-CaregiverAppTests.a */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
 /* End PBXBuildFile section */
 
-/* Begin PBXContainerItemProxy section */
-		00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
-			proxyType = 1;
-			remoteGlobalIDString = 13B07F861A680F5B00A75B9A;
-			remoteInfo = CaregiverApp;
-		};
-/* End PBXContainerItemProxy section */
-
 /* Begin PBXFileReference section */
-		00E356EE1AD99517003FC87E /* CaregiverAppTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = CaregiverAppTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
-		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
-		00E356F21AD99517003FC87E /* CaregiverAppTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = CaregiverAppTests.m; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* CaregiverApp.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = CaregiverApp.app; sourceTree = BUILT_PRODUCTS_DIR; };
-		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = CaregiverApp/AppDelegate.h; sourceTree = "<group>"; };
-		13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = CaregiverApp/AppDelegate.mm; sourceTree = "<group>"; };
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = CaregiverApp/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = CaregiverApp/Info.plist; sourceTree = "<group>"; };
-		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = CaregiverApp/main.m; sourceTree = "<group>"; };
 		13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = PrivacyInfo.xcprivacy; path = CaregiverApp/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
-		19F6CBCC0A4E27FBF8BF4A61 /* libPods-CaregiverApp-CaregiverAppTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-CaregiverApp-CaregiverAppTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		3B4392A12AC88292D35C810B /* Pods-CaregiverApp.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-CaregiverApp.debug.xcconfig"; path = "Target Support Files/Pods-CaregiverApp/Pods-CaregiverApp.debug.xcconfig"; sourceTree = "<group>"; };
 		5709B34CF0A7D63546082F79 /* Pods-CaregiverApp.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-CaregiverApp.release.xcconfig"; path = "Target Support Files/Pods-CaregiverApp/Pods-CaregiverApp.release.xcconfig"; sourceTree = "<group>"; };
-		5B7EB9410499542E8C5724F5 /* Pods-CaregiverApp-CaregiverAppTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-CaregiverApp-CaregiverAppTests.debug.xcconfig"; path = "Target Support Files/Pods-CaregiverApp-CaregiverAppTests/Pods-CaregiverApp-CaregiverAppTests.debug.xcconfig"; sourceTree = "<group>"; };
 		5DCACB8F33CDC322A6C60F78 /* libPods-CaregiverApp.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-CaregiverApp.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		761780EC2CA45674006654EE /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = CaregiverApp/AppDelegate.swift; sourceTree = "<group>"; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = CaregiverApp/LaunchScreen.storyboard; sourceTree = "<group>"; };
-		89C6BE57DB24E9ADA2F236DE /* Pods-CaregiverApp-CaregiverAppTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-CaregiverApp-CaregiverAppTests.release.xcconfig"; path = "Target Support Files/Pods-CaregiverApp-CaregiverAppTests/Pods-CaregiverApp-CaregiverAppTests.release.xcconfig"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
-		00E356EB1AD99517003FC87E /* Frameworks */ = {
-			isa = PBXFrameworksBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				7699B88040F8A987B510C191 /* libPods-CaregiverApp-CaregiverAppTests.a in Frameworks */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
 		13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
@@ -67,32 +38,13 @@
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
-		00E356EF1AD99517003FC87E /* CaregiverAppTests */ = {
-			isa = PBXGroup;
-			children = (
-				00E356F21AD99517003FC87E /* CaregiverAppTests.m */,
-				00E356F01AD99517003FC87E /* Supporting Files */,
-			);
-			path = CaregiverAppTests;
-			sourceTree = "<group>";
-		};
-		00E356F01AD99517003FC87E /* Supporting Files */ = {
-			isa = PBXGroup;
-			children = (
-				00E356F11AD99517003FC87E /* Info.plist */,
-			);
-			name = "Supporting Files";
-			sourceTree = "<group>";
-		};
 		13B07FAE1A68108700A75B9A /* CaregiverApp */ = {
 			isa = PBXGroup;
 			children = (
-				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
-				13B07FB01A68108700A75B9A /* AppDelegate.mm */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
+				761780EC2CA45674006654EE /* AppDelegate.swift */,
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */,
-				13B07FB71A68108700A75B9A /* main.m */,
 				13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */,
 			);
 			name = CaregiverApp;
@@ -103,7 +55,6 @@
 			children = (
 				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
 				5DCACB8F33CDC322A6C60F78 /* libPods-CaregiverApp.a */,
-				19F6CBCC0A4E27FBF8BF4A61 /* libPods-CaregiverApp-CaregiverAppTests.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -120,7 +71,6 @@
 			children = (
 				13B07FAE1A68108700A75B9A /* CaregiverApp */,
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
-				00E356EF1AD99517003FC87E /* CaregiverAppTests */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
 				BBD78D7AC51CEA395F1C20DB /* Pods */,
@@ -134,7 +84,6 @@
 			isa = PBXGroup;
 			children = (
 				13B07F961A680F5B00A75B9A /* CaregiverApp.app */,
-				00E356EE1AD99517003FC87E /* CaregiverAppTests.xctest */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -144,8 +93,6 @@
 			children = (
 				3B4392A12AC88292D35C810B /* Pods-CaregiverApp.debug.xcconfig */,
 				5709B34CF0A7D63546082F79 /* Pods-CaregiverApp.release.xcconfig */,
-				5B7EB9410499542E8C5724F5 /* Pods-CaregiverApp-CaregiverAppTests.debug.xcconfig */,
-				89C6BE57DB24E9ADA2F236DE /* Pods-CaregiverApp-CaregiverAppTests.release.xcconfig */,
 			);
 			path = Pods;
 			sourceTree = "<group>";
@@ -153,27 +100,6 @@
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
-		00E356ED1AD99517003FC87E /* CaregiverAppTests */ = {
-			isa = PBXNativeTarget;
-			buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "CaregiverAppTests" */;
-			buildPhases = (
-				A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */,
-				00E356EA1AD99517003FC87E /* Sources */,
-				00E356EB1AD99517003FC87E /* Frameworks */,
-				00E356EC1AD99517003FC87E /* Resources */,
-				C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */,
-				F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */,
-			);
-			buildRules = (
-			);
-			dependencies = (
-				00E356F51AD99517003FC87E /* PBXTargetDependency */,
-			);
-			name = CaregiverAppTests;
-			productName = CaregiverAppTests;
-			productReference = 00E356EE1AD99517003FC87E /* CaregiverAppTests.xctest */;
-			productType = "com.apple.product-type.bundle.unit-test";
-		};
 		13B07F861A680F5B00A75B9A /* CaregiverApp */ = {
 			isa = PBXNativeTarget;
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "CaregiverApp" */;
@@ -203,10 +129,6 @@
 			attributes = {
 				LastUpgradeCheck = 1210;
 				TargetAttributes = {
-					00E356ED1AD99517003FC87E = {
-						CreatedOnToolsVersion = 6.2;
-						TestTargetID = 13B07F861A680F5B00A75B9A;
-					};
 					13B07F861A680F5B00A75B9A = {
 						LastSwiftMigration = 1120;
 					};
@@ -226,19 +148,11 @@
 			projectRoot = "";
 			targets = (
 				13B07F861A680F5B00A75B9A /* CaregiverApp */,
-				00E356ED1AD99517003FC87E /* CaregiverAppTests */,
 			);
 		};
 /* End PBXProject section */
 
 /* Begin PBXResourcesBuildPhase section */
-		00E356EC1AD99517003FC87E /* Resources */ = {
-			isa = PBXResourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
 		13B07F8E1A680F5B00A75B9A /* Resources */ = {
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
@@ -265,7 +179,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "set -e\n\nWITH_ENVIRONMENT=\"$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"$REACT_NATIVE_PATH/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n";
+			shellScript = "set -e\n\nWITH_ENVIRONMENT=\"$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"$REACT_NATIVE_PATH/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"\\\"$WITH_ENVIRONMENT\\\" \\\"$REACT_NATIVE_XCODE\\\"\"\n";
 		};
 		00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -284,28 +198,6 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-CaregiverApp/Pods-CaregiverApp-frameworks.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputFileListPaths = (
-			);
-			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
-			outputFileListPaths = (
-			);
-			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-CaregiverApp-CaregiverAppTests-checkManifestLockResult.txt",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
-			showEnvVarsInLog = 0;
-		};
 		C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -328,23 +220,6 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-CaregiverApp-CaregiverAppTests/Pods-CaregiverApp-CaregiverAppTests-frameworks-${CONFIGURATION}-input-files.xcfilelist",
-			);
-			name = "[CP] Embed Pods Frameworks";
-			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-CaregiverApp-CaregiverAppTests/Pods-CaregiverApp-CaregiverAppTests-frameworks-${CONFIGURATION}-output-files.xcfilelist",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-CaregiverApp-CaregiverAppTests/Pods-CaregiverApp-CaregiverAppTests-frameworks.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
 		E235C05ADACE081382539298 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -362,105 +237,20 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-CaregiverApp/Pods-CaregiverApp-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-CaregiverApp-CaregiverAppTests/Pods-CaregiverApp-CaregiverAppTests-resources-${CONFIGURATION}-input-files.xcfilelist",
-			);
-			name = "[CP] Copy Pods Resources";
-			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-CaregiverApp-CaregiverAppTests/Pods-CaregiverApp-CaregiverAppTests-resources-${CONFIGURATION}-output-files.xcfilelist",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-CaregiverApp-CaregiverAppTests/Pods-CaregiverApp-CaregiverAppTests-resources.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
 /* End PBXShellScriptBuildPhase section */
 
 /* Begin PBXSourcesBuildPhase section */
-		00E356EA1AD99517003FC87E /* Sources */ = {
-			isa = PBXSourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				00E356F31AD99517003FC87E /* CaregiverAppTests.m in Sources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
 		13B07F871A680F5B00A75B9A /* Sources */ = {
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */,
+				761780ED2CA45674006654EE /* AppDelegate.swift in Sources */,
-				13B07FC11A68108700A75B9A /* main.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
 /* End PBXSourcesBuildPhase section */
 
-/* Begin PBXTargetDependency section */
-		00E356F51AD99517003FC87E /* PBXTargetDependency */ = {
-			isa = PBXTargetDependency;
-			target = 13B07F861A680F5B00A75B9A /* CaregiverApp */;
-			targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */;
-		};
-/* End PBXTargetDependency section */
-
 /* Begin XCBuildConfiguration section */
-		00E356F61AD99517003FC87E /* Debug */ = {
-			isa = XCBuildConfiguration;
-			baseConfigurationReference = 5B7EB9410499542E8C5724F5 /* Pods-CaregiverApp-CaregiverAppTests.debug.xcconfig */;
-			buildSettings = {
-				BUNDLE_LOADER = "$(TEST_HOST)";
-				GCC_PREPROCESSOR_DEFINITIONS = (
-					"DEBUG=1",
-					"$(inherited)",
-				);
-				INFOPLIST_FILE = CaregiverAppTests/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 13.4;
-				LD_RUNPATH_SEARCH_PATHS = (
-					"$(inherited)",
-					"@executable_path/Frameworks",
-					"@loader_path/Frameworks",
-				);
-				OTHER_LDFLAGS = (
-					"-ObjC",
-					"-lc++",
-					"$(inherited)",
-				);
-				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/CaregiverApp.app/CaregiverApp";
-			};
-			name = Debug;
-		};
-		00E356F71AD99517003FC87E /* Release */ = {
-			isa = XCBuildConfiguration;
-			baseConfigurationReference = 89C6BE57DB24E9ADA2F236DE /* Pods-CaregiverApp-CaregiverAppTests.release.xcconfig */;
-			buildSettings = {
-				BUNDLE_LOADER = "$(TEST_HOST)";
-				COPY_PHASE_STRIP = NO;
-				INFOPLIST_FILE = CaregiverAppTests/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 13.4;
-				LD_RUNPATH_SEARCH_PATHS = (
-					"$(inherited)",
-					"@executable_path/Frameworks",
-					"@loader_path/Frameworks",
-				);
-				OTHER_LDFLAGS = (
-					"-ObjC",
-					"-lc++",
-					"$(inherited)",
-				);
-				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/CaregiverApp.app/CaregiverApp";
-			};
-			name = Release;
-		};
 		13B07F941A680F5B00A75B9A /* Debug */ = {
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = 3B4392A12AC88292D35C810B /* Pods-CaregiverApp.debug.xcconfig */;
@@ -470,6 +260,7 @@
 				CURRENT_PROJECT_VERSION = 1;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = CaregiverApp/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -482,8 +273,10 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = CaregiverApp;
+				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -496,6 +289,7 @@
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
 				INFOPLIST_FILE = CaregiverApp/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -508,7 +302,9 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = CaregiverApp;
+				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;
@@ -562,7 +358,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 13.4;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
 				LD_RUNPATH_SEARCH_PATHS = (
 					/usr/lib/swift,
 					"$(inherited)",
@@ -628,7 +424,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 13.4;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
 				LD_RUNPATH_SEARCH_PATHS = (
 					/usr/lib/swift,
 					"$(inherited)",
@@ -655,15 +451,6 @@
 /* End XCBuildConfiguration section */
 
 /* Begin XCConfigurationList section */
-		00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "CaregiverAppTests" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				00E356F61AD99517003FC87E /* Debug */,
-				00E356F71AD99517003FC87E /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
 		13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "CaregiverApp" */ = {
 			isa = XCConfigurationList;
 			buildConfigurations = (

ios/CaregiverApp/AppDelegate.h

@@ -1,6 +0,0 @@
-#import <RCTAppDelegate.h>
-#import <UIKit/UIKit.h>
-
-@interface AppDelegate : RCTAppDelegate
-
-@end

ios/CaregiverApp/AppDelegate.mm

@@ -1,31 +0,0 @@
-#import "AppDelegate.h"
-
-#import <React/RCTBundleURLProvider.h>
-
-@implementation AppDelegate
-
-- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
-{
-  self.moduleName = @"CaregiverApp";
-  // You can add your custom initial props in the dictionary below.
-  // They will be passed down to the ViewController used by React Native.
-  self.initialProps = @{};
-
-  return [super application:application didFinishLaunchingWithOptions:launchOptions];
-}
-
-- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-{
-  return [self bundleURL];
-}
-
-- (NSURL *)bundleURL
-{
-#if DEBUG
-  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
-#else
-  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-#endif
-}
-
-@end

ios/CaregiverApp/AppDelegate.swift

@@ -0,0 +1,48 @@
+import UIKit
+import React
+import React_RCTAppDelegate
+import ReactAppDependencyProvider
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+  var window: UIWindow?
+
+  var reactNativeDelegate: ReactNativeDelegate?
+  var reactNativeFactory: RCTReactNativeFactory?
+
+  func application(
+    _ application: UIApplication,
+    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
+  ) -> Bool {
+    let delegate = ReactNativeDelegate()
+    let factory = RCTReactNativeFactory(delegate: delegate)
+    delegate.dependencyProvider = RCTAppDependencyProvider()
+
+    reactNativeDelegate = delegate
+    reactNativeFactory = factory
+
+    window = UIWindow(frame: UIScreen.main.bounds)
+
+    factory.startReactNative(
+      withModuleName: "CaregiverApp",
+      in: window,
+      launchOptions: launchOptions
+    )
+
+    return true
+  }
+}
+
+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
+  override func sourceURL(for bridge: RCTBridge) -> URL? {
+    self.bundleURL()
+  }
+
+  override func bundleURL() -> URL? {
+#if DEBUG
+    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
+#else
+    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+#endif
+  }
+}

ios/CaregiverApp/Info.plist

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CADisableMinimumFrameDurationOnPhone</key>
+	<true/>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
@@ -43,8 +45,13 @@
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>

ios/CaregiverApp/main.m

@@ -1,10 +0,0 @@
-#import <UIKit/UIKit.h>
-
-#import "AppDelegate.h"
-
-int main(int argc, char *argv[])
-{
-  @autoreleasepool {
-    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
-  }
-}

ios/CaregiverAppTests/CaregiverAppTests.m

@@ -1,66 +0,0 @@
-#import <UIKit/UIKit.h>
-#import <XCTest/XCTest.h>
-
-#import <React/RCTLog.h>
-#import <React/RCTRootView.h>
-
-#define TIMEOUT_SECONDS 600
-#define TEXT_TO_LOOK_FOR @"Welcome to React"
-
-@interface CaregiverAppTests : XCTestCase
-
-@end
-
-@implementation CaregiverAppTests
-
-- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test
-{
-  if (test(view)) {
-    return YES;
-  }
-  for (UIView *subview in [view subviews]) {
-    if ([self findSubviewInView:subview matching:test]) {
-      return YES;
-    }
-  }
-  return NO;
-}
-
-- (void)testRendersWelcomeScreen
-{
-  UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
-  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
-  BOOL foundElement = NO;
-
-  __block NSString *redboxError = nil;
-#ifdef DEBUG
-  RCTSetLogFunction(
-      ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
-        if (level >= RCTLogLevelError) {
-          redboxError = message;
-        }
-      });
-#endif
-
-  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
-    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
-    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
-
-    foundElement = [self findSubviewInView:vc.view
-                                  matching:^BOOL(UIView *view) {
-                                    if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
-                                      return YES;
-                                    }
-                                    return NO;
-                                  }];
-  }
-
-#ifdef DEBUG
-  RCTSetLogFunction(RCTDefaultLogFunction);
-#endif
-
-  XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
-  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
-}
-
-@end

ios/CaregiverAppTests/Info.plist

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>$(PRODUCT_NAME)</string>
-	<key>CFBundlePackageType</key>
-	<string>BNDL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>1</string>
-</dict>
-</plist>

ios/Podfile

@@ -23,13 +23,7 @@ target 'CaregiverApp' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
-  target 'CaregiverAppTests' do
-    inherit! :complete
-    # Pods for testing
-  end
-
   post_install do |installer|
-    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
     react_native_post_install(
       installer,
       config[:reactNativePath],

nativewind-env.d.ts

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

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "CaregiverApp",
+  "name": "Caregiver",
   "version": "0.0.1",
   "private": true,
   "scripts": {
@@ -10,24 +10,41 @@
     "test": "jest"
   },
   "dependencies": {
-    "react": "18.3.1",
+    "@react-native-async-storage/async-storage": "^3.1.1",
-    "react-native": "0.75.4"
+    "@react-native-community/datetimepicker": "^9.1.0",
+    "@react-navigation/bottom-tabs": "^7.18.16",
+    "@react-navigation/native": "^7.3.16",
+    "@react-navigation/native-stack": "^7.18.8",
+    "@types/react-native-dotenv": "^0.2.2",
+    "axios": "^1.19.0",
+    "lucide-react-native": "^1.31.0",
+    "react": "^19.2.3",
+    "react-native": "0.87.0",
+    "react-native-dotenv": "^4.1.1",
+    "react-native-image-picker": "^8.2.1",
+    "react-native-safe-area-context": "^5.8.1",
+    "react-native-screens": "^4.27.0",
+    "react-native-svg": "^15.15.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
-    "@react-native/babel-preset": "0.75.4",
+    "@react-native-community/cli": "20.2.0",
-    "@react-native/eslint-config": "0.75.4",
+    "@react-native-community/cli-platform-android": "20.2.0",
-    "@react-native/metro-config": "0.75.4",
+    "@react-native-community/cli-platform-ios": "20.2.0",
-    "@react-native/typescript-config": "0.75.4",
+    "@react-native/babel-preset": "0.87.0",
-    "@types/react": "^18.2.6",
+    "@react-native/eslint-config": "0.87.0",
-    "@types/react-test-renderer": "^18.0.0",
+    "@react-native/gradle-plugin": "^0.87.0",
+    "@react-native/metro-config": "0.87.0",
+    "@react-native/typescript-config": "0.87.0",
+    "@types/react": "^19.1.1",
+    "@types/react-test-renderer": "^19.1.0",
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
-    "react-test-renderer": "18.3.1",
+    "react-test-renderer": "19.2.3",
     "typescript": "5.0.4"
   },
   "engines": {

src/assets/index.ts

@@ -0,0 +1,8 @@
+/**
+ * This file is a central export point for all assets (images, icons, etc.)
+ * Example:
+ * export const Logo = require('./images/logo.png');
+ * export const Icons = { home: require('./icons/home.png') };
+ */
+
+export {};

src/components/ui/Button.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { TouchableOpacity, TouchableOpacityProps, ActivityIndicator, GestureResponderEvent, StyleProp, ViewStyle, StyleSheet } from 'react-native';
+import { Typography } from './Typography';
+
+interface ButtonProps extends TouchableOpacityProps {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  title: string;
+  loading?: boolean;
+  onPress?: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  title,
+  loading = false,
+  disabled,
+  style,
+  ...props
+}) => {
+  const getBackgroundStyle = () => {
+    if (disabled) return styles.bgDisabled;
+    switch (variant) {
+      case 'primary':
+        return styles.bgPrimary;
+      case 'secondary':
+        return styles.bgSecondary;
+      case 'outline':
+        return styles.bgOutline;
+      case 'ghost':
+        return styles.bgGhost;
+      default:
+        return styles.bgPrimary;
+    }
+  };
+
+  const getTextStyle = () => {
+    if (disabled) return styles.textDisabled;
+    switch (variant) {
+      case 'primary':
+      case 'secondary':
+        return styles.textWhite;
+      case 'outline':
+      case 'ghost':
+        return styles.textPrimary;
+      default:
+        return styles.textWhite;
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, getBackgroundStyle(), style]}
+      disabled={disabled || loading}
+      activeOpacity={0.8}
+      {...props}
+    >
+      {loading ? (
+        <ActivityIndicator color={variant === 'outline' || variant === 'ghost' ? '#4F46E5' : '#FFFFFF'} />
+      ) : (
+        <Typography weight="medium" style={getTextStyle()}>
+          {title}
+        </Typography>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bgDisabled: {
+    backgroundColor: '#D1D5DB',
+  },
+  bgPrimary: {
+    backgroundColor: '#4F46E5',
+  },
+  bgSecondary: {
+    backgroundColor: '#10B981',
+  },
+  bgOutline: {
+    backgroundColor: 'transparent',
+    borderColor: '#4F46E5',
+    borderWidth: 2,
+  },
+  bgGhost: {
+    backgroundColor: 'transparent',
+  },
+  textDisabled: {
+    color: '#6B7280',
+  },
+  textWhite: {
+    color: '#FFFFFF',
+  },
+  textPrimary: {
+    color: '#4F46E5',
+  },
+});

src/components/ui/Card.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, ViewProps, StyleProp, ViewStyle, StyleSheet } from 'react-native';
+
+interface CardProps extends ViewProps {
+  children: React.ReactNode;
+  noPadding?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const Card: React.FC<CardProps> = ({
+  children,
+  noPadding = false,
+  style,
+  ...props
+}) => {
+  return (
+    <View
+      style={[
+        styles.card,
+        noPadding ? null : styles.padding,
+        style
+      ]}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: '#F3F4F6', // gray-100
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 15,
+    elevation: 2,
+  },
+  padding: {
+    padding: 16, // p-4
+  }
+});

src/components/ui/Header.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { ChevronLeft } from 'lucide-react-native';
+import { Typography } from './Typography';
+import { useResponsiveLayout } from '../../hooks/useResponsiveLayout';
+import { THEME } from '../../constants/theme';
+
+interface HeaderProps {
+  title: string;
+  showBack?: boolean;
+  rightComponent?: React.ReactNode;
+}
+
+export const Header: React.FC<HeaderProps> = ({ title, showBack = false, rightComponent }) => {
+  const navigation = useNavigation();
+  const { screenPadding } = useResponsiveLayout();
+
+  return (
+    <View style={[styles.header, { paddingHorizontal: screenPadding }]}>
+      <View style={styles.leftContainer}>
+        {showBack && (
+          <TouchableOpacity 
+            onPress={() => navigation.goBack()} 
+            style={styles.backButton}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <ChevronLeft color="#FFF" size={26} strokeWidth={2.5} />
+          </TouchableOpacity>
+        )}
+        <Typography variant="h3" weight="bold" style={styles.title}>
+          {title}
+        </Typography>
+      </View>
+      {rightComponent && (
+        <View style={styles.rightContainer}>
+          {rightComponent}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: THEME.colors.primary, // Primary brand color
+  },
+  leftContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rightContainer: {
+    justifyContent: 'center',
+  },
+  backButton: {
+    marginRight: 12,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    color: '#FFFFFF',
+  }
+});

src/components/ui/Input.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { TextInput, TextInputProps, View, StyleSheet } from 'react-native';
+import { Typography } from './Typography';
+
+export interface InputProps extends TextInputProps {
+  label?: string;
+  error?: string;
+  placeholder?: string;
+  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad';
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  secureTextEntry?: boolean;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  style?: any;
+  labelStyle?: any;
+}
+
+export function Input({ label, error, style, labelStyle, ...props }: InputProps) {
+  return (
+    <View style={styles.container}>
+      {label && (
+        <Typography variant="caption" weight="medium" style={[styles.label, labelStyle]}>
+          {label}
+        </Typography>
+      )}
+      <TextInput
+        style={[
+          styles.input,
+          error ? styles.inputError : null,
+          style,
+        ]}
+        placeholderTextColor="#9CA3AF"
+        {...props}
+      />
+      {error && (
+        <Typography variant="caption" style={styles.errorText}>
+          {error}
+        </Typography>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+    width: '100%',
+  },
+  label: {
+    marginBottom: 6,
+    color: '#374151', // gray-700
+  },
+  input: {
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#D1D5DB', // gray-300
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    fontSize: 16,
+    color: '#111827', // gray-900
+  },
+  inputError: {
+    borderColor: '#EF4444', // red-500
+  },
+  errorText: {
+    color: '#EF4444',
+    marginTop: 4,
+  },
+});

src/components/ui/Typography.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Text, TextProps, StyleProp, TextStyle, StyleSheet } from 'react-native';
+import { useResponsiveLayout } from '../../hooks/useResponsiveLayout';
+
+interface TypographyProps extends TextProps {
+  variant?: 'h1' | 'h2' | 'h3' | 'body' | 'caption';
+  weight?: 'normal' | 'medium' | 'bold';
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export const Typography: React.FC<TypographyProps> = ({
+  variant = 'body',
+  weight = 'normal',
+  children,
+  style,
+  ...props
+}) => {
+  const { scale } = useResponsiveLayout();
+
+  const getVariantStyles = () => {
+    switch (variant) {
+      case 'h1': return styles.h1;
+      case 'h2': return styles.h2;
+      case 'h3': return styles.h3;
+      case 'caption': return styles.caption;
+      case 'body':
+      default: return styles.body;
+    }
+  };
+
+  const getWeightStyles = () => {
+    switch (weight) {
+      case 'bold': return styles.bold;
+      case 'medium': return styles.medium;
+      case 'normal':
+      default: return styles.normal;
+    }
+  };
+
+  const variantStyle = StyleSheet.flatten(getVariantStyles());
+  const scaledStyle = {
+    fontSize: scale(variantStyle.fontSize as number),
+    lineHeight: scale(variantStyle.lineHeight as number),
+  };
+
+  return (
+    <Text
+      style={[variantStyle, scaledStyle, getWeightStyles(), style]}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  h1: {
+    fontSize: 30,
+    lineHeight: 36,
+    color: '#111827', // text-gray-900
+  },
+  h2: {
+    fontSize: 24,
+    lineHeight: 32,
+    color: '#111827', // text-gray-900
+  },
+  h3: {
+    fontSize: 20,
+    lineHeight: 28,
+    color: '#111827', // text-gray-900
+  },
+  body: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: '#111827', // text-gray-900
+  },
+  caption: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: '#6B7280', // text-gray-500
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+  medium: {
+    fontWeight: '500',
+  },
+  normal: {
+    fontWeight: 'normal',
+  },
+});

src/config/env.ts

@@ -0,0 +1,6 @@
+import { API_BASE_URL as ENV_API_BASE_URL, X_API_KEY as ENV_X_API_KEY } from '@env';
+
+export const ENV = {
+  API_BASE_URL: ENV_API_BASE_URL || 'http://localhost:8000',
+  X_API_KEY: ENV_X_API_KEY || '',
+};

src/constants/mockData.ts

@@ -0,0 +1,46 @@
+import { Caregiver } from '../types';
+
+export const CAREGIVERS: Caregiver[] = [
+  {
+    id: '1',
+    name: 'Sarah Jenkins',
+    role: 'Registered Nurse',
+    rating: 4.8,
+    reviews: 124,
+    experienceYears: 5,
+    about: 'Sarah is a dedicated and compassionate Registered Nurse with over 5 years of experience in providing specialized elder care. She is certified in CPR and First Aid.',
+    specialties: ['Physical Therapy', 'Dementia Care', 'Medication Management'],
+    availability: {
+      weekdays: '8:00 AM - 6:00 PM',
+      weekends: 'Upon request',
+    },
+  },
+  {
+    id: '2',
+    name: 'Michael Chen',
+    role: 'Elder Care Specialist',
+    rating: 4.9,
+    reviews: 89,
+    experienceYears: 8,
+    about: 'Michael has a deep understanding of geriatric care and specializes in creating engaging daily routines for seniors. He speaks fluent Mandarin and English.',
+    specialties: ['Mobility Assistance', 'Meal Preparation', 'Companionship'],
+    availability: {
+      weekdays: '9:00 AM - 5:00 PM',
+      weekends: 'Available',
+    },
+  },
+  {
+    id: '3',
+    name: 'Emma Davis',
+    role: 'Physical Therapist',
+    rating: 4.7,
+    reviews: 156,
+    experienceYears: 3,
+    about: 'Emma is a certified Physical Therapist focusing on post-surgery recovery and mobility improvement for elderly patients.',
+    specialties: ['Post-surgery Care', 'Physical Therapy', 'Pain Management'],
+    availability: {
+      weekdays: 'Flexible',
+      weekends: 'Not available',
+    },
+  },
+];

src/constants/theme.ts

@@ -0,0 +1,23 @@
+export const THEME = {
+  colors: {
+    primary: 'navy',
+    primaryLight: '#E0E7FF',
+    primaryLighter: '#EEF2FF',
+    background: '#F9FAFB',
+    surface: '#FFFFFF',
+    text: {
+      primary: '#111827',
+      secondary: '#6B7280',
+      muted: '#9CA3AF',
+    },
+    border: '#F3F4F6',
+    warning: '#EAB308',
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+  }
+};

src/hooks/useCaregivers.ts

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { Caregiver } from '../types';
+import { CAREGIVERS } from '../constants/mockData';
+
+export const useCaregivers = () => {
+  const [caregivers, setCaregivers] = useState<Caregiver[]>(CAREGIVERS);
+  const [isLoading, setIsLoading] = useState(false);
+
+  return { caregivers, isLoading };
+};
+
+export const useCaregiver = (id: string) => {
+  const [caregiver, setCaregiver] = useState<Caregiver | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const found = CAREGIVERS.find((c) => c.id === id) || null;
+    setCaregiver(found);
+    setIsLoading(false);
+  }, [id]);
+
+  return { caregiver, isLoading };
+};

src/hooks/useFetch.ts

@@ -0,0 +1,47 @@
+import { useState, useEffect, useCallback } from 'react';
+
+interface UseFetchResult<T> {
+  data: T | null;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+}
+
+/**
+ * A generic hook for making API calls.
+ * 
+ * @param url The API endpoint to fetch
+ * @param options Optional fetch configuration (headers, method, etc.)
+ * @returns { data, isLoading, error, refetch }
+ */
+export function useFetch<T = any>(url: string, options?: RequestInit): UseFetchResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const response = await fetch(url, options);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      
+      const json = await response.json();
+      setData(json as T);
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error('An unknown error occurred'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [url, options]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, isLoading, error, refetch: fetchData };
+}

src/hooks/useResponsiveLayout.ts

@@ -0,0 +1,24 @@
+import { useWindowDimensions, Platform } from 'react-native';
+
+export const useResponsiveLayout = () => {
+  const { width, height } = useWindowDimensions();
+
+  // iPads and large Android tablets are typically 768px or wider
+  const isTablet = width >= 768;
+  const isLandscape = width > height;
+
+  // Responsive padding based on device type
+  const screenPadding = isTablet ? 32 : 16;
+
+  // Function to slightly scale sizes on tablet
+  const scale = (size: number) => (isTablet ? size * 1.25 : size);
+
+  return {
+    width,
+    height,
+    isTablet,
+    isLandscape,
+    screenPadding,
+    scale,
+  };
+};

src/navigation/AppNavigator.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Home, Calendar, Settings } from 'lucide-react-native';
+
+import { HomeScreen } from '../screens/HomeScreen';
+import { ProfileScreen } from '../screens/ProfileScreen';
+import { AppointmentsScreen } from '../screens/AppointmentsScreen';
+import { SettingsScreen } from '../screens/SettingsScreen';
+import { LoginScreen } from '../screens/LoginScreen';
+import { PersonalInformationScreen } from '../screens/PersonalInformationScreen';
+import { ManageSkillsScreen } from '../screens/ManageSkillsScreen';
+import { AddSkillScreen } from '../screens/AddSkillScreen';
+import { AvailabilityListScreen } from '../screens/AvailabilityListScreen';
+import { AddAvailabilityScreen } from '../screens/AddAvailabilityScreen';
+import { EditAvailabilityScreen } from '../screens/EditAvailabilityScreen';
+
+export type RootStackParamList = {
+  Login: undefined;
+  MainTabs: undefined;
+  Profile: { caregiverId: string };
+  PersonalInformation: undefined;
+  ManageSkills: undefined;
+  AddSkill: undefined;
+  AvailabilityList: undefined;
+  AddAvailability: undefined;
+  EditAvailability: { 
+    day_of_week: string; 
+    start_time: string; 
+    end_time: string; 
+  };
+};
+
+export type TabParamList = {
+  HomeTab: undefined;
+  Appointments: undefined;
+  Settings: undefined;
+};
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+const Tab = createBottomTabNavigator<TabParamList>();
+
+function MainTabs() {
+  return (
+    <Tab.Navigator
+      id={undefined}
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: '#FFFFFF',
+          borderTopWidth: 0,
+          elevation: 0,
+          shadowOpacity: 0,
+          height: 60,
+          paddingBottom: 8,
+          paddingTop: 8,
+        },
+        tabBarActiveTintColor: 'navy', // Primary color
+        tabBarInactiveTintColor: '#9CA3AF',
+      }}
+    >
+      <Tab.Screen 
+        name="HomeTab" 
+        component={HomeScreen} 
+        options={{
+          tabBarLabel: 'Home',
+          tabBarIcon: ({ color, size }) => <Home color={color} size={size} />,
+        }}
+      />
+      <Tab.Screen 
+        name="Appointments" 
+        component={AppointmentsScreen} 
+        options={{
+          tabBarLabel: 'Appointments',
+          tabBarIcon: ({ color, size }) => <Calendar color={color} size={size} />,
+        }}
+      />
+      <Tab.Screen 
+        name="Settings" 
+        component={SettingsScreen} 
+        options={{
+          tabBarLabel: 'Settings',
+          tabBarIcon: ({ color, size }) => <Settings color={color} size={size} />,
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+
+const MyTheme = {
+  ...DefaultTheme,
+  colors: {
+    ...DefaultTheme.colors,
+    background: '#F9FAFB',
+  },
+};
+
+export const AppNavigator = () => {
+  return (
+    <NavigationContainer theme={MyTheme}>
+      <Stack.Navigator
+        id={undefined}
+        initialRouteName="Login"
+        screenOptions={{
+          headerShown: false,
+          contentStyle: { backgroundColor: '#F9FAFB' }
+        }}
+      >
+        <Stack.Screen name="Login" component={LoginScreen} />
+        <Stack.Screen name="MainTabs" component={MainTabs} />
+        <Stack.Screen name="Profile" component={ProfileScreen} />
+        <Stack.Screen name="PersonalInformation" component={PersonalInformationScreen} />
+        <Stack.Screen name="ManageSkills" component={ManageSkillsScreen} />
+        <Stack.Screen name="AddSkill" component={AddSkillScreen} />
+        <Stack.Screen name="AvailabilityList" component={AvailabilityListScreen} />
+        <Stack.Screen name="AddAvailability" component={AddAvailabilityScreen} />
+        <Stack.Screen name="EditAvailability" component={EditAvailabilityScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};

src/screens/AddAvailabilityScreen.tsx

@@ -0,0 +1,271 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, TouchableOpacity, Alert, Platform } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useNavigation } from '@react-navigation/native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { Typography } from '../components/ui/Typography';
+import { Header } from '../components/ui/Header';
+import { profileService } from '../services/profileService';
+import { THEME } from '../constants/theme';
+import { Clock, Calendar, Check } from 'lucide-react-native';
+
+const DAYS_OF_WEEK = [
+  { label: 'Monday', value: 'monday' },
+  { label: 'Tuesday', value: 'tuesday' },
+  { label: 'Wednesday', value: 'wednesday' },
+  { label: 'Thursday', value: 'thursday' },
+  { label: 'Friday', value: 'friday' },
+  { label: 'Saturday', value: 'saturday' },
+  { label: 'Sunday', value: 'sunday' },
+];
+
+export const AddAvailabilityScreen = () => {
+  const navigation = useNavigation();
+  
+  const [selectedDay, setSelectedDay] = useState('monday');
+  const [showDayPicker, setShowDayPicker] = useState(false);
+
+  const [startTime, setStartTime] = useState(new Date(new Date().setHours(9, 0, 0, 0)));
+  const [endTime, setEndTime] = useState(new Date(new Date().setHours(17, 0, 0, 0)));
+  
+  const [showPicker, setShowPicker] = useState(false);
+  const [pickerType, setPickerType] = useState<'start' | 'end'>('start');
+  
+  const [saving, setSaving] = useState(false);
+
+  const openTimePicker = (type: 'start' | 'end') => {
+    setPickerType(type);
+    setShowPicker(true);
+  };
+
+  const handleTimeChange = (event: any, selectedDate?: Date) => {
+    if (Platform.OS === 'android') {
+      setShowPicker(false);
+    }
+    
+    if (event.type === 'dismissed' || !selectedDate) {
+      return;
+    }
+
+    if (pickerType === 'start') {
+      setStartTime(selectedDate);
+    } else {
+      setEndTime(selectedDate);
+    }
+  };
+
+  const formatTime = (date: Date) => {
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${hours}:${minutes}`;
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const payload = {
+        day_of_week: selectedDay,
+        start_time: formatTime(startTime),
+        end_time: formatTime(endTime),
+        is_available: 1
+      };
+
+      // @ts-ignore
+      await profileService.addDayAvailability(payload);
+      Alert.alert('Success', 'Availability added successfully.', [
+        { text: 'OK', onPress: () => navigation.goBack() }
+      ]);
+    } catch (e: any) {
+      Alert.alert('Error', e.response?.data?.message || 'Failed to add availability.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    // @ts-ignore
+    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
+      <Header title="Add Availability" showBack />
+      
+      <View style={styles.content}>
+        <View style={styles.card}>
+          <Typography variant="caption" style={styles.label}>Select Day</Typography>
+          
+          <TouchableOpacity 
+            style={styles.inputBox}
+            onPress={() => setShowDayPicker(!showDayPicker)}
+          >
+            <Calendar color="#6B7280" size={20} />
+            <Typography variant="body" style={styles.inputText}>
+              {DAYS_OF_WEEK.find(d => d.value === selectedDay)?.label}
+            </Typography>
+          </TouchableOpacity>
+
+          {showDayPicker && (
+            <View style={styles.dayPickerDropdown}>
+              {DAYS_OF_WEEK.map(day => (
+                <TouchableOpacity 
+                  key={day.value}
+                  style={[styles.dayOption, selectedDay === day.value && styles.dayOptionSelected]}
+                  onPress={() => {
+                    setSelectedDay(day.value);
+                    setShowDayPicker(false);
+                  }}
+                >
+                  <Typography variant="body" style={selectedDay === day.value ? styles.dayOptionTextSelected : styles.dayOptionText}>
+                    {day.label}
+                  </Typography>
+                  {selectedDay === day.value && <Check color={THEME.colors.primary} size={16} />}
+                </TouchableOpacity>
+              ))}
+            </View>
+          )}
+
+          <View style={styles.timeRow}>
+            <View style={styles.timeColumn}>
+              <Typography variant="caption" style={styles.label}>Start Time</Typography>
+              <TouchableOpacity 
+                style={styles.inputBox}
+                onPress={() => openTimePicker('start')}
+              >
+                <Clock color="#6B7280" size={20} />
+                <Typography variant="body" style={styles.inputText}>
+                  {formatTime(startTime)}
+                </Typography>
+              </TouchableOpacity>
+            </View>
+
+            <View style={styles.timeSpacer} />
+
+            <View style={styles.timeColumn}>
+              <Typography variant="caption" style={styles.label}>End Time</Typography>
+              <TouchableOpacity 
+                style={styles.inputBox}
+                onPress={() => openTimePicker('end')}
+              >
+                <Clock color="#6B7280" size={20} />
+                <Typography variant="body" style={styles.inputText}>
+                  {formatTime(endTime)}
+                </Typography>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <TouchableOpacity 
+          style={styles.saveButton}
+          onPress={handleSave}
+          disabled={saving}
+        >
+          <Typography variant="h3" weight="bold" style={styles.saveButtonText}>
+            {saving ? 'Saving...' : 'Add Day'}
+          </Typography>
+        </TouchableOpacity>
+      </View>
+
+      {showPicker && (
+        <DateTimePicker
+          value={pickerType === 'start' ? startTime : endTime}
+          mode="time"
+          is24Hour={true}
+          display="default"
+          onChange={handleTimeChange}
+        />
+      )}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  card: {
+    backgroundColor: '#FFF',
+    borderRadius: 12,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+  },
+  label: {
+    color: '#6B7280',
+    marginBottom: 8,
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+  },
+  inputBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 8,
+    height: 50,
+    paddingHorizontal: 12,
+    backgroundColor: '#F9FAFB',
+    marginBottom: 20,
+  },
+  inputText: {
+    marginLeft: 12,
+    color: '#111827',
+    fontSize: 16,
+  },
+  dayPickerDropdown: {
+    backgroundColor: '#FFF',
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 8,
+    marginTop: -16,
+    marginBottom: 20,
+    overflow: 'hidden',
+  },
+  dayOption: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F3F4F6',
+  },
+  dayOptionSelected: {
+    backgroundColor: '#EEF2FF',
+  },
+  dayOptionText: {
+    color: '#374151',
+  },
+  dayOptionTextSelected: {
+    color: THEME.colors.primary,
+    fontWeight: 'bold',
+  },
+  timeRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  timeColumn: {
+    flex: 1,
+  },
+  timeSpacer: {
+    width: 16,
+  },
+  footer: {
+    padding: 16,
+    backgroundColor: '#FFF',
+    borderTopWidth: 1,
+    borderTopColor: '#E5E7EB',
+  },
+  saveButton: {
+    backgroundColor: THEME.colors.primary,
+    height: 50,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  saveButtonText: {
+    color: '#FFF',
+  }
+});

src/screens/AddSkillScreen.tsx

@@ -0,0 +1,358 @@
+import React, { useState, useEffect } from 'react';
+import { View, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity, Alert } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useNavigation } from '@react-navigation/native';
+import { Typography } from '../components/ui/Typography';
+import { Header } from '../components/ui/Header';
+import { profileService } from '../services/profileService';
+import { THEME } from '../constants/theme';
+import { Check, Info } from 'lucide-react-native';
+
+export const AddSkillScreen = () => {
+  const navigation = useNavigation();
+  const [ownSkills, setOwnSkills] = useState<any[]>([]);
+  const [careTypes, setCareTypes] = useState<any[]>([]);
+  const [subTypes, setSubTypes] = useState<any[]>([]);
+  
+  const [selectedCareType, setSelectedCareType] = useState<string | null>(null);
+  const [selectedSubTypes, setSelectedSubTypes] = useState<string[]>([]);
+  
+  const [loading, setLoading] = useState(true);
+  const [loadingSubTypes, setLoadingSubTypes] = useState(false);
+  const [isAdding, setIsAdding] = useState(false);
+
+  useEffect(() => {
+    const fetchInitialData = async () => {
+      try {
+        const [skillsData, typesData] = await Promise.all([
+          profileService.getOwnSkills(),
+          profileService.getCareTypes()
+        ]);
+        setOwnSkills(skillsData || []);
+        setCareTypes(typesData || []);
+      } catch (err) {
+        console.error('Failed to load data', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchInitialData();
+  }, []);
+
+  const handleSelectCareType = async (slug: string) => {
+    if (selectedCareType === slug) return;
+    
+    setSelectedCareType(slug);
+    setSelectedSubTypes([]);
+    setLoadingSubTypes(true);
+    
+    try {
+      const data = await profileService.getCareSubTypes(slug);
+      setSubTypes(data || []);
+    } catch (err) {
+      console.error('Failed to load sub types', err);
+      Alert.alert('Error', 'Failed to load sub skills.');
+    } finally {
+      setLoadingSubTypes(false);
+    }
+  };
+
+  const toggleSubType = (slug: string) => {
+    setSelectedSubTypes(prev => {
+      if (prev.includes(slug)) {
+        return prev.filter(s => s !== slug);
+      } else {
+        return [...prev, slug];
+      }
+    });
+  };
+
+  const handleAddSkills = async () => {
+    if (selectedSubTypes.length === 0) return;
+    setIsAdding(true);
+    try {
+      await profileService.addSkills(selectedSubTypes);
+      Alert.alert('Success', 'Skills added successfully!', [
+        { text: 'OK', onPress: () => navigation.goBack() }
+      ]);
+    } catch (e: any) {
+      Alert.alert('Error', e.response?.data?.message || 'Failed to add skills.');
+    } finally {
+      setIsAdding(false);
+    }
+  };
+
+  return (
+    // @ts-ignore
+    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
+      <Header title="Add New Skills" showBack />
+      
+      {loading ? (
+        <View style={styles.centerContent}>
+          <ActivityIndicator size="large" color={THEME.colors.primary} />
+        </View>
+      ) : (
+        <View style={styles.content}>
+          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+            
+            <View style={styles.infoBanner}>
+              <Info color="#1D4ED8" size={20} />
+              <Typography variant="caption" style={styles.infoText}>
+                First select a Care Type category, then tap to select one or multiple Sub Skills.
+              </Typography>
+            </View>
+
+            <View style={styles.section}>
+              <Typography variant="caption" style={styles.label}>1. Select Care Type</Typography>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.horizontalScroll}>
+                {careTypes.map(type => (
+                  <TouchableOpacity
+                    key={type.slug}
+                    style={[styles.chip, selectedCareType === type.slug && styles.chipSelected]}
+                    onPress={() => handleSelectCareType(type.slug)}
+                  >
+                    <Typography 
+                      variant="body" 
+                      style={selectedCareType === type.slug ? styles.chipTextSelected : styles.chipText}
+                    >
+                      {type.name}
+                    </Typography>
+                  </TouchableOpacity>
+                ))}
+              </ScrollView>
+            </View>
+
+            {selectedCareType && (
+              <View style={styles.section}>
+                <Typography variant="caption" style={styles.label}>2. Select Sub Skills</Typography>
+                
+                {loadingSubTypes ? (
+                  <View style={styles.subTypeLoader}>
+                    <ActivityIndicator size="large" color={THEME.colors.primary} />
+                  </View>
+                ) : subTypes.length === 0 ? (
+                  <View style={styles.emptyState}>
+                    <Typography variant="body" style={styles.emptyText}>
+                      No sub-skills found for this category.
+                    </Typography>
+                  </View>
+                ) : (
+                  <View style={styles.subTypeGrid}>
+                    {subTypes.map(subType => {
+                      const isSelected = selectedSubTypes.includes(subType.slug);
+                      const isOwned = ownSkills.some(own => own.slug === subType.slug);
+                      
+                      return (
+                        <TouchableOpacity
+                          key={subType.slug}
+                          disabled={isOwned}
+                          style={[
+                            styles.subTypeCard, 
+                            isSelected && styles.subTypeCardSelected,
+                            isOwned && styles.subTypeCardDisabled
+                          ]}
+                          onPress={() => toggleSubType(subType.slug)}
+                        >
+                          <View style={[styles.checkbox, isSelected && styles.checkboxSelected, isOwned && styles.checkboxDisabled]}>
+                            {(isSelected || isOwned) && <Check color="#FFF" size={14} />}
+                          </View>
+                          <Typography 
+                            variant="caption" 
+                            style={[
+                              styles.subTypeText, 
+                              isSelected && styles.subTypeTextSelected,
+                              isOwned && styles.subTypeTextDisabled
+                            ]}
+                          >
+                            {subType.name}
+                          </Typography>
+                        </TouchableOpacity>
+                      );
+                    })}
+                  </View>
+                )}
+              </View>
+            )}
+            <View style={styles.bottomSpacer} />
+          </ScrollView>
+
+          <View style={styles.footer}>
+            <TouchableOpacity 
+              style={[styles.addButton, selectedSubTypes.length === 0 && styles.addButtonDisabled]} 
+              onPress={handleAddSkills}
+              disabled={selectedSubTypes.length === 0 || isAdding}
+            >
+              {isAdding ? (
+                <ActivityIndicator size="small" color="#FFF" />
+              ) : (
+                <Typography variant="h3" weight="bold" style={styles.addButtonText}>
+                  Add {selectedSubTypes.length > 0 ? selectedSubTypes.length : ''} Skill{selectedSubTypes.length !== 1 ? 's' : ''}
+                </Typography>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F3F4F6',
+  },
+  centerContent: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  infoBanner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#EFF6FF',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#DBEAFE',
+  },
+  infoText: {
+    marginLeft: 12,
+    color: '#1D4ED8',
+    flex: 1,
+  },
+  section: {
+    padding: 16,
+    backgroundColor: '#FFF',
+    marginBottom: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+  },
+  label: {
+    color: '#6B7280',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    marginBottom: 16,
+  },
+  horizontalScroll: {
+    flexDirection: 'row',
+  },
+  chip: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#F3F4F6',
+    borderRadius: 24,
+    marginRight: 12,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+  },
+  chipSelected: {
+    backgroundColor: THEME.colors.primary,
+    borderColor: THEME.colors.primary,
+  },
+  chipText: {
+    color: '#374151',
+    fontWeight: '500',
+  },
+  chipTextSelected: {
+    color: '#FFF',
+    fontWeight: 'bold',
+  },
+  subTypeLoader: {
+    padding: 40,
+    alignItems: 'center',
+  },
+  emptyState: {
+    padding: 24,
+    alignItems: 'center',
+    backgroundColor: '#F9FAFB',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderStyle: 'dashed',
+  },
+  emptyText: {
+    color: '#6B7280',
+    textAlign: 'center',
+  },
+  subTypeGrid: {
+    flexDirection: 'column',
+  },
+  subTypeCard: {
+    backgroundColor: '#F9FAFB',
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  subTypeCardSelected: {
+    backgroundColor: '#EEF2FF',
+    borderColor: THEME.colors.primary,
+  },
+  subTypeCardDisabled: {
+    opacity: 0.6,
+    backgroundColor: '#F3F4F6',
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    borderWidth: 2,
+    borderColor: '#D1D5DB',
+    backgroundColor: '#FFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  checkboxSelected: {
+    backgroundColor: THEME.colors.primary,
+    borderColor: THEME.colors.primary,
+  },
+  checkboxDisabled: {
+    backgroundColor: '#9CA3AF',
+    borderColor: '#9CA3AF',
+  },
+  subTypeText: {
+    flex: 1,
+    color: '#374151',
+    fontSize: 15,
+    lineHeight: 22,
+  },
+  subTypeTextSelected: {
+    color: THEME.colors.primary,
+    fontWeight: 'bold',
+  },
+  subTypeTextDisabled: {
+    color: '#9CA3AF',
+  },
+  bottomSpacer: {
+    height: 20,
+  },
+  footer: {
+    padding: 16,
+    backgroundColor: '#FFF',
+    borderTopWidth: 1,
+    borderTopColor: '#E5E7EB',
+  },
+  addButton: {
+    backgroundColor: THEME.colors.primary,
+    height: 54,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  addButtonDisabled: {
+    backgroundColor: '#9CA3AF',
+  },
+  addButtonText: {
+    color: '#FFF',
+  }
+});

src/screens/AppointmentsScreen.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View, StatusBar, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Typography } from '../components/ui/Typography';
+import { Header } from '../components/ui/Header';
+
+export const AppointmentsScreen = () => {
+  return (
+    // @ts-ignore - TS types for SafeAreaView in this version incorrectly omit the style prop
+    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
+      <Header title="Appointments" showBack />
+      <View style={styles.content}>
+        <Typography variant="body" style={styles.subtitle}>
+          Your upcoming appointments will appear here.
+        </Typography>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  subtitle: {
+    marginTop: 8,
+    textAlign: 'center',
+    color: '#6B7280',
+  }
+});

src/screens/AvailabilityListScreen.tsx

@@ -0,0 +1,243 @@
+import React, { useState, useCallback } from 'react';
+import { View, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { Typography } from '../components/ui/Typography';
+import { Header } from '../components/ui/Header';
+import { profileService, CaregiverAvailability } from '../services/profileService';
+import { THEME } from '../constants/theme';
+import { RootStackParamList } from '../navigation/AppNavigator';
+import { Plus, ChevronRight, Calendar } from 'lucide-react-native';
+
+type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'AvailabilityList'>;
+
+export const AvailabilityListScreen = () => {
+  const navigation = useNavigation<NavigationProp>();
+  const [availability, setAvailability] = useState<CaregiverAvailability[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchAvailability = async () => {
+    setLoading(true);
+    try {
+      const data = await profileService.getAvailability();
+      // Only show days that are available (is_available === 1)
+      const activeDays = data.filter((d: CaregiverAvailability) => d.is_available === 1);
+      
+      // Sort by day of week
+      const dayOrder = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+      activeDays.sort((a: CaregiverAvailability, b: CaregiverAvailability) => {
+        return dayOrder.indexOf(a.day_of_week) - dayOrder.indexOf(b.day_of_week);
+      });
+      
+      setAvailability(activeDays);
+    } catch (err) {
+      console.error('Failed to load availability', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      fetchAvailability();
+    }, [])
+  );
+
+  return (
+    // @ts-ignore
+    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
+      <Header title="My Schedule" showBack />
+      
+      {loading ? (
+        <View style={styles.centerContent}>
+          <ActivityIndicator size="large" color={THEME.colors.primary} />
+        </View>
+      ) : (
+        <View style={styles.content}>
+          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+            
+            <View style={styles.summaryCard}>
+              <View style={styles.summaryIconContainer}>
+                <Calendar color={THEME.colors.primary} size={28} />
+              </View>
+              <View style={styles.summaryTextContainer}>
+                <Typography variant="h3" weight="bold" style={styles.summaryTitle}>
+                  {availability.length} Active Days
+                </Typography>
+                <Typography variant="body" style={styles.summarySubtitle}>
+                  Keep your schedule up to date to receive matched visit requests.
+                </Typography>
+              </View>
+            </View>
+
+            <View style={styles.listContainer}>
+              <Typography variant="h3" weight="bold" style={styles.sectionTitle}>
+                Available Days
+              </Typography>
+              
+              {availability.length === 0 ? (
+                <View style={styles.emptyState}>
+                  <Typography variant="body" style={styles.emptyText}>
+                    You haven't set any available days yet.
+                  </Typography>
+                </View>
+              ) : (
+                availability.map((item) => (
+                  <TouchableOpacity 
+                    key={item.id || item.day_of_week} 
+                    style={styles.dayCard}
+                    onPress={() => navigation.navigate('EditAvailability', {
+                      day_of_week: item.day_of_week,
+                      start_time: item.start_time,
+                      end_time: item.end_time
+                    })}
+                  >
+                    <View>
+                      <Typography variant="body" weight="bold" style={styles.dayName}>
+                        {item.day_of_week.charAt(0).toUpperCase() + item.day_of_week.slice(1)}
+                      </Typography>
+                      <Typography variant="caption" style={styles.timeRange}>
+                        {item.start_time.substring(0, 5)} - {item.end_time.substring(0, 5)}
+                      </Typography>
+                    </View>
+                    <ChevronRight color="#9CA3AF" size={20} />
+                  </TouchableOpacity>
+                ))
+              )}
+            </View>
+            <View style={styles.bottomSpacer} />
+          </ScrollView>
+
+          <TouchableOpacity 
+            style={styles.fab}
+            onPress={() => navigation.navigate('AddAvailability')}
+          >
+            <Plus color="#FFF" size={24} />
+          </TouchableOpacity>
+        </View>
+      )}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F3F4F6',
+  },
+  centerContent: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  summaryCard: {
+    margin: 16,
+    backgroundColor: '#EEF2FF',
+    borderRadius: 16,
+    padding: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#E0E7FF',
+  },
+  summaryIconContainer: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: THEME.colors.primary,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+  summaryTextContainer: {
+    flex: 1,
+    marginLeft: 16,
+  },
+  summaryTitle: {
+    color: '#3730A3',
+    marginBottom: 4,
+    fontSize: 20,
+  },
+  summarySubtitle: {
+    color: '#4338CA',
+    opacity: 0.8,
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  listContainer: {
+    paddingHorizontal: 16,
+  },
+  sectionTitle: {
+    color: '#111827',
+    marginBottom: 12,
+    marginLeft: 4,
+  },
+  emptyState: {
+    padding: 24,
+    alignItems: 'center',
+    backgroundColor: '#FFF',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderStyle: 'dashed',
+  },
+  emptyText: {
+    color: '#6B7280',
+    textAlign: 'center',
+  },
+  dayCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#FFF',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  dayName: {
+    color: '#111827',
+    fontSize: 16,
+    marginBottom: 4,
+  },
+  timeRange: {
+    color: '#6B7280',
+    fontSize: 14,
+  },
+  bottomSpacer: {
+    height: 100,
+  },
+  fab: {
+    position: 'absolute',
+    bottom: 24,
+    right: 24,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: THEME.colors.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 6,
+  }
+});

src/screens/EditAvailabilityScreen.tsx

@@ -0,0 +1,290 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, TouchableOpacity, Alert, Platform } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { Typography } from '../components/ui/Typography';
+import { Header } from '../components/ui/Header';
+import { profileService } from '../services/profileService';
+import { THEME } from '../constants/theme';
+import { Clock, Calendar, Trash2 } from 'lucide-react-native';
+import { RootStackParamList } from '../navigation/AppNavigator';
+
+type EditAvailabilityRouteProp = RouteProp<RootStackParamList, 'EditAvailability'>;
+
+export const EditAvailabilityScreen = () => {
+  const navigation = useNavigation();
+  const route = useRoute<EditAvailabilityRouteProp>();
+  
+  const { day_of_week, start_time, end_time } = route.params;
+
+  // Parse strings to dates
+  const parseTime = (timeStr: string) => {
+    const [hours, minutes] = timeStr.split(':').map(Number);
+    const date = new Date();
+    date.setHours(hours || 9, minutes || 0, 0, 0);
+    return date;
+  };
+
+  const [startTime, setStartTime] = useState(parseTime(start_time));
+  const [endTime, setEndTime] = useState(parseTime(end_time));
+  
+  const [showPicker, setShowPicker] = useState(false);
+  const [pickerType, setPickerType] = useState<'start' | 'end'>('start');
+  
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const openTimePicker = (type: 'start' | 'end') => {
+    setPickerType(type);
+    setShowPicker(true);
+  };
+
+  const handleTimeChange = (event: any, selectedDate?: Date) => {
+    if (Platform.OS === 'android') {
+      setShowPicker(false);
+    }
+    
+    if (event.type === 'dismissed' || !selectedDate) {
+      return;
+    }
+
+    if (pickerType === 'start') {
+      setStartTime(selectedDate);
+    } else {
+      setEndTime(selectedDate);
+    }
+  };
+
+  const formatTime = (date: Date) => {
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${hours}:${minutes}`;
+  };
+
+  const handleUpdate = async () => {
+    setSaving(true);
+    try {
+      const payload = {
+        day_of_week,
+        start_time: formatTime(startTime),
+        end_time: formatTime(endTime),
+        is_available: 1 // Since they are editing, it must be available
+      };
+
+      // @ts-ignore
+      await profileService.updateDayAvailability(payload);
+      Alert.alert('Success', 'Availability updated successfully.', [
+        { text: 'OK', onPress: () => navigation.goBack() }
+      ]);
+    } catch (e: any) {
+      Alert.alert('Error', e.response?.data?.message || 'Failed to update availability.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = () => {
+    Alert.alert(
+      'Remove Availability',
+      `Are you sure you want to completely remove your availability for ${day_of_week}?`,
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Remove', 
+          style: 'destructive',
+          onPress: async () => {
+            setDeleting(true);
+            try {
+              await profileService.deleteDayAvailability(day_of_week);
+              navigation.goBack();
+            } catch (e: any) {
+              Alert.alert('Error', e.response?.data?.message || 'Failed to remove availability.');
+              setDeleting(false);
+            }
+          }
+        }
+      ]
+    );
+  };
+
+  return (
+    // @ts-ignore
+    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
+      <Header title="Edit Availability" showBack />
+      
+      <View style={styles.content}>
+        <View style={styles.card}>
+          <Typography variant="caption" style={styles.label}>Day</Typography>
+          
+          <View style={styles.disabledBox}>
+            <Calendar color="#9CA3AF" size={20} />
+            <Typography variant="body" weight="bold" style={styles.disabledText}>
+              {day_of_week.charAt(0).toUpperCase() + day_of_week.slice(1)}
+            </Typography>
+          </View>
+
+          <View style={styles.timeRow}>
+            <View style={styles.timeColumn}>
+              <Typography variant="caption" style={styles.label}>Start Time</Typography>
+              <TouchableOpacity 
+                style={styles.inputBox}
+                onPress={() => openTimePicker('start')}
+              >
+                <Clock color="#6B7280" size={20} />
+                <Typography variant="body" style={styles.inputText}>
+                  {formatTime(startTime)}
+                </Typography>
+              </TouchableOpacity>
+            </View>
+
+            <View style={styles.timeSpacer} />
+
+            <View style={styles.timeColumn}>
+              <Typography variant="caption" style={styles.label}>End Time</Typography>
+              <TouchableOpacity 
+                style={styles.inputBox}
+                onPress={() => openTimePicker('end')}
+              >
+                <Clock color="#6B7280" size={20} />
+                <Typography variant="body" style={styles.inputText}>
+                  {formatTime(endTime)}
+                </Typography>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+
+        <TouchableOpacity 
+          style={styles.deleteButton}
+          onPress={handleDelete}
+          disabled={deleting}
+        >
+          <Trash2 color="#EF4444" size={20} />
+          <Typography variant="body" weight="bold" style={styles.deleteButtonText}>
+            {deleting ? 'Removing...' : 'Remove Availability'}
+          </Typography>
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.footer}>
+        <TouchableOpacity 
+          style={styles.saveButton}
+          onPress={handleUpdate}
+          disabled={saving || deleting}
+        >
+          <Typography variant="h3" weight="bold" style={styles.saveButtonText}>
+            {saving ? 'Saving...' : 'Update Day'}
+          </Typography>
+        </TouchableOpacity>
+      </View>
+
+      {showPicker && (
+        <DateTimePicker
+          value={pickerType === 'start' ? startTime : endTime}
+          mode="time"
+          is24Hour={true}
+          display="default"
+          onChange={handleTimeChange}
+        />
+      )}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  card: {
+    backgroundColor: '#FFF',
+    borderRadius: 12,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+  },
+  label: {
+    color: '#6B7280',
+    marginBottom: 8,
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+  },
+  disabledBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 8,
+    height: 50,
+    paddingHorizontal: 12,
+    backgroundColor: '#F3F4F6',
+    marginBottom: 20,
+  },
+  disabledText: {
+    marginLeft: 12,
+    color: '#9CA3AF',
+    fontSize: 16,
+  },
+  inputBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 8,
+    height: 50,
+    paddingHorizontal: 12,
+    backgroundColor: '#F9FAFB',
+    marginBottom: 20,
+  },
+  inputText: {
+    marginLeft: 12,
+    color: '#111827',
+    fontSize: 16,
+  },
+  timeRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  timeColumn: {
+    flex: 1,
+  },
+  timeSpacer: {
+    width: 16,
+  },
+  deleteButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 24,
+    padding: 16,
+    backgroundColor: '#FEF2F2',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#FEE2E2',
+  },
+  deleteButtonText: {
+    color: '#EF4444',
+    marginLeft: 8,
+  },
+  footer: {
+    padding: 16,
+    backgroundColor: '#FFF',
+    borderTopWidth: 1,
+    borderTopColor: '#E5E7EB',
+  },
+  saveButton: {
+    backgroundColor: THEME.colors.primary,
+    height: 50,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  saveButtonText: {
+    color: '#FFF',
+  }
+});

src/screens/HomeScreen.tsx

@@ -0,0 +1,314 @@
+import React from 'react';
+import { View, ScrollView, TouchableOpacity, StatusBar, ActivityIndicator, StyleSheet, Image } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { CompositeNavigationProp } from '@react-navigation/native';
+import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
+import { TabParamList, RootStackParamList } from '../navigation/AppNavigator';
+import { Typography } from '../components/ui/Typography';
+import { Card } from '../components/ui/Card';
+import { Button } from '../components/ui/Button';
+import { useCaregivers } from '../hooks/useCaregivers';
+import { formatRating, getInitials, getImageUrl } from '../utils/formatters';
+import { useResponsiveLayout } from '../hooks/useResponsiveLayout';
+import { User, Award, Calendar } from 'lucide-react-native';
+import { profileService, CaregiverProfileResponse } from '../services/profileService';
+import { useState, useEffect } from 'react';
+
+type HomeScreenNavigationProp = CompositeNavigationProp<
+  BottomTabNavigationProp<TabParamList, 'HomeTab'>,
+  NativeStackNavigationProp<RootStackParamList>
+>;
+
+interface HomeScreenProps {
+  navigation: HomeScreenNavigationProp;
+}
+
+export const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
+  const { caregivers, isLoading } = useCaregivers();
+  const { isTablet, screenPadding } = useResponsiveLayout();
+  const [profile, setProfile] = useState<CaregiverProfileResponse['data'] | null>(null);
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        const response = await profileService.getProfile();
+        setProfile(response.data);
+      } catch (err) {
+        console.error('Failed to fetch profile', err);
+      }
+    };
+    fetchProfile();
+  }, []);
+
+  return (
+    // @ts-ignore - TS types for SafeAreaView in this version incorrectly omit the style prop
+    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
+      <ScrollView style={[styles.scrollView, { paddingHorizontal: screenPadding }]} scrollsToTop={false}>
+        <View style={styles.header}>
+          <TouchableOpacity style={styles.userProfileBtn}>
+            <Image 
+              source={{ uri: getImageUrl(profile?.user?.profile_image) || 'https://i.pravatar.cc/150?img=11' }} 
+              style={styles.profileImage} 
+            />
+          </TouchableOpacity>
+          <View style={styles.headerTextContainer}>
+            <Typography variant="h1" weight="bold" style={styles.headerTitle}>
+              {profile?.user?.first_name ? `Good Morning, ${profile.user.first_name}` : 'Good Morning'}
+            </Typography>
+            <Typography variant="body" style={styles.headerSubtitle}>
+              Find the perfect care for your loved ones.
+            </Typography>
+          </View>
+        </View>
+
+        <View style={styles.actionRow}>
+          <TouchableOpacity 
+            style={styles.actionColumnCard}
+            onPress={() => navigation.navigate('ManageSkills')}
+          >
+            <View style={{flexDirection: 'row', alignItems: 'center', marginBottom: 4}}>
+              <Award color="#4F46E5" size={20} style={{ marginRight: 6 }} />
+              <Typography variant="h3" weight="bold" style={styles.skillsActionTitle}>
+                Skills
+              </Typography>
+            </View>
+            <Typography variant="caption" style={styles.skillsActionSubtitle}>
+              Update skills
+            </Typography>
+            <View style={{ marginTop: 16, width: '100%' }}>
+              <Button
+                title="Manage"
+                onPress={() => navigation.navigate('ManageSkills')}
+                variant="secondary"
+              />
+            </View>
+          </TouchableOpacity>
+
+          <TouchableOpacity 
+            style={styles.actionColumnCard}
+            onPress={() => navigation.navigate('AvailabilityList')}
+          >
+            <View style={{flexDirection: 'row', alignItems: 'center', marginBottom: 4}}>
+              <Calendar color="#4F46E5" size={20} style={{ marginRight: 6 }} />
+              <Typography variant="h3" weight="bold" style={styles.skillsActionTitle}>
+                Availability
+              </Typography>
+            </View>
+            <Typography variant="caption" style={styles.skillsActionSubtitle}>
+              Set schedule
+            </Typography>
+            <View style={{ marginTop: 16, width: '100%' }}>
+              <Button
+                title="Update"
+                onPress={() => navigation.navigate('AvailabilityList')}
+                variant="secondary"
+              />
+            </View>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.sectionHeader}>
+          <Typography variant="h3" weight="bold">
+            Featured Caregivers
+          </Typography>
+          <TouchableOpacity>
+            <Typography variant="caption" weight="medium" style={styles.seeAllText}>
+              See All
+            </Typography>
+          </TouchableOpacity>
+        </View>
+
+        {isLoading ? (
+          <View style={styles.loaderContainer}>
+            <ActivityIndicator size="large" color="#4F46E5" />
+          </View>
+        ) : (
+          <View style={isTablet ? styles.tabletGrid : undefined}>
+            {caregivers.map((caregiver) => (
+              <TouchableOpacity
+                key={caregiver.id}
+                activeOpacity={0.7}
+                onPress={() => navigation.navigate('Profile', { caregiverId: caregiver.id })}
+                style={isTablet ? styles.tabletGridItem : undefined}
+              >
+                <Card style={styles.caregiverCard}>
+                  <View style={styles.avatar}>
+                    <Typography variant="h2" style={styles.avatarText}>
+                      {getInitials(caregiver.name)}
+                    </Typography>
+                  </View>
+                  <View style={styles.caregiverInfo}>
+                    <Typography variant="body" weight="bold" style={styles.caregiverName}>
+                      {caregiver.name}
+                    </Typography>
+                    <Typography variant="caption" style={styles.caregiverRole}>
+                      {caregiver.role}
+                    </Typography>
+                    <View style={styles.ratingContainer}>
+                      <Typography variant="caption" style={styles.starIcon}>
+                        ★
+                      </Typography>
+                      <Typography variant="caption" weight="medium">
+                        {formatRating(caregiver.rating)}
+                      </Typography>
+                    </View>
+                  </View>
+                  <View style={styles.viewBadge}>
+                    <Typography variant="caption" style={styles.viewBadgeText}>
+                      View
+                    </Typography>
+                  </View>
+                </Card>
+              </TouchableOpacity>
+            ))}
+          </View>
+        )}
+        
+        <View style={styles.bottomSpacer} />
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  scrollView: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  header: {
+    marginBottom: 24,
+    marginTop: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  userProfileBtn: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#EEF2FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: '#E0E7FF',
+    marginRight: 16,
+    overflow: 'hidden',
+  },
+  profileImage: {
+    width: '100%',
+    height: '100%',
+  },
+  headerTextContainer: {
+    flex: 1,
+  },
+  headerTitle: {
+    marginBottom: 4,
+  },
+  headerSubtitle: {
+    color: '#6B7280',
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  priceText: {
+    color: '#059669', // emerald-600
+  },
+  actionRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 24,
+  },
+  actionColumnCard: {
+    backgroundColor: '#EEF2FF',
+    borderRadius: 16,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#E0E7FF',
+    width: '48%',
+    flexDirection: 'column',
+    minHeight: 140,
+    justifyContent: 'space-between',
+  },
+  skillsActionTitle: {
+    color: '#3730A3',
+    fontSize: 16,
+  },
+  skillsActionSubtitle: {
+    color: '#4338CA',
+    opacity: 0.8,
+  },
+  seeAllText: {
+    color: '#4F46E5',
+  },
+  loaderContainer: {
+    paddingVertical: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  caregiverCard: {
+    marginBottom: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+  },
+  avatar: {
+    height: 64,
+    width: 64,
+    borderRadius: 32,
+    backgroundColor: '#E5E7EB',
+    marginRight: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarText: {
+    color: '#6B7280',
+  },
+  caregiverInfo: {
+    flex: 1,
+  },
+  caregiverName: {
+    marginBottom: 4,
+  },
+  caregiverRole: {
+    marginBottom: 8,
+    color: '#6B7280',
+  },
+  ratingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  starIcon: {
+    color: '#EAB308',
+    fontWeight: 'bold',
+    marginRight: 4,
+  },
+  viewBadge: {
+    backgroundColor: '#EEF2FF',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 9999,
+  },
+  viewBadgeText: {
+    color: '#4F46E5',
+    fontWeight: '500',
+  },
+  bottomSpacer: {
+    height: 40,
+  },
+  tabletGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  tabletGridItem: {
+    width: '48%', // Leaves some space for margins between the two columns
+  }
+});

src/screens/LoginScreen.tsx

@@ -0,0 +1,229 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, KeyboardAvoidingView, Platform, ScrollView, TouchableOpacity } from 'react-native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamList } from '../navigation/AppNavigator';
+import { Typography } from '../components/ui/Typography';
+import { Input } from '../components/ui/Input';
+import { Button } from '../components/ui/Button';
+import { authService } from '../services/authService';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { HeartHandshake } from 'lucide-react-native';
+
+type LoginScreenNavigationProp = NativeStackNavigationProp<RootStackParamList, 'Login'>;
+
+interface LoginScreenProps {
+  navigation: LoginScreenNavigationProp;
+}
+
+export const LoginScreen: React.FC<LoginScreenProps> = ({ navigation }) => {
+  const [phone, setPhone] = useState('+91');
+  const [otp, setOtp] = useState('');
+  const [step, setStep] = useState<'PHONE' | 'OTP'>('PHONE');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleLogin = async () => {
+    if (step === 'PHONE') {
+      if (!phone || phone.length < 10) {
+        setError('Please enter a valid phone number');
+        return;
+      }
+      setIsLoading(true);
+      setError('');
+      try {
+        const response = await authService.login(phone);
+        console.log('OTP sent:', response);
+        setStep('OTP');
+      } catch (err: any) {
+        console.error('Login failed:', err);
+        setError('Failed to send OTP. Please check your number and try again.');
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      if (!otp || otp.length < 4) {
+        setError('Please enter a valid OTP');
+        return;
+      }
+      setIsLoading(true);
+      setError('');
+      try {
+        const response = await authService.verifyOtp(phone, otp);
+        console.log('OTP verified successfully:', response);
+        // Save the token
+        if (response.data && response.data.accessToken) {
+          await AsyncStorage.setItem('token', response.data.accessToken);
+        } else if (response.token) {
+          await AsyncStorage.setItem('token', response.token);
+        }
+        navigation.replace('MainTabs');
+      } catch (err: any) {
+        console.error('OTP verification failed:', err);
+        setError('Invalid OTP. Please try again.');
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
+
+        <View style={styles.formContainer}>
+          <View style={styles.card}>
+            <View style={styles.logoContainer}>
+              <View style={styles.iconWrapper}>
+                <HeartHandshake color="#4F46E5" size={40} />
+              </View>
+            </View>
+
+            <View style={styles.header}>
+              <Typography variant="h1" weight="bold" style={styles.title}>
+                Caregiver Portal
+              </Typography>
+              <Typography variant="body" style={styles.subtitle}>
+                Sign in to view your schedule, manage patient care, and stay connected.
+              </Typography>
+            </View>
+
+            <View style={styles.form}>
+              {error ? (
+                <Typography variant="caption" style={styles.errorText}>
+                  {error}
+                </Typography>
+              ) : null}
+
+              {step === 'PHONE' ? (
+                <Input
+                  label="Phone Number"
+                  labelStyle={{ fontWeight: 'bold', fontSize: 16 }}
+                  placeholder="+917540032060"
+                  keyboardType="phone-pad"
+                  autoCapitalize="none"
+                  value={phone}
+                  onChangeText={setPhone}
+                />
+              ) : (
+                <Input
+                  label="Enter OTP"
+                  labelStyle={{ fontWeight: 'bold', fontSize: 16 }}
+                  placeholder="e.g. 881433"
+                  keyboardType="numeric"
+                  autoCapitalize="none"
+                  value={otp}
+                  onChangeText={setOtp}
+                />
+              )}
+
+              <Button
+                title={step === 'PHONE' ? "Get OTP" : "Verify & Log In"}
+                onPress={handleLogin}
+                loading={isLoading}
+                style={styles.loginButton}
+              />
+            </View>
+          </View>
+
+          <View style={styles.footer}>
+            <Typography variant="body" style={styles.footerText}>
+              Don't have an account?{' '}
+            </Typography>
+            <TouchableOpacity>
+              <Typography variant="body" weight="bold" style={styles.signupText}>
+                Sign Up
+              </Typography>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#EEF2FF', // Beautiful light indigo background
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingHorizontal: 24,
+    justifyContent: 'center',
+  },
+  formContainer: {
+    width: '100%',
+    maxWidth: 480,
+    alignSelf: 'center',
+    paddingVertical: 40,
+  },
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 32,
+    padding: 32,
+    shadowColor: '#4F46E5',
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.1,
+    shadowRadius: 32,
+    elevation: 8,
+    borderWidth: 1,
+    borderColor: '#E0E7FF',
+    marginBottom: 32,
+  },
+  logoContainer: {
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  iconWrapper: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#EEF2FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: '#C7D2FE',
+  },
+  header: {
+    marginBottom: 32,
+    alignItems: 'center',
+  },
+  title: {
+    marginBottom: 8,
+    color: '#111827',
+    textAlign: 'center',
+  },
+  subtitle: {
+    color: '#6B7280',
+    lineHeight: 24,
+    textAlign: 'center',
+  },
+  form: {
+    marginBottom: 8,
+  },
+  errorText: {
+    color: '#DC2626', // Red
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  loginButton: {
+    width: '100%',
+    backgroundColor: '#1E3A8A', // Navy blue
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 40,
+  },
+  footerText: {
+    color: '#6B7280',
+  },
+  signupText: {
+    color: '#1E3A8A', // Navy blue
+  },
+});

src/screens/ManageSkillsScreen.tsx

@@ -0,0 +1,253 @@
+import React, { useState, useCallback } from 'react';
+import { View, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity, Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { Typography } from '../components/ui/Typography';
+import { Header } from '../components/ui/Header';
+import { profileService } from '../services/profileService';
+import { THEME } from '../constants/theme';
+import { RootStackParamList } from '../navigation/AppNavigator';
+import { Plus, Award } from 'lucide-react-native';
+
+type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'ManageSkills'>;
+
+export const ManageSkillsScreen = () => {
+  const navigation = useNavigation<NavigationProp>();
+  const [ownSkills, setOwnSkills] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchSkills = async () => {
+    try {
+      setLoading(true);
+      const skillsData = await profileService.getOwnSkills();
+      setOwnSkills(skillsData || []);
+    } catch (err) {
+      console.error('Failed to load skills', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      fetchSkills();
+    }, [])
+  );
+
+  return (
+    // @ts-ignore
+    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
+      <Header title="My Skills" showBack />
+      
+      {loading ? (
+        <View style={styles.centerContent}>
+          <ActivityIndicator size="large" color={THEME.colors.primary} />
+        </View>
+      ) : (
+        <View style={styles.content}>
+          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+            
+            <View style={styles.summaryCard}>
+              <View style={styles.summaryIconContainer}>
+                <Award color={THEME.colors.primary} size={28} />
+              </View>
+              <View style={styles.summaryTextContainer}>
+                <Typography variant="h3" weight="bold" style={styles.summaryTitle}>
+                  {ownSkills.length} Active Skills
+                </Typography>
+                <Typography variant="body" style={styles.summarySubtitle}>
+                  Add more skills to get matched with a wider variety of care visits.
+                </Typography>
+              </View>
+            </View>
+
+            <View style={styles.listContainer}>
+              <Typography variant="h3" weight="bold" style={styles.sectionTitle}>
+                Your Skills
+              </Typography>
+              
+              {ownSkills.length === 0 ? (
+                <View style={styles.emptyState}>
+                  <Typography variant="body" style={styles.emptyText}>
+                    You haven't added any skills yet.
+                  </Typography>
+                </View>
+              ) : (
+                ownSkills.map(skill => (
+                  <View key={skill.id || skill.slug} style={styles.skillCard}>
+                    <View style={styles.skillIconPlaceholder}>
+                      <Text style={styles.skillIconText}>{skill.name.charAt(0)}</Text>
+                    </View>
+                    <View style={styles.skillInfo}>
+                      <Typography variant="body" weight="bold" style={styles.skillName}>
+                        {skill.name}
+                      </Typography>
+                      <View style={styles.skillTypeBadge}>
+                        <Typography variant="caption" style={styles.skillType}>
+                          {skill.master_type_slug}
+                        </Typography>
+                      </View>
+                    </View>
+                  </View>
+                ))
+              )}
+            </View>
+            <View style={styles.bottomSpacer} />
+          </ScrollView>
+
+          <TouchableOpacity 
+            style={styles.fab}
+            onPress={() => navigation.navigate('AddSkill')}
+          >
+            <Plus color="#FFF" size={24} />
+          </TouchableOpacity>
+        </View>
+      )}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F3F4F6',
+  },
+  centerContent: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  summaryCard: {
+    margin: 16,
+    backgroundColor: '#EEF2FF',
+    borderRadius: 16,
+    padding: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#E0E7FF',
+  },
+  summaryIconContainer: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: THEME.colors.primary,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+  summaryTextContainer: {
+    flex: 1,
+    marginLeft: 16,
+  },
+  summaryTitle: {
+    color: '#3730A3',
+    marginBottom: 4,
+    fontSize: 20,
+  },
+  summarySubtitle: {
+    color: '#4338CA',
+    opacity: 0.8,
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  listContainer: {
+    paddingHorizontal: 16,
+  },
+  sectionTitle: {
+    color: '#111827',
+    marginBottom: 12,
+    marginLeft: 4,
+  },
+  emptyState: {
+    padding: 24,
+    alignItems: 'center',
+    backgroundColor: '#FFF',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderStyle: 'dashed',
+  },
+  emptyText: {
+    color: '#6B7280',
+    textAlign: 'center',
+  },
+  skillCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#FFF',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  skillIconPlaceholder: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: '#F3F4F6',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  skillIconText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: THEME.colors.primary,
+  },
+  skillInfo: {
+    flex: 1,
+  },
+  skillName: {
+    color: '#111827',
+    fontSize: 16,
+    marginBottom: 4,
+  },
+  skillTypeBadge: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#EEF2FF',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  skillType: {
+    color: THEME.colors.primary,
+    fontWeight: 'bold',
+  },
+  bottomSpacer: {
+    height: 100,
+  },
+  fab: {
+    position: 'absolute',
+    bottom: 24,
+    right: 24,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: THEME.colors.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 6,
+  }
+});

src/screens/PersonalInformationScreen.tsx

@@ -0,0 +1,346 @@
+import React, { useState, useEffect } from 'react';
+import { View, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity, TextInput, Image } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Typography } from '../components/ui/Typography';
+import { Header } from '../components/ui/Header';
+import { Card } from '../components/ui/Card';
+import { profileService, CaregiverProfileResponse } from '../services/profileService';
+import { getImageUrl } from '../utils/formatters';
+import { launchImageLibrary } from 'react-native-image-picker';
+import { Edit2, Camera } from 'lucide-react-native';
+
+export const PersonalInformationScreen = () => {
+  const [profile, setProfile] = useState<CaregiverProfileResponse['data'] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [isEditing, setIsEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  
+  // Form State
+  const [formData, setFormData] = useState({
+    first_name: '',
+    last_name: '',
+    email: '',
+    mobile: '',
+    gender: '',
+    dob: '',
+    blood_group: '',
+    experience_years: '',
+    employment_type: '',
+    hourly_rate: '',
+    address_street: '',
+    address_city: '',
+    address_zip: '',
+    country_iso: '',
+  });
+  
+  const [profileImage, setProfileImage] = useState<string | null>(null);
+  const [selectedImage, setSelectedImage] = useState<any>(null);
+
+  useEffect(() => {
+    fetchProfile();
+  }, []);
+
+  const fetchProfile = async () => {
+    try {
+      const response = await profileService.getProfile();
+      setProfile(response.data);
+      setFormData({
+        first_name: response.data.user.first_name || '',
+        last_name: response.data.user.last_name || '',
+        email: response.data.user.email || '',
+        mobile: response.data.user.mobile || '',
+        gender: response.data.user.gender || '',
+        dob: response.data.user.dob || '',
+        blood_group: response.data.user.blood_group || '',
+        experience_years: response.data.experienceYears?.toString() || '',
+        employment_type: response.data.employmentType || '',
+        hourly_rate: response.data.hourlyRate?.toString() || '',
+        address_street: response.data.user.address?.street || '',
+        address_city: response.data.user.address?.city || '',
+        address_zip: response.data.user.address?.zip || '',
+        country_iso: response.data.user.country_iso || '',
+      });
+      setProfileImage(response.data.photoUrl);
+    } catch (err) {
+      console.error('Failed to fetch profile in PersonalInformation', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelectImage = async () => {
+    if (!isEditing) return;
+    const result = await launchImageLibrary({ mediaType: 'photo', quality: 0.8 });
+    if (result.assets && result.assets.length > 0) {
+      const asset = result.assets[0];
+      setSelectedImage(asset);
+      setProfileImage(asset.uri || null);
+    }
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      if (selectedImage) {
+        await profileService.uploadAvatar(selectedImage.uri, selectedImage.type || 'image/jpeg', selectedImage.fileName || 'profile.jpg');
+      }
+      
+      const payload = {
+        user: {
+          first_name: formData.first_name,
+          last_name: formData.last_name,
+          email: formData.email,
+          mobile: formData.mobile,
+          gender: formData.gender,
+          dob: formData.dob,
+          blood_group: formData.blood_group,
+          country_iso: formData.country_iso,
+          address: JSON.stringify({
+            street: formData.address_street,
+            city: formData.address_city,
+            zip: formData.address_zip
+          })
+        },
+        experience_years: formData.experience_years,
+        employment_type: formData.employment_type,
+        hourly_rate: formData.hourly_rate
+      };
+      
+      await profileService.updateProfile(payload);
+      await fetchProfile();
+      setIsEditing(false);
+    } catch (err) {
+      console.error('Failed to save profile', err);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const EditButton = () => {
+    if (isEditing) {
+      return (
+        <TouchableOpacity onPress={handleSave} disabled={saving} style={styles.headerButton}>
+          {saving ? <ActivityIndicator size="small" color="#4F46E5" /> : <Typography variant="body" weight="bold" style={styles.headerButtonText}>Save</Typography>}
+        </TouchableOpacity>
+      );
+    }
+    return (
+      <TouchableOpacity onPress={() => setIsEditing(true)} style={styles.headerButton}>
+        <Edit2 color="#4F46E5" size={20} />
+      </TouchableOpacity>
+    );
+  };
+
+  const InfoRow = ({ label, value, field }: { label: string; value: string | undefined; field?: keyof typeof formData }) => {
+    if (isEditing && field) {
+      return (
+        <View style={styles.formFieldContainer}>
+          <Typography variant="caption" weight="bold" style={styles.formLabel}>
+            {label}
+          </Typography>
+          <TextInput
+            style={styles.formInput}
+            value={formData[field]}
+            onChangeText={(text) => setFormData(prev => ({ ...prev, [field]: text }))}
+            placeholder={`Enter ${label}`}
+            placeholderTextColor="#9CA3AF"
+          />
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.infoRow}>
+        <Typography variant="body" weight="medium" style={styles.label}>
+          {label}
+        </Typography>
+        <Typography variant="body" style={styles.value}>
+          {value || 'Not provided'}
+        </Typography>
+      </View>
+    );
+  };
+
+  return (
+    // @ts-ignore
+    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
+      <Header title="Personal Information" showBack rightComponent={<EditButton />} />
+      
+      {loading ? (
+        <View style={styles.centerContent}>
+          <ActivityIndicator size="large" color="#4F46E5" />
+        </View>
+      ) : profile ? (
+        <ScrollView style={styles.scrollView}>
+          <View style={styles.avatarContainer}>
+            <TouchableOpacity onPress={handleSelectImage} disabled={!isEditing}>
+              <View style={styles.avatarWrapper}>
+                <Image 
+                  source={{ uri: getImageUrl(profileImage) || 'https://via.placeholder.com/150' }} 
+                  style={styles.avatar} 
+                />
+                {isEditing && (
+                  <View style={styles.cameraOverlay}>
+                    <Camera color="#FFFFFF" size={20} />
+                  </View>
+                )}
+              </View>
+            </TouchableOpacity>
+          </View>
+
+          <Card style={styles.card}>
+            <InfoRow label="First Name" value={profile.user.first_name} field="first_name" />
+            {!isEditing && <View style={styles.divider} />}
+            <InfoRow label="Last Name" value={profile.user.last_name} field="last_name" />
+            {!isEditing && <View style={styles.divider} />}
+            <InfoRow label="Email Address" value={profile.user.email} field="email" />
+            {!isEditing && <View style={styles.divider} />}
+            <InfoRow label="Phone Number" value={profile.user.mobile} field="mobile" />
+            {!isEditing && <View style={styles.divider} />}
+            <InfoRow label="Gender" value={profile.user.gender} field="gender" />
+            {!isEditing && <View style={styles.divider} />}
+            <InfoRow label="Date of Birth" value={profile.user.dob} field="dob" />
+            {!isEditing && <View style={styles.divider} />}
+            <InfoRow label="Blood Group" value={profile.user.blood_group} field="blood_group" />
+          </Card>
+
+          <Typography variant="h3" weight="bold" style={styles.sectionTitle}>
+            Professional Details
+          </Typography>
+          <Card style={styles.card}>
+            <InfoRow label="Experience" value={`${profile.experienceYears} Years`} field="experience_years" />
+            {!isEditing && <View style={styles.divider} />}
+            <InfoRow label="Employment Type" value={profile.employmentType} field="employment_type" />
+            {!isEditing && <View style={styles.divider} />}
+            <InfoRow label="Hourly Rate" value={profile.hourlyRate ? `$${profile.hourlyRate}/hr` : undefined} field="hourly_rate" />
+            {!isEditing && <View style={styles.divider} />}
+            {/* Languages and Care Types are typically selected from a list or master data, so we don't map them to simple TextInputs here to prevent incorrect data entry */}
+            <InfoRow label="Languages" value={profile.languages?.join(', ')} />
+            {!isEditing && <View style={styles.divider} />}
+            <InfoRow label="Care Types" value={profile.careTypes?.join(', ')} />
+          </Card>
+
+          <Typography variant="h3" weight="bold" style={styles.sectionTitle}>
+            Address
+          </Typography>
+          <Card style={styles.card}>
+            <InfoRow label="Street" value={profile.user.address?.street} field="address_street" />
+            {!isEditing && <View style={styles.divider} />}
+            <InfoRow label="City" value={profile.user.address?.city} field="address_city" />
+            {!isEditing && <View style={styles.divider} />}
+            <InfoRow label="Zip Code" value={profile.user.address?.zip} field="address_zip" />
+            {!isEditing && <View style={styles.divider} />}
+            <InfoRow label="Country" value={profile.user.country_iso} field="country_iso" />
+          </Card>
+
+          <View style={styles.bottomSpacer} />
+        </ScrollView>
+      ) : (
+        <View style={styles.centerContent}>
+          <Typography variant="body">Failed to load profile data.</Typography>
+        </View>
+      )}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  centerContent: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scrollView: {
+    flex: 1,
+    padding: 16,
+  },
+  avatarContainer: {
+    alignItems: 'center',
+    marginBottom: 24,
+    marginTop: 8,
+  },
+  avatarWrapper: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    position: 'relative',
+    overflow: 'hidden',
+    backgroundColor: '#E5E7EB',
+  },
+  avatar: {
+    width: '100%',
+    height: '100%',
+  },
+  cameraOverlay: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    height: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerButton: {
+    padding: 8,
+  },
+  headerButtonText: {
+    color: '#4F46E5',
+  },
+  card: {
+    padding: 0,
+    marginBottom: 24,
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  label: {
+    color: '#6B7280',
+    flex: 1,
+  },
+  value: {
+    color: '#111827',
+    flex: 2,
+    textAlign: 'right',
+  },
+  formFieldContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  formLabel: {
+    color: '#6B7280',
+    marginBottom: 6,
+    letterSpacing: 0.5,
+  },
+  formInput: {
+    backgroundColor: '#F3F4F6',
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    color: '#111827',
+    fontSize: 16,
+    fontFamily: 'Inter-Regular',
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#E5E7EB',
+    marginHorizontal: 16,
+  },
+  sectionTitle: {
+    marginBottom: 12,
+    color: '#111827',
+  },
+  bottomSpacer: {
+    height: 40,
+  }
+});

src/screens/ProfileScreen.tsx

@@ -0,0 +1,247 @@
+import React from 'react';
+import { View, ScrollView, TouchableOpacity, StatusBar, ActivityIndicator, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RouteProp } from '@react-navigation/native';
+import { RootStackParamList } from '../navigation/AppNavigator';
+import { Typography } from '../components/ui/Typography';
+import { Button } from '../components/ui/Button';
+import { Header } from '../components/ui/Header';
+import { useCaregiver } from '../hooks/useCaregivers';
+import { formatRating, getInitials } from '../utils/formatters';
+import { useResponsiveLayout } from '../hooks/useResponsiveLayout';
+
+type ProfileScreenNavigationProp = NativeStackNavigationProp<RootStackParamList, 'Profile'>;
+type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>;
+
+interface ProfileScreenProps {
+  navigation: ProfileScreenNavigationProp;
+  route: ProfileScreenRouteProp;
+}
+
+export const ProfileScreen: React.FC<ProfileScreenProps> = ({ navigation, route }) => {
+  const { caregiverId } = route.params;
+  const { caregiver, isLoading } = useCaregiver(caregiverId);
+  const { isTablet } = useResponsiveLayout();
+  
+  if (isLoading) {
+    return (
+      <View style={styles.centerContainer}>
+        <ActivityIndicator size="large" color="#4F46E5" />
+      </View>
+    );
+  }
+
+  if (!caregiver) {
+    return (
+      <View style={styles.centerContainer}>
+        <Typography variant="h3">Caregiver not found</Typography>
+        <Button title="Go Back" onPress={() => navigation.goBack()} variant="primary" style={{ marginTop: 16 }} />
+      </View>
+    );
+  }
+
+  return (
+    // @ts-ignore - TS types for SafeAreaView in this version incorrectly omit the style prop
+    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
+      <Header title="Caregiver Profile" showBack />
+      
+      <ScrollView style={styles.scrollView} scrollsToTop={false}>
+        <View style={isTablet ? styles.tabletContainer : undefined}>
+          <View style={[styles.profileHeader, isTablet ? styles.tabletProfileHeader : undefined]}>
+            <View style={styles.avatar}>
+              <Typography variant="h1" style={styles.avatarText}>
+                {getInitials(caregiver.name)}
+              </Typography>
+            </View>
+            <Typography variant="h2" weight="bold" style={styles.name}>
+              {caregiver.name}
+            </Typography>
+            <Typography variant="body" style={styles.role}>
+              {caregiver.role} • {caregiver.experienceYears} years exp.
+            </Typography>
+            <View style={styles.ratingContainer}>
+              <Typography variant="body" style={styles.starIcon}>
+                ★
+              </Typography>
+              <Typography variant="body" weight="medium">
+                {formatRating(caregiver.rating)} ({caregiver.reviews} reviews)
+              </Typography>
+            </View>
+          </View>
+
+          <View style={[styles.content, isTablet ? styles.tabletContent : undefined]}>
+            <Typography variant="h3" weight="bold" style={styles.sectionTitle}>
+              About
+            </Typography>
+            <Typography variant="body" style={styles.aboutText}>
+              {caregiver.about}
+            </Typography>
+
+            <Typography variant="h3" weight="bold" style={styles.sectionTitle}>
+              Specialties
+            </Typography>
+            <View style={styles.specialtiesContainer}>
+              {caregiver.specialties.map((skill, i) => (
+                <View key={i} style={styles.specialtyBadge}>
+                  <Typography variant="caption" style={styles.specialtyText}>
+                    {skill}
+                  </Typography>
+                </View>
+              ))}
+            </View>
+
+            <Typography variant="h3" weight="bold" style={styles.sectionTitle}>
+              Availability
+            </Typography>
+            <View style={styles.availabilityContainer}>
+              <View>
+                <Typography variant="caption" style={styles.availabilityLabel}>Weekdays</Typography>
+                <Typography variant="body" weight="medium">{caregiver.availability.weekdays}</Typography>
+              </View>
+              <View>
+                <Typography variant="caption" style={styles.availabilityLabel}>Weekends</Typography>
+                <Typography variant="body" weight="medium">{caregiver.availability.weekends}</Typography>
+              </View>
+            </View>
+            
+            <Button
+              title="Request Booking"
+              variant="primary"
+              onPress={() => {}}
+              style={styles.bookButton}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  centerContainer: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  backButton: {
+    marginRight: 16,
+  },
+  backButtonText: {
+    color: '#4F46E5',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  profileHeader: {
+    alignItems: 'center',
+    paddingVertical: 32,
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F3F4F6',
+  },
+  avatar: {
+    height: 96,
+    width: 96,
+    borderRadius: 48,
+    backgroundColor: '#E5E7EB',
+    marginBottom: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarText: {
+    color: '#6B7280',
+  },
+  name: {
+    marginBottom: 4,
+  },
+  role: {
+    color: '#6B7280',
+    marginBottom: 8,
+  },
+  ratingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  starIcon: {
+    color: '#EAB308',
+    fontWeight: 'bold',
+    marginRight: 4,
+  },
+  content: {
+    padding: 24,
+  },
+  sectionTitle: {
+    marginBottom: 12,
+  },
+  aboutText: {
+    color: '#4B5563',
+    lineHeight: 24,
+    marginBottom: 24,
+  },
+  specialtiesContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginBottom: 24,
+  },
+  specialtyBadge: {
+    backgroundColor: '#EEF2FF',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 9999,
+    marginRight: 8,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: '#E0E7FF',
+  },
+  specialtyText: {
+    color: '#4F46E5',
+    fontWeight: '500',
+  },
+  availabilityContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: '#FFFFFF',
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#F3F4F6',
+    marginBottom: 32,
+  },
+  availabilityLabel: {
+    color: '#6B7280',
+    marginBottom: 4,
+  },
+  bookButton: {
+    width: '100%',
+  },
+  tabletContainer: {
+    flexDirection: 'row',
+    padding: 24,
+  },
+  tabletProfileHeader: {
+    flex: 1,
+    borderBottomWidth: 0,
+    borderRightWidth: 1,
+    borderRightColor: '#F3F4F6',
+    marginRight: 24,
+    backgroundColor: 'transparent',
+  },
+  tabletContent: {
+    flex: 2,
+    padding: 0,
+  }
+});

src/screens/SettingsScreen.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Typography } from '../components/ui/Typography';
+import { Header } from '../components/ui/Header';
+import { Card } from '../components/ui/Card';
+import { User, ChevronRight } from 'lucide-react-native';
+import { CompositeNavigationProp } from '@react-navigation/native';
+import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { TabParamList, RootStackParamList } from '../navigation/AppNavigator';
+
+type SettingsScreenNavigationProp = CompositeNavigationProp<
+  BottomTabNavigationProp<TabParamList, 'Settings'>,
+  NativeStackNavigationProp<RootStackParamList>
+>;
+
+interface SettingsScreenProps {
+  navigation: SettingsScreenNavigationProp;
+}
+
+export const SettingsScreen: React.FC<SettingsScreenProps> = ({ navigation }) => {
+  return (
+    // @ts-ignore
+    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
+      <Header title="Settings" />
+      <View style={styles.content}>
+        
+        <TouchableOpacity onPress={() => navigation.navigate('PersonalInformation')}>
+          <Card noPadding style={styles.menuItem}>
+            <View style={styles.menuIconContainer}>
+              <User color="#4F46E5" size={24} />
+            </View>
+            <View style={styles.menuTextContainer}>
+              <Typography variant="body" weight="bold" style={styles.menuTitle}>
+                Personal Information
+              </Typography>
+              <Typography variant="caption" style={styles.menuSubtitle}>
+                View your profile details
+              </Typography>
+            </View>
+            <ChevronRight color="#9CA3AF" size={20} />
+          </Card>
+        </TouchableOpacity>
+
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 24,
+    marginBottom: 12,
+  },
+  menuIconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#EEF2FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 16,
+  },
+  menuTextContainer: {
+    flex: 1,
+  },
+  menuTitle: {
+    color: '#111827',
+    marginBottom: 2,
+  },
+  menuSubtitle: {
+    color: '#6B7280',
+  }
+});

src/services/apiClient.ts

@@ -0,0 +1,97 @@
+import axios from 'axios';
+import { ENV } from '../config/env';
+
+// Create a configured axios instance
+export const apiClient = axios.create({
+  baseURL: ENV.API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+    'Accept': 'application/json',
+    'x-api-key': ENV.X_API_KEY,
+  },
+  timeout: 10000,
+});
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// Optionally, we can add interceptors here later to inject Bearer tokens
+apiClient.interceptors.request.use(
+  async (config) => {
+    try {
+      const token = await AsyncStorage.getItem('token');
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+    } catch (e) {
+      console.error('Error fetching token from storage', e);
+    }
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+// Add response interceptor to handle 401 Token Expired
+apiClient.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    // Check if error is 401 and we have not already retried
+    if (
+      error.response?.status === 401 &&
+      error.response?.data?.errors?.code === 'TOKEN_EXPIRED' &&
+      !originalRequest._retry
+    ) {
+      originalRequest._retry = true; // Mark as retried to prevent infinite loops
+
+      try {
+        const refreshToken = await AsyncStorage.getItem('refresh_token');
+        
+        if (!refreshToken) {
+          throw new Error('No refresh token available');
+        }
+
+        // Call your refresh endpoint
+        const refreshResponse = await axios.post(`${ENV.API_BASE_URL}/v1/caregiver/auth/refresh`, {
+          refresh_token: refreshToken,
+        }, {
+          headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+            'x-api-key': ENV.X_API_KEY,
+          }
+        });
+
+        // The exact path depends on your backend response structure
+        // Usually it's refreshResponse.data.data.access_token
+        const newAccessToken = refreshResponse.data?.data?.access_token || refreshResponse.data?.access_token;
+        const newRefreshToken = refreshResponse.data?.data?.refresh_token || refreshResponse.data?.refresh_token;
+
+        if (newAccessToken) {
+          await AsyncStorage.setItem('token', newAccessToken); // Ensure 'token' key matches what you use
+          if (newRefreshToken) {
+            await AsyncStorage.setItem('refresh_token', newRefreshToken);
+          }
+
+          // Update the original request's Authorization header
+          originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+
+          // Retry the original failed request with the new token
+          return apiClient(originalRequest);
+        } else {
+          throw new Error('Refresh failed, no access token in response');
+        }
+
+      } catch (refreshError) {
+        console.error('Failed to refresh token', refreshError);
+        // Force user to log out by clearing tokens
+        await AsyncStorage.removeItem('token');
+        await AsyncStorage.removeItem('refresh_token');
+        // If you are using Context or Redux, you may need to dispatch a logout action here
+      }
+    }
+
+    // Return the error if it wasn't a 401 or refresh failed
+    return Promise.reject(error);
+  }
+);

src/services/authService.ts

@@ -0,0 +1,53 @@
+import { apiClient } from './apiClient';
+
+export interface LoginResponse {
+  // Define expected response based on your backend
+  // Typically includes token, user details, etc.
+  success?: boolean;
+  token?: string;
+  message?: string;
+  data?: any;
+}
+
+import { ENV } from '../config/env';
+
+export const authService = {
+  login: async (phone: string): Promise<LoginResponse> => {
+    try {
+      const fullUrl = `${ENV.API_BASE_URL}/v1/caregiver/auth/login`;
+      console.log('----------------------------------------');
+      console.log('ATTEMPTING LOGIN API CALL:');
+      console.log('URL:', fullUrl);
+      console.log('Body:', { phone });
+      console.log('----------------------------------------');
+
+      const response = await apiClient.post<LoginResponse>('/v1/caregiver/auth/login', {
+        phone,
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Login Error:', error);
+      throw error;
+    }
+  },
+
+  verifyOtp: async (phone: string, otp: string): Promise<LoginResponse> => {
+    try {
+      const fullUrl = `${ENV.API_BASE_URL}/v1/caregiver/auth/verify-otp`;
+      console.log('----------------------------------------');
+      console.log('ATTEMPTING OTP VERIFY API CALL:');
+      console.log('URL:', fullUrl);
+      console.log('Body:', { phone, otp });
+      console.log('----------------------------------------');
+
+      const response = await apiClient.post<LoginResponse>('/v1/caregiver/auth/verify-otp', {
+        phone,
+        otp,
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Verify OTP Error:', error);
+      throw error;
+    }
+  },
+};

src/services/profileService.ts

@@ -0,0 +1,176 @@
+import { apiClient } from './apiClient';
+
+export interface CaregiverProfileResponse {
+  success: boolean;
+  status: number;
+  message: string;
+  data: {
+    id: string;
+    photoUrl: string;
+    rating: number;
+    reviewCount: number;
+    careTypes: string[];
+    languages: string[];
+    experienceYears: number;
+    employmentType: string;
+    distanceKm: number | null;
+    isVerified: boolean;
+    hourlyRate: number;
+    user: {
+      name: string;
+      first_name: string;
+      last_name: string;
+      email: string;
+      mobile: string;
+      isd_code: string;
+      gender: string;
+      dob: string;
+      blood_group: string;
+      timezone_id: number;
+      address: {
+        street?: string;
+        city?: string;
+        zip?: string;
+      };
+      country_iso: string;
+      emergency_contact_info: any;
+      profile_image: string;
+      isActive: boolean;
+    };
+  };
+  errors: any;
+  meta: any;
+}
+
+export interface CaregiverAvailability {
+  id?: number;
+  caregiver_profile_id?: number;
+  day_of_week: string;
+  start_time: string;
+  end_time: string;
+  is_available: number;
+}
+
+export const profileService = {
+  getProfile: async (): Promise<CaregiverProfileResponse> => {
+    try {
+      const response = await apiClient.get<CaregiverProfileResponse>('/v1/resource/caregiver/profile');
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching profile:', error);
+      throw error;
+    }
+  },
+
+  updateProfile: async (data: any): Promise<CaregiverProfileResponse> => {
+    try {
+      const response = await apiClient.patch<CaregiverProfileResponse>('/v1/resource/caregiver/profile', data);
+      return response.data;
+    } catch (error) {
+      console.error('Error updating profile:', error);
+      throw error;
+    }
+  },
+
+  uploadAvatar: async (imageUri: string, type: string, fileName: string): Promise<any> => {
+    try {
+      const formData = new FormData();
+      formData.append('file', {
+        uri: imageUri,
+        type: type,
+        name: fileName,
+      } as any);
+
+      const response = await apiClient.post('/v1/users/uploadAvatar', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching availability:', error);
+      throw error;
+    }
+  },
+
+  getOwnSkills: async (): Promise<any[]> => {
+    try {
+      const response = await apiClient.get('/v1/resource/caregiver/skills');
+      return response.data?.data || [];
+    } catch (error) {
+      console.error('Error fetching own skills:', error);
+      throw error;
+    }
+  },
+
+  getCareTypes: async (): Promise<any> => {
+    try {
+      const response = await apiClient.get('/v1/resource/masters/list?master_type=care_type');
+      return response.data?.data?.care_type || [];
+    } catch (error) {
+      console.error('Error fetching care types:', error);
+      throw error;
+    }
+  },
+
+  getCareSubTypes: async (attr_slug: string): Promise<any> => {
+    try {
+      const response = await apiClient.get(`/v1/resource/masters/list?master_type=care_sub_type&attr_slug=${attr_slug}`);
+      return response.data?.data?.care_sub_type || [];
+    } catch (error) {
+      console.error('Error fetching care sub types:', error);
+      throw error;
+    }
+  },
+
+  addSkills: async (skills: string[]): Promise<any> => {
+    try {
+      const response = await apiClient.post('/v1/resource/caregiver/skills/add', { skills });
+      return response.data;
+    } catch (error) {
+      console.error('Error adding skills:', error);
+      throw error;
+    }
+  },
+
+  getAvailability: async (): Promise<CaregiverAvailability[]> => {
+    try {
+      const response = await apiClient.get('/v1/resource/caregiver/availability');
+      return response.data?.data || [];
+    } catch (error) {
+      console.error('Error fetching availability:', error);
+      throw error;
+    }
+  },
+
+  addDayAvailability: async (dayData: CaregiverAvailability): Promise<any> => {
+    try {
+      const payload = { schedule: [dayData] };
+      const response = await apiClient.post('/v1/resource/caregiver/availability', payload);
+      return response.data;
+    } catch (error) {
+      console.error('Error adding day availability:', error);
+      throw error;
+    }
+  },
+
+  updateDayAvailability: async (dayData: CaregiverAvailability): Promise<any> => {
+    try {
+      const response = await apiClient.patch('/v1/resource/caregiver/availability', dayData);
+      return response.data;
+    } catch (error) {
+      console.error('Error updating day availability:', error);
+      throw error;
+    }
+  },
+
+  deleteDayAvailability: async (dayOfWeek: string): Promise<any> => {
+    try {
+      const response = await apiClient.delete(`/v1/resource/caregiver/availability/${dayOfWeek}`);
+      return response.data;
+    } catch (error) {
+      console.error('Error deleting day availability:', error);
+      throw error;
+    }
+  }
+};

src/types/env.d.ts

@@ -0,0 +1,4 @@
+declare module '@env' {
+  export const API_BASE_URL: string;
+  export const X_API_KEY: string;
+}

src/types/index.ts

@@ -0,0 +1,14 @@
+export interface Caregiver {
+  id: string;
+  name: string;
+  role: string;
+  rating: number;
+  reviews: number;
+  experienceYears: number;
+  about: string;
+  specialties: string[];
+  availability: {
+    weekdays: string;
+    weekends: string;
+  };
+}

src/utils/formatters.ts

@@ -0,0 +1,30 @@
+/**
+ * Formats a rating number to a string with one decimal place.
+ * Example: 4.8123 -> "4.8"
+ */
+export const formatRating = (rating: number): string => {
+  return rating.toFixed(1);
+};
+
+/**
+ * Returns initials from a full name.
+ * Example: "Sarah Jenkins" -> "S"
+ */
+export const getInitials = (name: string): string => {
+  return name.charAt(0).toUpperCase();
+};
+
+import { ENV } from '../config/env';
+
+/**
+ * Returns a full URL for an image path.
+ */
+export const getImageUrl = (path?: string | null): string | undefined => {
+  if (!path) return undefined;
+  if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('file://') || path.startsWith('content://') || path.startsWith('data:')) {
+    return path;
+  }
+  const baseUrl = ENV.API_BASE_URL.endsWith('/') ? ENV.API_BASE_URL.slice(0, -1) : ENV.API_BASE_URL;
+  const imagePath = path.startsWith('/') ? path : `/${path}`;
+  return `${baseUrl}${imagePath}`;
+};

tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
+  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

tsconfig.json

@@ -1,3 +1,13 @@
 {
-  "extends": "@react-native/typescript-config/tsconfig.json"
+  "extends": "@react-native/typescript-config/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "nativewind-env.d.ts"
+  ]
 }