Bug fix: Adjust the on boarding screens to be scrollable

.github/workflows/update.yml

@@ -2,7 +2,7 @@ name: update
 on: 
   pull_request:
     branches:
-     - develop
+     - main
 
 jobs:
   update:

app.json

@@ -1,31 +1,39 @@
 {
   "expo": {
     "name": "matadors-rn-medica",
-    "slug": "matadors-rn-medica",
+    "slug": "medical",
     "scheme": "matadors-rn-medica",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
     "splash": {
       "image": "./assets/images/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "white"
+      "backgroundColor": "#000000"
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true,
       "infoPlist": {
         "NSFaceIDUsageDescription": "This app uses Face ID and Touch ID for some features"
       },
-      "bundleIdentifier": "medical.app"
+      "bundleIdentifier": "com.andela.medica"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
-        "backgroundColor": "white"
+        "backgroundColor": "#000000"
       },
-      "package": "medical.app",
-      "softwareKeyboardLayoutMode": "pan"
+      "package": "com.andela.medica",
+      "softwareKeyboardLayoutMode": "pan",
+      "permissions": [
+        "android.permission.USE_BIOMETRIC",
+        "android.permission.USE_FINGERPRINT",
+        "android.permission.CAMERA",
+        "android.permission.RECORD_AUDIO"
+      ]
     },
     "web": {
       "bundler": "metro",
@@ -65,14 +73,15 @@
         "origin": false
       },
       "eas": {
-        "projectId": "0e90de2a-1056-4ff2-a7c3-3d58fd05665c"
+        "projectId": "3a17d659-91e3-4105-837b-5f88bdee8d37"
       }
     },
     "runtimeVersion": {
       "policy": "appVersion"
     },
     "updates": {
-      "url": "https://u.expo.dev/0e90de2a-1056-4ff2-a7c3-3d58fd05665c"
-    }
+      "url": "https://u.expo.dev/3a17d659-91e3-4105-837b-5f88bdee8d37"
+    },
+    "owner": "tuyishimerwanda"
   }
 }

app/(app)/ActionMenu/Booking/DoctorRatingAndReview.tsx

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { useContext } from "react";
 import {
-  StatusBar,
   StyleSheet,
   Text,
   ScrollView,
@@ -13,27 +12,35 @@ import { Colors } from "@/constants/Colors";
 import { router } from "expo-router";
 import { SvgXml } from "react-native-svg";
 import ReviewerCardComponent from "@/components/ReviewerCardComponent";
-import { LeftArrow } from "@/components/UI/Icons";
 import { fullSmallBlueStar, fullSmallWhiteStar } from "@/components/UI/icons/star";
-import { moreBlackIcon } from "@/constants/icon";
+import { backArrowWhite, moreBlackIcon, moreWhiteIcon } from "@/constants/icon";
+import { ThemeContext } from "@/ctx/ThemeContext";
+import { StatusBar } from "expo-status-bar";
 
 
 
 const DoctorRatingAndReview = () => {
+  const { theme, changeTheme } = useContext(ThemeContext);
+
   return (
-    <View style={styles.container}>
+    <View style={{
+      flex: 1,
+      padding: 24,
+      gap: 20,
+      backgroundColor: theme === "dark"? Colors.dark._1: Colors.others.white
+    }}>
       <SafeAreaView>
         <View style={styles.navBar}>
           <View style={styles.leftSide}>
             <Pressable onPress={() => router.back()}>
-              <LeftArrow fillColor="black" />
+            <SvgXml xml={theme === "dark"? backArrowWhite:backArrowWhite } />
             </Pressable>
             <View>
-              <Text style={Typography.heading._4}>4.8 (4,942 reviews)</Text>
+              <Text style={[Typography.heading._4, {color: theme==="dark"? "white":"black" }]}>4.8 (4,942 reviews)</Text>
             </View>
           </View>
           <View style={styles.rightSide}>
-            <SvgXml xml={moreBlackIcon} />
+            <SvgXml xml={theme === "dark" ? moreWhiteIcon: moreBlackIcon} />
           </View>
         </View>
       </SafeAreaView>
@@ -46,7 +53,7 @@ const DoctorRatingAndReview = () => {
             <Text
               style={[
                 Typography.semiBold.medium,
-                { color: Colors.others.white },
+                { color: theme ===  "dark"?Colors.others.white: Colors.others.black },
               ]}
             >
               All
@@ -164,7 +171,7 @@ const DoctorRatingAndReview = () => {
           <ReviewerCardComponent />
         </ScrollView>
       </View>
-      <StatusBar backgroundColor={"black"} />
+      <StatusBar style={theme==="dark"? "light":"dark"} />
     </View>
   );
 };

app/(app)/Appointments/MessagingAppointment/AttachComponent.tsx

@@ -1,26 +1,40 @@
-import Typography from '@/constants/Typography'
-import React from 'react'
-import { Image, StyleSheet, Text } from 'react-native'
-import { View } from 'react-native'
+import { Colors } from "@/constants/Colors";
+import Typography from "@/constants/Typography";
+import { ThemeContext } from "@/ctx/ThemeContext";
+import React, { useContext } from "react";
+import { Image, StyleSheet, Text } from "react-native";
+import { View } from "react-native";
 
 const AttachComponent = () => {
+  const { theme, changeTheme } = useContext(ThemeContext);
+
   return (
-    <View style={{flexDirection: "row", gap: 20, alignItems: 'center', justifyContent: "center"}}>
+    <View
+      style={{
+        flexDirection: "row",
+        gap: 20,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: theme === "dark" ? Colors.dark._3 : "white",
+        padding: 40,
+        borderRadius: 20,
+      }}
+    >
       <View style={styles.card}>
-        <Image source={require("@/assets/images/documentImg.png")}/>
-        <Text style={[Typography.semiBold.large,styles.text]} >Document</Text>
+        <Image source={require("@/assets/images/documentImg.png")} />
+        <Text style={[Typography.semiBold.large, styles.text, {color: theme==="dark"? "white": "black"}]}>Document</Text>
       </View>
       <View style={styles.card}>
-        <Image source={require("@/assets/images/garellyImg.png")}/>
-        <Text style={[Typography.semiBold.large,styles.text]} >Gallery</Text>
+        <Image source={require("@/assets/images/garellyImg.png")} />
+        <Text style={[Typography.semiBold.large, styles.text,{color: theme==="dark"? "white": "black"}]}>Gallery</Text>
       </View>
       <View style={styles.card}>
-        <Image source={require("@/assets/images/audioImg.png")}/>
-        <Text style={[Typography.semiBold.large,styles.text]} >Audio</Text>
+        <Image source={require("@/assets/images/audioImg.png")} />
+        <Text style={[Typography.semiBold.large, styles.text, {color: theme==="dark"? "white": "black"}]}>Audio</Text>
       </View>
     </View>
-  )
-}
+  );
+};
 
 const styles = StyleSheet.create({
   card: {
@@ -30,7 +44,7 @@ const styles = StyleSheet.create({
   },
   text: {
     textAlign: "center",
-  }
-})
+  },
+});
 
