From 938f378e89378df337327f5f757231a629120bb9 Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Mon, 28 Oct 2024 10:57:50 -0300
Subject: [PATCH] feat: replace alert with toast message

---
 src/components/ToastMessage.tsx |  3 ++-
 src/screens/Profile.tsx         | 20 +++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/ToastMessage.tsx b/src/components/ToastMessage.tsx
index 58e3228..056c284 100644
--- a/src/components/ToastMessage.tsx
+++ b/src/components/ToastMessage.tsx
@@ -20,7 +20,8 @@ export function ToastMessage({
     <Toast
       nativeID={`toast=${id}`}
       action={action}
-      bgColor={action === 'success' ? '$green500' : '$red500'}>
+      bgColor={action === 'success' ? '$green500' : '$red500'}
+      mt="$10">
       <VStack space="xs" w="$full">
         <Pressable onPress={onClose} alignSelf="flex-end">
           <Icon as={X} color="$coolGray50" size="md" />
diff --git a/src/screens/Profile.tsx b/src/screens/Profile.tsx
index ae5a613..81efcf6 100644
--- a/src/screens/Profile.tsx
+++ b/src/screens/Profile.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { Alert, ScrollView, TouchableOpacity } from 'react-native';
-import { Center, Heading, Text, VStack } from '@gluestack-ui/themed';
+import { ScrollView, TouchableOpacity } from 'react-native';
+import { Center, Heading, Text, useToast, VStack } from '@gluestack-ui/themed';
 import * as ImagePicker from 'expo-image-picker';
 import * as FileSystem from 'expo-file-system';
 
@@ -8,10 +8,13 @@ import { Button } from '@components/Button';
 import { Input } from '@components/Input';
 import { ScreenHeader } from '@components/ScreenHeader';
 import { UserPhoto } from '@components/UserPhoto';
+import { ToastMessage } from '@components/ToastMessage';
 
 export function Profile() {
   const [userPhoto, setUserPhoto] = useState('https://i.pravatar.cc/200');
 
+  const toast = useToast();
+
   async function handleUserPhotoSelection() {
     try {
       const photoSelection = await ImagePicker.launchImageLibraryAsync({
@@ -33,7 +36,18 @@ export function Profile() {
         };
 
         if (photoInfo.size && photoInfo.size > 5242880) {
-          return Alert.alert('Essa imagem é muito grande. Escolha uma de até 5MB');
+          return toast.show({
+            placement: 'top',
+            render: ({ id }) => (
+              <ToastMessage
+                id={id}
+                action="error"
+                onClose={() => toast.close(id)}
+                title="Imagem muito grande!"
+                description="Por favor, escolha uma de até 5MB"
+              />
+            ),
+          });
         }
 
         setUserPhoto(photoURI);