Feature: remove doctors from favorite

app/(app)/ActionMenu/FavoriteDoctorScreen.tsx

@@ -16,6 +16,7 @@ import HeaderComponent from '@/components/HeaderComponent';
 import SearchComponent from '@/components/SearchComponent';
 import FoundDoctorCount from '@/components/FoundDoctorCount';
 import NofoundComponent from '@/components/NofoundComponent';
+import RemovefavoritePopup from '@/components/RemovefavoritePopup';
 import NotFoundScreen from '@/app/+not-found';
 
 
@@ -62,6 +63,8 @@ function DoctorScreen() {
     const [showSearch, setShowSearch] = useState<boolean>(false)
     const [searchTerm, setSearchTerm] = useState<string>('')
     const [selectedCategory, setSelectedCategory] = useState(data.categories[0])
+    const [showpopUp, setShowPopup] = useState(false)
+    const [selectedDoctor,setSelectedDoctor]=useState()
 
     const handleSearchPressed = () => {
         setShowSearch(true)
@@ -74,6 +77,11 @@ function DoctorScreen() {
         setSelectedCategory(category),
             setSearchTerm('')
     }
+    const handleRemove = (doctor:any) => {
+        setSelectedDoctor(doctor)
+
+        setShowPopup(true)
+    }
 
     const filteredDoctors=searchTerm.length>0 ? selectedCategory.Doctors.filter(doctor=>doctor.name.toLowerCase().includes(searchTerm)):selectedCategory.Doctors
     return (
@@ -153,6 +161,7 @@ function DoctorScreen() {
                                             star={iconMapping[doctor.star]}
                                             review={doctor.review}
                                             rate={doctor.rate}
+                                            remove={()=>handleRemove(doctor)}
 
                                         />
                                     </View>
@@ -162,17 +171,24 @@ function DoctorScreen() {
                         ) : (
                              <NofoundComponent/>   
                     )}
-
-
+
 
-
+                    </ScrollView>
 
-
-                </ScrollView>
                 </View>
+
 
 
             </View>
+            <RemovefavoritePopup
+                cancel={()=>setShowPopup(false)}
+                visible={showpopUp}
+                onClose={() => setShowPopup(false)}
+                doctor={selectedDoctor}
+
+
+            />
+
 
         </SafeAreaView>
 
@@ -183,11 +199,7 @@ export default DoctorScreen;
 
 const styles = StyleSheet.create({
     container: {
-        width: "100%",
-        height:"100%",
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "center",
+        flex: 1,
         backgroundColor: "white",
         zIndex:1
     },

components/DoctorComponent.tsx

@@ -10,9 +10,10 @@ interface DoctorComponentProps{
     hospital: string,
     star: ReactElement,
     rate: string,
-    review:string
+    review: string,
+    remove:()=>void
 }
-function DoctorComponent({imageSource,name,iconComponent,professionalTitle,hospital,star,rate,review}:DoctorComponentProps) {
+function DoctorComponent({imageSource,name,iconComponent,professionalTitle,hospital,star,rate,review,remove}:DoctorComponentProps) {
     return (
         <View style={styles.outer}>
             <View style={styles.inner}>
@@ -26,11 +27,11 @@ function DoctorComponent({imageSource,name,iconComponent,professionalTitle,hospi
                             <Text  style={Typography.bold.xLarge}   >{ name}</Text>
 
                         </View>
-                        <View style={styles.heartIconView}>
+                        <Pressable style={styles.heartIconView} onPress={remove}>
                             { iconComponent}
 
 
-                        </View>
+                        </Pressable>
                     </View>
                     <View style={styles.horizontal}></View>
                     <View style={styles.lowerView}>

components/Removebtn.tsx

@@ -0,0 +1,41 @@
+import React,{ReactElement, useState} from 'react';
+import { StyleSheet, Text, Image, View, TouchableHighlight, SafeAreaView, Button, Alert, Platform, StatusBar, Dimensions,TextInput, Pressable,ImageURISource} from 'react-native'
+import Typography from '@/constants/Typography';
+import { SvgXml } from "react-native-svg"
+
+interface RemovebtnProps{
+    text: string,
+    action: () => void,
+    backColor: string,
+    textColor:string
+
+
+}
+
+function Removebtn({text,action,backColor,textColor}:RemovebtnProps) {
+    return (
+        <Pressable onPress={action} style={[styles.outer, { backgroundColor:backColor }]}>
+            <Text style={[styles.textSize, { color: textColor }]}>{text }</Text>
+
+        </Pressable>
+    );
+}
+
+export default Removebtn;
+
+const styles = StyleSheet.create({
+    outer: {
+        width:"45%",
+        height: 50,
+        paddingHorizontal: 25,
+        paddingVertical: 5,
+        borderRadius: 20,
+        display: "flex",
+        flexDirection: "row",
+        justifyContent:"center",
+        alignItems:"center"
+    },
+    textSize: {
+        fontSize:16
+    }
+})

components/RemovefavoritePopup.tsx

@@ -0,0 +1,193 @@
+import React,{ReactElement, useState,useRef,useEffect} from 'react';
+import { StyleSheet, Text, Image, View,Animated, TouchableHighlight, SafeAreaView, Button, Alert, Platform, StatusBar, Dimensions,TextInput, Pressable,ImageURISource} from 'react-native'
+import Typography from '@/constants/Typography';
+import { SvgXml } from "react-native-svg"
+import { blueheart } from '@/assets/icons/blueHeart';
+import { star } from '@/assets/icons/star';
+import Removebtn from './Removebtn';
+import { overlay } from 'react-native-paper';
+import DoctorComponent from './DoctorComponent';
+
+interface imageMapProp{
+    [key:string]:ReturnType<typeof require>
+}
+interface iconMappingProp{
+    [key :string]:ReactElement
+}
+
+
+interface RemovefavoritepopProps{
+    visible: boolean,
+    onClose: () => void,
+    cancel: () => void,
+    doctor:any
+}
+export const iconMapping:iconMappingProp = {
+    heart: <SvgXml xml={blueheart} />,
+    star: <SvgXml xml={star} />,
+}
+const imageMap: imageMapProp = {
+    'doctor1.png': require("../assets/images/Doctors/doctor1.png"),
+    'doctor2.png': require("../assets/images/Doctors/doctor2.png"),
+    'doctor3.png': require("../assets/images/Doctors/doctor3.png"),
+    'doctor4.png': require("../assets/images/Doctors/doctor4.png"),
+    'doctor5.png':require("../assets/images/Doctors/doctor5.png")
+
+}
+
+
+function RemovefavoritePopup({ visible, onClose, cancel, doctor }: RemovefavoritepopProps) {
+    const [showpopUp, setShowPopup] = useState(false)
+    const [selectedDoctor,setSelectedDoctor]=useState()
+     const handleRemove = (doctor:any) => {
+        setSelectedDoctor(doctor)
+
+        setShowPopup(true)
+    }
+    const translateY = useRef(new Animated.Value(0)).current
+    useEffect(() => {
+        if (visible) {
+            Animated.timing(translateY, {
+                toValue: -1,
+                duration: 300,
+                useNativeDriver:true
+            }).start()
+        } else {
+            Animated.timing(translateY, {
+                toValue: 1,
+                duration: 300,
+                useNativeDriver:true
+            }).start()
+        }
+    }, [visible])
+    if(!visible) return null
+    return (
+        <SafeAreaView style={styles.overlay}>
+        <Animated.View style={[styles.outer,{ transform: [{ translateY: translateY.interpolate({ inputRange: [-1, 1], outputRange: [0, 300] }) }] }]}>
+            <View style={styles.inner}>
+                    <View style={styles.intro}><Text style={styles.introText}>Remove From Favorites?</Text></View>
+                    <View style={styles.horizontal}></View>
+                    <View style={styles.displayComponent}>
+
+                        <View  style={styles.componentView}>
+                                        <DoctorComponent
+
+                                            imageSource={imageMap[doctor.imageSource]}
+                                            name={doctor.name}
+                                            iconComponent={iconMapping[doctor.iconComponent]}
+                                            professionalTitle={doctor.professionalTitle}
+                                            hospital={doctor.hospital}
+                                            star={iconMapping[doctor.star]}
+                                            review={doctor.review}
+                                            rate={doctor.rate}
+                                            remove={()=>handleRemove(doctor)}
+
+                                        />
+                                    </View>
+                </View>
+                <View style={styles.btnView}>
+                    <Removebtn
+                        action={cancel} 
+                        backColor="#E9F0FF"
+                        text="Cancel"
+                        textColor="#246BFD"
+
+                    />
+                    <Removebtn
+                        action={() => console.log("remove")}
+                        backColor='#246BFD'
+                        text="Yes,Remove"
+                        textColor="white"
+
+
+
+
+                    />
+                </View>
+
+            </View>
+
+
+        </Animated.View>
+        </SafeAreaView>
+    );
+}
+
+export default RemovefavoritePopup;
+
+const styles = StyleSheet.create({
+    overlay: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        backgroundColor: 'rgba(80, 85, 94, 0.8)',
+        justifyContent: 'flex-end',
+         zIndex: 1000,
+
+    },
+    outer: {
+        width: "100%",
+        height: "40%",
+        zIndex:1000,
+        backgroundColor: '#FAFAFA',
+        borderTopLeftRadius: 20,
+         borderTopRightRadius: 20,
+       shadowColor: '#000',
+       shadowOffset: { width: 0, height: -2 },
+        shadowOpacity: 0.3,
+        shadowRadius: 10,
+       elevation: 5,
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+
+    },
+    intro: {
+        width: "100%",
+        height: 40,
+        marginBottom:"5%",
+        marginTop:"5%",
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: 'center',
+    },
+    introText: {
+        color: "#212121",
+        fontWeight: "bold",
+        fontSize:20
+    },
+    inner: {  
+        width: "90%",
+        backgroundColor:"#FAFAFA"
+    },
+    displayComponent: {
+
+    },
+    btnView: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems:'center'      
+    },
+    componentView: {
+        backgroundColor:"#FDFDFD",
+        marginBottom: "5%",
+        width: "100%",
+        height: 150,
+        borderRadius:20,
+       display: "flex",
+        flexDirection: 'row',
+        justifyContent: "center",
+        alignItems: "center",
+        zIndex:10000
+    },
+    horizontal: {
+        width: "100%",
+        borderWidth: 1,
+        borderColor:"#EEEEEE",
+        marginBottom: "6%",
+         backgroundColor:"#EEEEEE"
+    }
+
+})

data.json

@@ -30,6 +30,7 @@
       "sentenceTwo": "Alan Watson on December 24, 2024, 13:00 p.m. 80% of the",
       "sentenceThree": "funds will be returned to your account.",
       "btnVisibility": "none"
+
     },
     {
       "IconComponent": "service",