final

app/_layout.jsx

@@ -0,0 +1,34 @@
+import { Slot, Stack } from "expo-router";
+
+
+
+export default function Layout() {
+    return (
+        <Stack
+         screenOptions={{
+            headerStyle: {
+                backgroundColor: 'purple'
+            },
+            headerTintColor: '#FFF', 
+            headerTitleStyle: {
+                fontSize: 22,
+                fontWeight: 'bold'
+            }
+        }}>
+            <Stack.Screen name="index"
+                options={({route}) => ({
+                    title: "Tela Inicial",
+                    headerBackVisible: route.params?.headerBackVisible
+
+                })}/>
+
+            <Stack.Screen name="profile"
+                options={({route}) => ({
+                    title: "Perfil",
+                    headerBackVisible: route.params?.headerBackVisible
+
+                })}/>
+            
+        </Stack>
+    )
+}

app/index.js

@@ -1,14 +1,40 @@
-import { Text, View } from "react-native";
+import { Link } from "expo-router";
+import { useState } from "react";
+import { Button, Text, TouchableOpacity, View} from "react-native";
 
 export default function Index() {
+    const [contador, setContador] = useState(0)
+
+    // é um outro jeito 
+    //function incrementar() {
+    // setContador(contador+1)} 
+
     return (
-       <View style={{
-            flex: 1,
-            backgroundColor: 'yellow',
-            justifyContent: 'center',
-            alignItems: 'center'
-    }}>
-            <Text style={{fontSize: 30}}>Tela inicial</Text>
-       </View>
+        <View style={{flex: 1, padding: 20}}>
+            <View style={{flex: 1, gap: 10}}>
+                <Text style={{fontSize: 24}}>
+                    Tela Inicial
+                </Text>
+                <Text>
+                    Contador {contador}
+                </Text>
+
+                <Button
+                    title="Incrementar"
+                    onPress={() => setContador(contador+1)} //ou onPress {() => (setContador)}
+                />
+                <Button
+                    title="Desencrementar"
+                    onPress={() => setContador(contador-1)}
+                    color='red'
+                />
+            </View>
+            <View style={{flex: 1, justifyContent: "flex-end", gap: 10}}>
+                <Link href="/profile"
+                style={{padding: 10, backgroundColor: "#ddd", borderRadius: 5, alignItems: "center", textAlign: "center"}}>
+                    <Text>Ir para o perfil</Text>
+                </Link>
+            </View>
+        </View>
     )
 }

app/profile.jsx

@@ -0,0 +1,38 @@
+import { View, Text, TextInput } from 'react-native'
+import React, { useState } from 'react'
+import { Link } from 'expo-router'
+
+export default function Profile() {
+    const [nome, setNome] = useState("")
+    return (
+        <View style={{flex: 1, padding: 20}}>
+            <View style={{flex: 1}}>
+                <TextInput style={{
+                    height: 40, padding: 10
+                }}
+                placeholder='Digite seu Nome'
+                value={nome}
+                onChangeText={setNome}/>
+                
+                <Text> Olá, {nome || "visitante"}</Text>
+                    
+            </View>
+            <View style={{flex: 1,
+                justifyContent: 'flex-end'
+            }}>
+                <Link
+                href="/galeria"
+                style={{
+                    padding: 10,
+                    backgroundColor: '#ddd',
+                    borderRadius: 5,
+                    alignItems: 'center',
+                    textAlign: 'center'
+                }}>
+                    <Text> Ir para Galeria</Text>
+                </Link>
+            </View>
+        </View>
+            
+    )
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "meuapp",
   "version": "1.0.0",
-  "main": "expo-router/entry",
+  "main": "expo-router/entry", 
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",