01_NOVO_PROJETO_EXPO.md

Tendo o Node.js instalado em sua máquina:

npm install -g expo-cli

npx create-expo-app meu-app

---

depois acessar a pasta do novo projeto criado, ex:

cd meu-app

---

antes de iniciarmos o projeto vamos instalar o react-native-paper, recomendo acessar o endereço:

https://callstack.github.io/react-native-paper/getting-started.html

npm install [email protected]

e depois configurar o arquivo babel.config.js assim:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      production: {
        plugins: ['react-native-paper/babel'],
      },
    },
  };
};

---

Por fim para dar "start" no seu projeto, recomendo:

npm start

...ainda dentro da pasta do seu projeto!

02_EXEMPLO_USESTATE.jsx

import { useState } from 'react';
import { View, Text } from 'react-native';
import { Provider as PaperProvider, Button } from 'react-native-paper';

function Contador() {
  // Declara uma nova variável de state, que chamaremos de "count"
  const [count, setCount] = useState(0);

  return (
    <View style={styles.contador}>
      <Text style={styles.contadorLabel}>Você clicou {count}</Text>
      <View style={{ padding: 21 }}>
        <Button mode="contained" onPress={() => setCount(count + 1)}>
          Clique aqui
        </Button>
      </View>
    </View>
  );
}

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

03_LISTA_DE_COMPRAS.jsx

import { useState } from "react";
import { StyleSheet, View, Text } from "react-native";
import { Button } from "react-native-paper";

export default function ListaCompras() {
  const [lista, setLista] = useState([]);

  console.log(`debug`, lista);

  return (
    <View style={styles.listaCompras}>
      {lista.map(item => {
        return (
          <Text key={item} style={{ fontSize: 16, padding: 4 }}>
            {item}
          </Text>
        );
      })}
      <View style={{ padding: 21 }}>
        <Button
          mode="contained"
          onPress={() => {
            setLista([...lista, "Queijo"]);
          }}
        >
          Adicionar Queijo
        </Button>
        <Button
          mode="contained"
          onPress={() => {
            setLista([...lista, "Leite"]);
          }}
        >
          Adicionar Leite
        </Button>
        <Button
          mode="contained"
          onPress={() => {
            setLista([...lista, "Pão"]);
          }}
        >
          Adicionar Pão
        </Button>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  listaCompras: {
    padding: 16,
    borderWidth: 2,
    borderColor: "green",
    marginBottom: 21,
  },
});

04_CARD_PESSOA.jsx

import { useState } from "react";
import { StyleSheet, View, Text } from "react-native";
import { Button } from "react-native-paper";

export default function CardPessoa() {
  const [pessoa, setPessoa] = useState({
    nome: "Lucas",
    sobrenome: "Ferreira",
    idade: 35,
    email: "[email protected]",
    cpf: null,
  });

  console.log("pessoa =>", pessoa);

  return (
    <View style={styles.cardPessoa}>
      <Text style={styles.pessoaLabel}>
        Nome: {pessoa.nome} {pessoa.sobrenome}
      </Text>
      <Text style={styles.pessoaLabel}>E-mail: {pessoa.email}</Text>
      <Text style={styles.pessoaLabel}>Idade: {pessoa.idade}</Text>
      <View style={{ padding: 21 }}>
        <Button
          mode="contained"
          onPress={() => {
            setPessoa({ ...pessoa, nome: "Rafael" });
          }}
          style={{ marginBottom: 9 }}
        >
          Mudar nome para Rafael
        </Button>
        <Button
          mode="contained"
          onPress={() => {
            setPessoa({ ...pessoa, idade: 23 });
          }}
          style={{ marginBottom: 9 }}
        >
          Mudar idade para 23
        </Button>
        <Button
          mode="contained"
          onPress={() => {
            setPessoa({ ...pessoa, cpf: "00.00.00" });
          }}
        >
          Adicionar CPF
        </Button>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  cardPessoa: {
    padding: 16,
    borderWidth: 2,
    borderColor: "blue",
    marginBottom: 21,
  },
  pessoaLabel: {
    fontSize: 21,
    fontWeight: "bold",
    marginBottom: 4,
  },
});

05_INSTALANDO_REACT_NAVIGATION.md

Para instalar o react-navigation em nosso projeto:

npm install @react-navigation/native

E depois se estivermos usando EXPO:

npx expo install react-native-screens react-native-safe-area-context

Na sequencia devemos adaptar o código de nossa função App:

import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* Resto do código de nosso aplicativo */}
    </NavigationContainer>
  );
}

Na sequencia devemos adicionar também nosso primeiro tipo de "navegador" / "modelo de navegação":

npm install @react-navigation/native-stack

Na sequencia recomendo seguirmos este guia aqui:

https://reactnavigation.org/docs/hello-react-navigation

06_EXEMPLO_APP_REACT_NAVIGATION.jsx

import * as React from 'react';
import { View, Text } from 'react-native';
import { Provider as PaperProvider, Button } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 21, marginBottom: 16 }}>Tela Inicial</Text>
      <Button mode="contained" onPress={() => navigation.navigate('Detalhes')}>
        Ir para Detalhes
      </Button>
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 21, marginBottom: 16 }}>
        Outra tela, agora detalhes.
      </Text>
      <Button mode="contained" onPress={() => navigation.goBack()}>
        Voltar
      </Button>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Detalhes" component={DetailsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}

export default App;

07_AsyncHomeScreen.jsx

import { useState, useEffect } from "react";

import {
  StyleSheet,
  KeyboardAvoidingView,
  TouchableWithoutFeedback,
  Keyboard,
  Platform,
  View,
  Text,
} from "react-native";

import { TextInput, Button } from "react-native-paper";

import AsyncStorage from "@react-native-async-storage/async-storage";

export default function AsyncHomeScreen({ navigation }) {
  const [email, setEmail] = useState("");
  const [emailSalvo, setEmailSalvo] = useState("");

  const salvarEmail = async () => {
    try {
      await AsyncStorage.setItem("@email", email);
      setEmailSalvo(email);
      setEmail("");
    } catch (e) {
      // saving error
    }
  };

  const getEmail = async () => {
    try {
      const value = await AsyncStorage.getItem("@email");
      if (value !== null) {
        // se o value for diferente de null, quer dizer que já havia sido salvo anteriormente.
        setEmailSalvo(value);
      }
    } catch (e) {
      // error reading value
    }
  };

  useEffect(() => {
    // recuperando valor no momento que a tela é aberta
    getEmail();
  }, []);

  return (
    <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={styles.container}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={{ flex: 1 }}>
          <View style={styles.formContainer}>
            <Text style={styles.title}>Registrando informações</Text>
            <TextInput
              keyboardType="email-address"
              autoCapitalize="none"
              autoCorrect={false}
              label="Informe seu e-mail"
              value={email}
              onChangeText={texto => setEmail(texto)}
            />
            <Button
              onPress={() => {
                if (email !== "") {
                  salvarEmail();
                  Keyboard.dismiss();
                }
              }}
              mode="contained"
              style={{ marginTop: 16 }}
            >
              Registrar em Async
            </Button>
          </View>
          <View style={{ padding: 21, alignItems: "center", justifyContent: "center" }}>
            <Text style={{ fontSize: 18 }}>{emailSalvo}</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  formContainer: {
    padding: 21,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginTop: 6,
    marginBottom: 18,
  },
});