aula09

app/galeria.js

@@ -5,19 +5,20 @@ import { Link } from "expo-router";
 const imagem1 =
   "https://wallpapers.com/images/featured/desenho-animado-f6iwzuefsy7aohmy.webp";
 
-const imgagem2 = 
-  "https://ingresso-a.akamaihd.net/b2b/production/uploads/articles-content/fb3cfef8-736a-4d0e-9eaf-ffe2b0a04774.jpg"
-    
+const imgagem2 =
+  "https://ingresso-a.akamaihd.net/b2b/production/uploads/articles-content/fb3cfef8-736a-4d0e-9eaf-ffe2b0a04774.jpg";
+
 export default function Galeria() {
   const [imageSize, setImageSize] = useState(200);
   const [imagem, setImagem] = useState(imagem1);
+  const [contador, setContador] = useState(0);
 
   function modificarImagem() {
     setImageSize(imageSize === 200 ? 300 : 200);
   }
 
-  function trocarImagem(){
-    setImagem(imagem === imagem1 ? imgagem2 : imagem1)
+  function trocarImagem() {
+    setImagem(imagem === imagem1 ? imgagem2 : imagem1);
   }
 
   return (
@@ -27,9 +28,13 @@ export default function Galeria() {
           source={{ uri: imagem }}
           style={[styles.img, { width: imageSize, height: imageSize }]}
         />
-
-        <TouchableOpacity style={styles.tch} onPress={modificarImagem}>
-          <Text styte={styles.texto}>
+        <Text>Contador {contador}</Text>
+        <TouchableOpacity
+          style={styles.tch}
+          onPress={modificarImagem}
+          //onPress={() => setContador(contador + 1)}
+        >
+          <Text styte={styles.texto} onPress={() => setContador(contador + 1)}>
             {imageSize === 200 ? "Aumentar" : "Diminuir"}
           </Text>
         </TouchableOpacity>
@@ -39,7 +44,6 @@ export default function Galeria() {
             {imagem === imagem1 ? "Trocar Imagem" : "Voltar Imagem"}
           </Text>
         </TouchableOpacity>
-
       </View>
 
       <View style={styles.container1}>

app/index.js

@@ -1,9 +1,25 @@
-import { Link } from "expo-router";
-import { useState } from "react"
-import { Button, Text, View } from "react-native"
+import { Link, useLocalSearchParams, useRouter } from "expo-router";
+import { useEffect, useState } from "react"
+import { Button, Text, TouchableOpacity, View } from "react-native"
 
 export default function Index() {
     const [contador, setContador] = useState(0);
+    const {logado} = useLocalSearchParams()
+    const [isLogado, setIsLogado] = useState(false)
+    const router = useRouter()
+
+    useEffect(() => {
+        console.log("Parâmetro recebido", logado);
+
+        if (logado) {
+            setIsLogado(true)
+        }
+    }, [logado])
+
+    const sair = () => {
+        setIsLogado(false)
+        router.replace("/login")
+    }
 
     return (
         <View style={{flex: 1, padding: 20}}>
@@ -24,6 +40,26 @@ export default function Index() {
                     justifyContent: 'flex-end',
                     gap: 10
                 }}>
+                    {isLogado ? (
+                        <TouchableOpacity onPress={sair} style={{
+                            backgroundColor: "#db7093",
+                            padding: 10,
+                            borderRadius: 5,
+                            alignItems: 'center'
+                            }}>
+                            <Text>Sair</Text>
+                        </TouchableOpacity>
+                    ): (
+                    <Link href="/login"
+                    style={{
+                        padding: 10,
+                        backgroundColor: "#db7093",
+                        color: '#000',
+                        textAlign: 'center'
+                    }}>
+                        <Text>Fazer login</Text>
+                        </Link>
+                    )}
                     <Link href="/profile"
                     style={{
                         padding: 10,

app/login.js

@@ -0,0 +1,103 @@
+import { useRouter, Link } from "expo-router";
+import { useState } from "react";
+import { ActivityIndicator, Alert, StyleSheet, TextInput, TouchableOpacity, View, Text } from "react-native";
+
+export default function Login(){
+    const [email, setEmail] = useState("ifcadriely@gmail.com")
+    const [password, setPassword] = useState("123456")
+    const router = useRouter()
+    const [loading, setLoading] = useState(false)
+
+    const fazerLogin = () => {
+        if (email && password) {
+            setLoading(true)
+            setTimeout(() => {
+                setLoading(false);
+                if (router.canDismiss()) {
+                    router.dismissAll()
+                }
+                router.replace({
+                    pathname: '/',
+                    params: {
+                        logado: true
+                    }
+                })
+
+            }, 1000);
+        }else{
+            Alert.alert("Preencha todos os campos.")
+        }
+    }
+
+    if (loading) {
+        return(
+            <View style={styles.container}>
+                <ActivityIndicator size="large" color="#db7093" />
+            </View>
+        )
+    }
+
+    return(
+        <View style={styles.container}>
+            <TextInput
+            value={email}
+            onChangeText={setEmail}
+            style={styles.input}
+            placeholder="Informe seu E-mail"
+            keyboardType="email-address"
+            autoCapitalize="none"
+            />
+            <TextInput
+            style={styles.input}
+            placeholder="Informe sua Senha"
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+            />
+            <TouchableOpacity style={styles.button}
+            onPress={fazerLogin}
+            >
+                <Text style={styles.text}>Entrar</Text>
+            </TouchableOpacity>
+            <Link href="/cadastro" style={styles.link}>
+                <Text>Não tem conta? Cadastre-se</Text>
+            </Link>
+            <Link href="/" style={styles.link}
+            >
+                <Text>Ir para Inicio (sem login)</Text>
+            </Link>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        padding: 20
+    },
+    input: {
+        heigth: 50,
+        borderColor: 'pink',
+        borderWidth: 1,
+        fontSize: 16,
+        padding: 10,
+        marginBottom: 10,
+        borderRadius: 5
+    },
+    link: {
+        marginTop: 10,
+        textAlign: 'center',
+        color: '#db7093'
+    },
+    button: {
+        backgroundColor: "#007AFF",
+        padding: 10,
+        borderRadius: 5,
+        alignItems: 'center'
+    },
+    text: {
+        color: 'white',
+        fontSize: 18
+    }
+})