Merge pull request #65 from atlp-rwanda/ft-camera-and-record

Feature : Implement Chat Features in Medica App

app.json

@@ -42,6 +42,14 @@
       ],
       "expo-font",
       "expo-secure-store",
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
+          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
+          "recordAudioAndroid": true
+        }
+      ],
       [
         "expo-image-picker",
         {

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

@@ -83,7 +83,11 @@ const DoctorDetails = () => {
   const {theme, changeTheme} = useContext(ThemeContext)
 
   return (
-    <View style={[styles.container, {backgroundColor: theme === "dark" ? Colors.others.black : Colors.others.white}]}>
+    <ScrollView style={[styles.container, { backgroundColor: theme === "dark" ? Colors.others.black : Colors.others.white }]}
+      contentContainerStyle={{
+      height:"100%"
+    }}
+    >
       <SafeAreaView>
         <View style={styles.navBar}>
           <View style={styles.leftSide}>
@@ -256,7 +260,7 @@ const DoctorDetails = () => {
         </Pressable>
       </View>
       <StatusBar backgroundColor={"black"} />
-    </View>
+    </ScrollView>
   );
 };
 

app/(app)/ActionMenu/Booking/Select-package.tsx

@@ -38,9 +38,7 @@ const SelectPackage = () => {
                 <Pressable 
                 onPress={()=> router.back()}
                 style={styles.container}>
-                    <TouchableOpacity>
                         <MaterialIcons name="arrow-back" size={23} />
-                    </TouchableOpacity>
                     <Text style={styles.fill}>Select Package</Text>
                 </Pressable>
                 <View style={styles.middle}>

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

@@ -0,0 +1,36 @@
+import Typography from '@/constants/Typography'
+import React from 'react'
+import { Image, StyleSheet, Text } from 'react-native'
+import { View } from 'react-native'
+
+const AttachComponent = () => {
+  return (
+    <View style={{flexDirection: "row", gap: 20, alignItems: 'center', justifyContent: "center"}}>
+      <View style={styles.card}>
+        <Image source={require("@/assets/images/documentImg.png")}/>
+        <Text style={[Typography.semiBold.large,styles.text]} >Document</Text>
+      </View>
+      <View style={styles.card}>
+        <Image source={require("@/assets/images/garellyImg.png")}/>
+        <Text style={[Typography.semiBold.large,styles.text]} >Gallery</Text>
+      </View>
+      <View style={styles.card}>
+        <Image source={require("@/assets/images/audioImg.png")}/>
+        <Text style={[Typography.semiBold.large,styles.text]} >Audio</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    gap: 10,
+    alignContent: "center",
+    justifyContent: "center",
+  },
+  text: {
+    textAlign: "center",
+  }
+})
+
+export default AttachComponent

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

@@ -0,0 +1,109 @@
+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,
+  Pressable,
+  Text,
+  TouchableOpacity,
+  View 
+} from "react-native";
+import { SvgXml } from "react-native-svg";
+import { CameraView, useCameraPermissions} from "expo-camera";
+import { backArrowWhite } from "@/components/UI/icons/backArrow";
+import { whiteSwitchCamera } from "@/components/UI/icons/cameraIcon";
+import { WhiteFlashLight } from "@/components/UI/icons/flashLight";
+import * as MediaLibrary from 'expo-media-library';
+
+function CameraComponent() {
+  const { theme, changeTheme } = useContext(ThemeContext);
+  const [permission, requestPermission] = useCameraPermissions();
+  const [facing, setFacing] = useState("back");
+  const [flashMode, setFlashMode] = useState(false)
+  const [voiceRecorder, setVoiceRecorder] = useState(false)
+  const cameraRef = useRef(null)
+
+  if (!permission) {
+    return <View />;
+  }
+
+  if (!permission.granted) {
+    return (
+      <View>
+        <Text>We need permission to show the camera</Text>
+        <Button onPress={requestPermission} title="grant permission" />
+      </View>
+    );
+  }
+
+  function toggleCameraFacing() {
+    setFacing((current) => (current === "back" ? "front" : "back"));
+  }
+  function toggleFlashMode(){
+    setFlashMode(!flashMode)
+  }
+
+  const takePicture = async () => {
+    if (cameraRef.current) {
+      try {
+        const photo = await cameraRef.current.takePictureAsync();
+        console.log(photo.uri);
+        const asset = await MediaLibrary.createAssetAsync(photo.uri);
+        await MediaLibrary.saveToLibraryAsync(asset);
+        console.log("Picture saved to gallery!");
+      } catch (error) {
+        console.error("Error taking picture:", error);
+      }
+    } else {
+      console.log("Camera reference is not set");
+    }
+  };
+
+
+  return (
+    <View style={{ flex: 1, justifyContent: "center" }}>
+      <CameraView
+     facing={facing}
+     enableTorch={flashMode}
+     ref={cameraRef}
+      style={{ flex: 1, justifyContent: "space-between", paddingVertical: 100 }} >
+        <Pressable
+          onPress={() => router.back()}
+          style={{
+            paddingHorizontal: 60
+          }}
+        >
+          <SvgXml xml={backArrowWhite} />
+        </Pressable >
+        <View style={{flexDirection: "row", alignItems: "center", gap: 40,justifyContent: "center" }}>
+          <TouchableOpacity
+          onPress={toggleFlashMode}
+            style={{backgroundColor:"rgba(240, 240, 240, 0.2)", padding: 20, borderRadius: 100  }}
+          >
+          <SvgXml xml={WhiteFlashLight}/>
+
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={takePicture}
+            style={{  alignItems: "center", borderWidth: 5, width: 100, height: 100, borderColor: Colors.main.primary._500, borderRadius: 100 }}
+          >
+            <View style={{backgroundColor:"rgba(240, 240, 240, 0.7)", width: "100%", height: "100%", borderRadius: 100 }}></View>
+
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={toggleCameraFacing}
+            style={{backgroundColor:"rgba(240, 240, 240, 0.2)", padding: 20, borderRadius: 100  }}
+          >
+            <SvgXml xml={whiteSwitchCamera}/>
+          </TouchableOpacity>
+        </View>
+      </CameraView>
+    </View>
+  );
+}
+export default CameraComponent;