-export default AttachComponent
+export default AttachComponent;

app/(app)/Appointments/MessagingAppointment/Camera.tsx

@@ -1,10 +1,6 @@
-import { circleWithDots } from "@/components/UI/icons/circleWithDots";
-import { BlackFilterIcon } from "@/components/UI/icons/filterIcon";
 import { Colors } from "@/constants/Colors";
 import { ThemeContext } from "@/ctx/ThemeContext";
-import { MaterialIcons } from "@expo/vector-icons";
 import { router } from "expo-router";
-import { StatusBar } from "expo-status-bar";
 import React, { useContext, useRef, useState } from "react";
 import {
   Button,

app/(app)/Appointments/MessagingAppointment/ChatMessaging.tsx

@@ -1,9 +1,8 @@
 import { BlueAttachIcon } from "@/components/UI/icons/attachIcon";
-import { WhiteMessageIcon } from "@/components/UI/icons/blueMessage";
 import { BlueCameraIcon } from "@/components/UI/icons/cameraIcon";
-import { circleWithDots } from "@/components/UI/icons/circleWithDots";
+import {  moreWhiteIcon } from "@/components/UI/icons/circleWithDots";
 import { WhiteDoubleTick, BlueDoubleTick } from "@/components/UI/icons/doubleTickIcon";
-import { BlackFilterIcon } from "@/components/UI/icons/filterIcon";
+import { BlackFilterIcon, filterWhiteIcon } from "@/components/UI/icons/filterIcon";
 import { blueImojiIcon } from "@/components/UI/icons/imojiIcon";
 import { WhiteVoiceIcon } from "@/components/UI/icons/voiceIcon";
 import { Colors } from "@/constants/Colors";
@@ -28,6 +27,8 @@ import { TouchableOpacity } from "react-native";
 import AttachComponent from "./AttachComponent";
 import { Image } from "react-native";
 import PlaySound from "./Playsound";
+import { backArrowBlack, backArrowWhite } from "@/components/UI/icons/backArrow";
+import { MoreIcon } from "@/assets/icons/MoreCircleSvg";
 
 function ChatMessaging() {
   const date = new Date();
@@ -79,9 +80,9 @@ function ChatMessaging() {
 
   return (
     <SafeAreaView
-      style={{ flex: 1, paddingTop: ios ? 10 : 30, backgroundColor: "white" }}
+      style={{ flex: 1, paddingTop: ios ? 10 : 30, backgroundColor:theme==="dark"? Colors.dark._1: "white" }}
     >
-      <StatusBar style="dark" />
+      <StatusBar style={theme ==="dark"? "light": "dark"} />
       <View
         style={{
           flexDirection: "row",
@@ -90,7 +91,7 @@ function ChatMessaging() {
           gap: 30,
           padding: 20,
           backgroundColor:
-            theme === "light" ? Colors.others.white : Colors.others.black,
+            theme === "light" ? Colors.others.white : Colors.dark._1,
         }}
       >
         <Pressable
@@ -100,19 +101,17 @@ function ChatMessaging() {
             alignItems: "center",
             justifyContent: "space-between",
             gap: 20,
-            backgroundColor:
-              theme === "light" ? Colors.others.white : Colors.others.black,
+
           }}
         >
-          <MaterialIcons
-            name="arrow-back"
-            size={25}
-            style={{ alignSelf: "center" }}
-          />
+         <View>
+          <SvgXml xml={theme=== "dark"? backArrowWhite : backArrowBlack} />
+         </View>
           <Text
             style={{
               fontSize: 24,
               fontWeight: "600",
+              color: theme==="dark"? Colors.others.white: Colors.others.black
             }}
           >
             Dr. Drake Boeson
@@ -122,24 +121,19 @@ function ChatMessaging() {
           <View
             style={[
               {
-                backgroundColor: Colors.others.white,
-                borderRadius: 10,
-                padding: 20,
                 position: "absolute",
                 right: 20,
                 top: 50,
-                zIndex:10
               },
-              styles.shadowProp,
             ]}
           >
             <MenuComponent closeMenu={handleChatMenu} />
           </View>
         )}
         <View style={{ flexDirection: "row", gap: 10 }}>
-          <SvgXml xml={BlackFilterIcon} />
+          <SvgXml xml={ theme === "dark" ? filterWhiteIcon : BlackFilterIcon} />
           <TouchableOpacity onPress={handleChatMenu}>
-            <SvgXml xml={circleWithDots} />
+            <SvgXml xml={ theme==="dark"?  moreWhiteIcon:MoreIcon} />
           </TouchableOpacity>
         </View>
       </View>
@@ -169,6 +163,7 @@ function ChatMessaging() {
               backgroundColor: "rgba(117, 117, 117, 0.2)",
               borderRadius: 10,
               marginBottom: 10,
+              color: theme==="dark"? Colors.grayScale._50 : Colors.others.black
             }}
           >
             Session Start
@@ -188,7 +183,7 @@ function ChatMessaging() {
                 flexDirection: "row",
                 alignItems: "baseline",
                 justifyContent:
-                  message.user === "user" ? "flex-start" : "flex-end",
+                message.user === "user" ? "flex-start" : "flex-end",
                 borderBottomEndRadius: message.user === "user" ? 10 : 20,
                 borderBottomStartRadius: message.user === "user1" ? 10 : 20,
                 borderRadius: 20,
@@ -202,9 +197,11 @@ function ChatMessaging() {
                   Typography.medium.xLarge,
                   {
                     color:
-                      message.user === "user" ? Colors.others.white : "black",
+                    message.user === "user" ? Colors.others.white : "black",
                     maxWidth: 250,
-                  },
+                  },{
+                    color: theme ==="dark"? Colors.grayScale._50: "black"
+                  }
                 ]}
               >
                 {message.chat}
@@ -305,13 +302,13 @@ function ChatMessaging() {
             <Text
               style={[
                 Typography.medium.xLarge,
-                { color: Colors.others.black, maxWidth: 250 },
+                { color: theme ==="dark"? Colors.grayScale._50: "black", maxWidth: 250 },
               ]}
             >
               Hi, good afternoon Dr. Drake... 😁😁
             </Text>
             <View>
-              <Text style={{ color: "rgba(117, 117, 117, 0.5)" }}>16:00</Text>
+              <Text style={{ color:  Colors.grayScale._50 }}>16:00</Text>
             </View>
           </View>
           <View
@@ -390,6 +387,7 @@ function ChatMessaging() {
               backgroundColor: "rgba(117, 117, 117, 0.2)",
               borderRadius: 10,
               marginVertical: 10,
+              color: theme==="dark"? Colors.grayScale._50 : "black"
             }}
           >
             Session End
@@ -401,11 +399,8 @@ function ChatMessaging() {
             <View
               style={[
                 {
-                  backgroundColor: Colors.others.white,
-                  padding: 40,
                   position: "absolute",
                   top: -190,
-                  borderRadius: 20,
                   left: 40,
                 },
                 styles.shadowProp,
@@ -486,8 +481,6 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.2,
     shadowRadius: 3,
     elevation: 10,
-    backgroundColor:Colors.others.white
-
   },
 });
 export default ChatMessaging;