novaMudancas

README.md

@@ -18,9 +18,13 @@ criar um aplicativo
 
 ## Comandos 
 
+```bash
+npm install
+```
+
 Comando para rodar o app
 '''bash
-npx espo start
+npx expo start
 '''
 
 Para instalar as bibliotecas necessarias para o projeto

app/galeria.js

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { Text, StyleSheet, Image, TouchableOpacity, View } from "react-native";
+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"
+    
+export default function Galeria() {
+  const [imageSize, setImageSize] = useState(200);
+  const [imagem, setImagem] = useState(imagem1);
+
+  function modificarImagem() {
+    setImageSize(imageSize === 200 ? 300 : 200);
+  }
+
+  function trocarImagem(){
+    setImagem(imagem === imagem1 ? imgagem2 : imagem1)
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.card}>
+        <Image
+          source={{ uri: imagem }}
+          style={[styles.img, { width: imageSize, height: imageSize }]}
+        />
+
+        <TouchableOpacity style={styles.tch} onPress={modificarImagem}>
+          <Text styte={styles.texto}>
+            {imageSize === 200 ? "Aumentar" : "Diminuir"}
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={styles.tch} onPress={trocarImagem}>
+          <Text styte={styles.texto}>
+            {imagem === imagem1 ? "Trocar Imagem" : "Voltar Imagem"}
+          </Text>
+        </TouchableOpacity>
+
+      </View>
+
+      <View style={styles.container1}>
+        <Link href="/configuracoes" style={styles.link}>
+          <Text>Ir para Configurações</Text>
+        </Link>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+  card: {
+    flex: 1,
+    alignItems: "center",
+  },
+  img: {
+    borderRadius: 100,
+  },
+  tch: {
+    backgroundColor: "#db7093",
+    padding: 10,
+    marginTop: 10,
+  },
+  texto: {
+    color: "#fff",
+  },
+  link: {
+    padding: 10,
+    backgroundColor: "#db7093",
+    borderRdius: 5,
+    alignItems: "center",
+    textAlign: "center",
+  },
+  container1: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+});