(#132) componentiza backButton e altera navegacao

src/app/public/cadastro.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
-import { View, TextInput, StyleSheet, ScrollView, Text } from "react-native";
-import { Link, router } from "expo-router";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { View, TextInput, StyleSheet, ScrollView } from "react-native";
+import { router } from "expo-router";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import UploadImage from "../../components/UploadImage";
 import { CustomButton } from "../../components/CustomButton";
 import { ErrorMessage } from "../../components/ErrorMessage";
 import Toast from 'react-native-toast-message';
 import { postUser } from "../services/user.service";
+import { BackButton } from "../../components/BackButton";
 
 
 interface IErrors {
@@ -98,11 +98,7 @@ export default function Cadastro() {
 
   return (
     <View>
-      <Link href="/" asChild style={styles.voltar}>
-        <TouchableOpacity>
-          <Icon name="chevron-left" size={42} />
-        </TouchableOpacity>
-      </Link>
+      <BackButton />
 
       <ScrollView>
         <UploadImage setFoto={setFoto} />

src/app/public/login.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { Image, StyleSheet, Text, View, TextInput } from "react-native";
-import { Link, router } from 'expo-router';
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { router } from 'expo-router';
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { CustomButton } from "../../components/CustomButton";
 import Toast from 'react-native-toast-message';
 import { ErrorMessage } from "../../components/ErrorMessage";
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { loginUser } from "../services/user.service";
+import { BackButton } from "../../components/BackButton";
 
 interface IErrors {
     email?: string,
@@ -71,11 +71,7 @@ export default function Login() {
 
     return (
         <View>
-            <Link href="/" asChild style={styles.voltar}>
-                <TouchableOpacity >
-                    <Icon name="chevron-left" size={42} />
-                </TouchableOpacity>
-            </Link>
+            <BackButton />
 
             <View style={styles.imagem}>
                 <Image

src/components/BackButton.tsx

@@ -0,0 +1,20 @@
+import {
+  Pressable,
+  StyleSheet,
+} from 'react-native';
+import { router } from 'expo-router';
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+
+interface IProps {
+  canGoBack?: boolean
+}
+
+export function BackButton({ canGoBack = true }: IProps) {
+  const goBack = () => canGoBack ? router.back() : false;
+
+  return (
+    <Pressable onPress={goBack}>
+      <Icon name="chevron-left" size={40} />
+    </Pressable>
+  );
+};

src/components/LinkButton.tsx

@@ -3,7 +3,7 @@ import {
   StyleSheet,
   Text,
 } from 'react-native';
-import { Link } from 'expo-router';
+import { router } from 'expo-router';
 
 interface Props {
   title: string;
@@ -14,27 +14,24 @@ interface Props {
 export function LinkButton({ title, href, backgroundColor }: Props) {
   backgroundColor = backgroundColor ?? '#2CCDB5';
 
+  const navigate = () => router.push(href);
+
   return (
-    <Link href={href} style={styles(backgroundColor).link} asChild>
-      <Pressable style={styles(backgroundColor).button}>
-        <Text style={styles(backgroundColor).buttonText}>{title}</Text>
-      </Pressable>
-    </Link>
+    <Pressable style={styles(backgroundColor).button} onPress={navigate}>
+      <Text style={styles(backgroundColor).buttonText}>{title}</Text>
+    </Pressable>
   );
 }
 
 const styles = (backgroundColor: string) => StyleSheet.create({
-  link: {
-    width: "100%",
-    marginBottom: 25,
-  },
   buttonText: {
     fontSize: 18,
     color: 'white',
     fontWeight: '700',
   },
   button: {
-    width: "80%",
+    width: "100%",
+    marginBottom: 25,
     maxWidth: 350,
     paddingVertical: 16,
     paddingHorizontal: 26,

src/components/UploadImage.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Image, View, StyleSheet, TouchableOpacity } from 'react-native';
+import { Image, View, StyleSheet, Pressable } from 'react-native';
 import * as ImagePicker from 'expo-image-picker';
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 
@@ -29,7 +29,7 @@ export default function UploadImage({ setFoto } : IProps) {
   return (
     <View style={styles.foto}>
       <Icon style={styles.icone} name="image-outline" size={20} />
-      <TouchableOpacity style={styles.botao} onPress={pickImage} />
+      <Pressable style={styles.botao} onPress={pickImage} />
       {image && <Image source={{ uri: image }} style={styles.imagem} />}
     </View>
   );