FEAT: add profile function

src/screens/profile/AccountSettingsScreen.tsx

 import { useNavigation } from "@react-navigation/core";
 import * as React from "react";
-import { Button, StyleSheet, Image } from "react-native";
+import { Button, StyleSheet, Image, ActivityIndicator } from "react-native";
 import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
 import PlainForm from "../../components/Forms/PlainForm";
 import { useState } from "react";
@@ -8,6 +8,13 @@ import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
 import { RootTabScreenProps } from "../../types/navigation";
 import Spacer from "../../components/Spacer/Spacer";
+import { pickImage, uploadImgToFirebase } from "../../helpers/images";
+import { ImageInfo } from "expo-image-picker/build/ImagePicker.types";
+import { useDispatch } from "react-redux";
+import { setProfilePic } from "../../redux/user/actions";
+import { useSelector } from "react-redux";
+import { RootState } from "../../redux/store";
+import { IUser } from "../../types/firebase/User";
 
 export default function AccountSettingsScreen({
   navigation,
@@ -18,18 +25,50 @@ export default function AccountSettingsScreen({
   const [hp, setHp] = useState("");
   const [bisnis, setBisnis] = useState("");
   const nav = useNavigation();
+  const [isLoading, setIsLoading] = useState(false);
+  const dispatch = useDispatch();
+  const user: IUser = useSelector((state: RootState) => state.user);
+  const handlePickImage = () => {
+    setIsLoading(true);
+    pickImage().then((res) => {
+      if (!res.cancelled) {
+        const { uri } = res as ImageInfo;
+        uploadImgToFirebase(uri, `profile/${user.id}`).then((res) => {
+          dispatch(setProfilePic(res, user.id));
+          setIsLoading(false);
+        });
+      }
+    });
+  };
   return (
     <ScrollView>
       {/* <TouchableOpacity onPress={() => nav.navigate("ChangePassword")}>
         <Text>Ganti Password</Text>
       </TouchableOpacity> */}
       <View style={styles.container}>
-        <View style={styles.profileImage}>{/* <Image></Image> */}</View>
+        <View style={styles.profileImage}>
+          <Image
+            style={styles.image}
+            source={
+              user.pic !== ""
+                ? { uri: user.pic }
+                : require("../../../assets/images/defaultProfilePic.png")
+            }
+          />
+        </View>
         <View>
-          <TouchableOpacity>
+          <TouchableOpacity onPress={() => handlePickImage()}>
             <Text style={styles.text}>Ganti Foto</Text>
           </TouchableOpacity>
         </View>
+        {isLoading && (
+          <ActivityIndicator
+            animating={true}
+            color="#000000"
+            style={{ height: 80, marginTop: 10 }}
+            size="large"
+          />
+        )}
         <Spacer variant="l" />
         <View style={{ width: "100%" }}>
           <PlainForm
@@ -100,14 +139,12 @@ const styles = StyleSheet.create({
     height: 100,
     borderRadius: 100,
     overflow: "hidden",
-    borderColor: Colors.button.primary.bg,
-    borderWidth: 2,
     marginBottom: 8,
   },
   image: {
     flex: 1,
     height: undefined,
-    width: undefined,
+    width: "100%",
   },
   text: {
     fontSize: 16,