Meu Primeiro App com React Native - #13 AsyncStorage

Nesse tutorial falaremos sobre um importante módulo do React Native chamado AsyncStorage. Com esse módulo conseguimos persistir os dados da aplicação.

Persistindo dados com AsyncStorage

views/Login.js

Iremos implementar o AsyncStorage na screen de login do nosso app para que fique armazenados os dados do usuário mesmo após ele fechar o app.

import AsyncStorage from '@react-native-community/async-storage';
//Envio do formulário de login
async function sendForm()
{
    let response=await fetch('http://192.168.0.102:3000/login',{
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            name: user,
            password: password
        })
    });
    let json=await response.json();
    if(json === 'error'){
        setDisplay('flex');
        setTimeout(()=>{
            setDisplay('none');
        },5000);
        await AsyncStorage.clear();
    }else{
        await AsyncStorage.setItem('userData', JSON.stringify(json));
        navigation.navigate('AreaRestrita');
    }
}

Dentro de views criaremos o subdiretório arearestrita.

views/arearestrita/AreaRestrita.js

Começaremos a criar o componente que será acessado apenas pelos usuários logados.

import React, {useState,useEffect} from 'react';
import {Text, View, Button} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

export default function AreaRestrita() {

    const [user,setUser]=useState(null);

    useEffect(()=>{
        async function getUser()
        {
            let response=await AsyncStorage.getItem('userData');
            let json=JSON.parse(response);
            setUser(json.name);
        }
        getUser();
    },[]);

    return (
        <View>
            <Text>Essa é a área restrita</Text>
            <Text>Seja bem vindo {user}</Text>
        </View>
    );
}

Não esqueça de criar o componente AreaRestrita no arquivo App.js

App.js

import AreaRestrita from "./views/arearestrita/AreaRestrita";

<Stack.Screen name="AreaRestrita" component={AreaRestrita} />

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com