npm install -g expo-cli

# Verifique a instalação
expo --version

node --version     # deve mostrar v18.x.x ou superior
npm --version      # deve mostrar 9.x.x ou superior
expo --version     # deve mostrar a versão do Expo CLI

# Cria um novo projeto com o template em branco
npx create-expo-app meu-primeiro-app --template blank

# Entra na pasta do projeto
cd meu-primeiro-app

# Inicia o servidor de desenvolvimento
npx expo start

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
// Importa componentes nativos do React Native
// Não existe <div>, <p> ou <span> — tudo é componente nativo

export default function App() {
  // Função que retorna JSX — a sintaxe que mistura JS com "HTML nativo"
  return (
    <View style={styles.container}>
      {/* View é equivalente a uma <div> no HTML */}
      <Text>Olá, Mundo!</Text>
      {/* Text é o único componente que pode conter texto diretamente */}
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,                    // Ocupa toda a tela disponível
    backgroundColor: '#fff',
    alignItems: 'center',       // Centraliza horizontalmente
    justifyContent: 'center',   // Centraliza verticalmente
  },
});

{
  "expo": {
    "name": "Meu Primeiro App",     // Nome exibido embaixo do ícone no celular
    "slug": "meu-primeiro-app",     // Identificador único na URL do Expo
    "version": "1.0.0",             // Versão do app (major.minor.patch)
    "orientation": "portrait",      // portrait | landscape | default
    "icon": "./assets/icon.png",    // Ícone do app (1024x1024px recomendado)
    "splash": {
      "image": "./assets/splash.png", // Tela de carregamento
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "platforms": ["ios", "android"] // Plataformas alvo
  }
}

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>

      <View style={styles.card}>
        {/* View pode ser aninhada: funciona como <div> com Flexbox */}
        <Text style={styles.titulo}>React Native</Text>
        <Text style={styles.descricao}>
          Todo texto DEVE estar dentro de um componente Text.
          Não existe texto "solto" fora de Text no React Native.
        </Text>
      </View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    padding: 20,
    justifyContent: 'center',
  },
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 20,
    // Sombra no iOS
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    // Sombra no Android
    elevation: 3,
  },
  titulo: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#1a1a1a',
    marginBottom: 8,
  },
  descricao: {
    fontSize: 14,
    color: '#666',
    lineHeight: 22,
  },
});

import { View, Image, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View>
      {/* Imagem local (dentro do projeto) */}
      <Image
        source={require('./assets/icon.png')}
        style={styles.imagemLocal}
      />

      {/* Imagem remota (URL) — OBRIGATÓRIO informar width e height */}
      <Image
        source={{ uri: 'https://picsum.photos/300/200' }}
        style={styles.imagemRemota}
        resizeMode="cover"  // cover | contain | stretch | center
      />
    </View>
  );
}

const styles = StyleSheet.create({
  imagemLocal: {
    width: 80,
    height: 80,
    borderRadius: 40,   // Torna circular (metade do width/height)
  },
  imagemRemota: {
    width: '100%',      // 100% da largura do pai
    height: 200,
    borderRadius: 12,
  },
});

import { View, Text, TouchableOpacity, Pressable, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>

      {/* TouchableOpacity: reduz a opacidade ao pressionar */}
      <TouchableOpacity
        style={styles.botao}
        onPress={() => alert('Botão pressionado!')}
        activeOpacity={0.7}   // Opacidade ao pressionar (0 a 1)
      >
        <Text style={styles.textoBotao}>Toque aqui</Text>
      </TouchableOpacity>

      {/* Pressable: mais moderno, mais controle de estados */}
      <Pressable
        style={({ pressed }) => [
          styles.botao,
          pressed && { opacity: 0.6, transform: [{ scale: 0.97 }] }
        ]}
        onPress={() => console.log('Pressable!')}
      >
        <Text style={styles.textoBotao}>Pressable moderno</Text>
      </Pressable>

    </View>
  );
}

import { useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export default function App() {
  const [nome, setNome] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Digite seu nome"
        placeholderTextColor="#999"
        value={nome}
        onChangeText={setNome}       // Chamado a cada tecla digitada
        autoCapitalize="words"       // none | sentences | words | characters
        keyboardType="default"       // default | numeric | email-address | phone-pad
        returnKeyType="done"         // O botão do teclado: done | next | search
        onSubmitEditing={() => console.log('Enter pressionado')}
      />
      <Text>Você digitou: {nome}</Text>
    </View>
  );
}