Initial implementation of ConfirmationModal in AccountScreen

src/app/components/ConfirmationModal.js

@@ -0,0 +1,96 @@
+import React from "react";
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} from "react-native";
+
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import colors from "../config/colors";
+import { dimensions } from "../config/dimensions";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+function Btn({ label, onPress, bgColor, txtColor }) {
+  return (
+    <TouchableOpacity onPress={() => onPress()}>
+      <View
+        style={{
+          paddingHorizontal: 30,
+          paddingVertical: 5,
+          backgroundColor: bgColor,
+          borderRadius: 6,
+        }}
+      >
+        <Text>{label}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+export default function ConfirmationModal({
+  show,
+  title = "",
+  description = "",
+  confirmationLabel = "",
+  declineLabel = "",
+  onConfirm = () => {},
+  onDecline = () => {},
+}) {
+  console.log("show: " + show);
+  return (
+    <Modal
+      transparent={true}
+      animationType="slide"
+      visible={show}
+      supportedOrientations={["portrait"]}
+    >
+      <View style={styles.container}>
+        <View style={{ flex: 1 }}>
+          <Text style={[styles.text, { fontSize: dimensions.text.secondary }]}>
+            {title}
+          </Text>
+        </View>
+        <Text style={styles.text}>{description}</Text>
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-evenly",
+            marginTop: 24,
+          }}
+        >
+          <Btn
+            label={confirmationLabel}
+            onPress={onConfirm}
+            bgColor={colors.secondary}
+          />
+          <Btn
+            label={declineLabel}
+            onPress={onDecline}
+            bgColor={colors.lightGray}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "80%",
+    height: 150,
+    justifyContent: "center",
+    alignSelf: "center",
+    backgroundColor: colors.lightestGray,
+    borderColor: colors.primary,
+    borderWidth: 2,
+    borderRadius: 12,
+    padding: 12,
+  },
+  text: {
+    fontSize: dimensions.text.default,
+    textAlign: "left",
+    fontWeight: "bold",
+  },
+});

src/app/screens/AccountScreen.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { Text, Image, View, StyleSheet, ScrollView } from "react-native";
 import Screen from "../components/Screen";
 import { AuthContext } from "../auth/context";
@@ -7,11 +7,8 @@ import { TouchableOpacity } from "react-native-gesture-handler";
 import assets from "../config/assets";
 import { MaterialCommunityIcons, FontAwesome } from "@expo/vector-icons";
 import colors from "../config/colors";
+import ConfirmationModal from "../components/ConfirmationModal";
 
-function handleLogOut(setUser) {
-  setUser(null);
-  authStorage.removeToken();
-}
 
 function UserHeader({ name, fone }) {
   return (
@@ -77,6 +74,13 @@ function ProfileItensList({ icon, IconProvider, title, onPress }) {
 
 function AccountScreen(props) {
   const { user, setUser } = useContext(AuthContext);
+  const [ showLog, setShowLog ] = useState(false);
+
+  const logout = () => {
+    setUser(null);
+    authStorage.removeToken();
+  };
+
   const profileItems = [
     {
       icon: "account",
@@ -123,17 +127,17 @@ function AccountScreen(props) {
       IconProvider: MaterialCommunityIcons,
       title: "sair",
       onPress: () => {
-        handleLogOut(setUser);
-      },
-    },
-    {
-      icon: "trash-can",
-      IconProvider: MaterialCommunityIcons,
-      title: "DESATIVAR CONTA",
-      onPress: () => {
-        console.log("7");
+        setShowLog(true)
       },
     },
+    // {
+    //   icon: "trash-can",
+    //   IconProvider: MaterialCommunityIcons,
+    //   title: "DESATIVAR CONTA",
+    //   onPress: () => {
+    //     console.log("7");
+    //   },
+    // },
   ];
 
   return (
@@ -158,6 +162,15 @@ function AccountScreen(props) {
               </View>
             ))}
           </View>
+          <ConfirmationModal
+            show={showLog}
+            title="SAIR"
+            description="Você tem certeza que deseja sair?"
+            confirmationLabel="SIM"
+            declineLabel="NÃO"
+            onConfirm={logout}
+            onDecline={() => setShowLog(false)}
+          />
         </View>
       </ScrollView>
     </Screen>