AsyncStorage em React Native com Expo Snack

Persistência de Dados em Aplicações Mobile

Disciplina: Programação para Dispositivos Móveis
Professor: Professor Renato Rocha
Tecnologia: React Native + Expo Snack

Introdução
Durante o desenvolvimento de aplicações mobile, um dos maiores desafios é manter informações salvas
mesmo após o aplicativo ser fechado.

Imagine os seguintes cenários:

um aplicativo de tarefas;
um aplicativo de anotações;
um sistema de login;
um aplicativo de favoritos;
um carrinho de compras;
um sistema de coleta de dados em campo.

Se o usuário fechar o aplicativo e todas as informações desaparecerem, a aplicação perde grande parte de sua
utilidade.

É exatamente nesse contexto que surge o AsyncStorage.

O que é AsyncStorage?
O AsyncStorage é um sistema de armazenamento local utilizado em aplicações React Native.

Ele permite:

salvar dados no dispositivo;

recuperar informações posteriormente;
manter dados persistidos mesmo após o fechamento do aplicativo.
Definição Técnica
O AsyncStorage funciona como um armazenamento local baseado em pares:

CHAVE → VALOR

Exemplo:

"nome" → "Renato"
"tema" → "escuro"
"usuario" → "{dados JSON}"

Analogia Simples
Imagine o AsyncStorage como uma pequena gaveta dentro do celular.

O aplicativo pode:

guardar informações;
abrir a gaveta depois;
recuperar os dados armazenados.

Mesmo que o aplicativo seja fechado, os dados continuam lá.

Para que serve o AsyncStorage?

O AsyncStorage é utilizado principalmente para:

Persistência local
Salvar dados localmente no dispositivo.

Cache de informações
Guardar dados vindos de APIs para uso offline.
Preferências do usuário
Exemplos:

tema escuro;
idioma;
configurações.

Sessão de login
Guardar:

token;
email;
preferências do usuário.

Aplicações offline
Muito utilizado em:

coleta de dados em campo;

agronegócio;
logística;
pesquisas externas.

Quando usar AsyncStorage?

Use AsyncStorage quando:
Os dados forem simples
Precisar persistir informações localmente
O volume de dados for pequeno ou médio
Desejar funcionamento offline
Precisar armazenar configurações
Quando NÃO usar AsyncStorage?
Evite usar quando:
Existirem muitos dados
Precisar de consultas complexas
Precisar de alta performance
Os dados forem extremamente sensíveis
Necessitar de banco relacional

Como o AsyncStorage funciona?

O AsyncStorage funciona de maneira assíncrona.

Isso significa que:

as operações não travam a interface;

o React Native continua executando normalmente.

Instalação no Expo Snack

No Snack Expo, adicione a dependência:

@react-native-async-storage/async-storage

Ou utilize:

npx expo install @react-native-async-storage/async-storage

Importando o AsyncStorage
import AsyncStorage from '@react-native-async-storage/async-storage';
Principais Métodos
Método Função
setItem() Salvar dados
getItem() Recuperar dados
removeItem() Remover dados
clear() Limpar armazenamento

Estrutura Básica
Salvando
await [Link]('chave', 'valor');

Recuperando
const valor = await [Link]('chave');

Removendo
await [Link]('chave');

Primeiro Exemplo Completo

Objetivo
Salvar o nome digitado pelo usuário e recuperá-lo posteriormente.
Código Completo
import React, { useState } from 'react';

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

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

export default function App() {

const [nome, setNome] = useState('');

const [nomeSalvo, setNomeSalvo] = useState('');

async function salvarNome() {

try {

await [Link]('@nome', nome);

alert('Nome salvo com sucesso!');

} catch (erro) {

alert('Erro ao salvar');

async function carregarNome() {

try {

const valor = await [Link]('@nome');

if(valor !== null){

setNomeSalvo(valor);

} else {

alert('Nenhum nome encontrado');

} catch (erro) {

alert('Erro ao carregar');

return (

<View style={[Link]}>

<Text style={[Link]}>
AsyncStorage
</Text>
 <TextInput
placeholder="Digite seu nome"
value={nome}
onChangeText={setNome}
style={[Link]}
/>

<Button
title="Salvar Nome"
onPress={salvarNome}
/>

<View style={{ marginTop: 10 }} />

<Button
title="Carregar Nome"
onPress={carregarNome}
/>

<Text style={[Link]}>
Nome salvo: {nomeSalvo}
</Text>

</View>

);

const styles = [Link]({

container: {
flex: 1,
justifyContent: 'center',
padding: 20
},

titulo: {
fontSize: 28,
fontWeight: 'bold',
marginBottom: 20,
textAlign: 'center'
},

input: {
borderWidth: 1,
borderColor: '#999',
padding: 10,
marginBottom: 20,
borderRadius: 8
},

resultado: {
marginTop: 20,
fontSize: 18
}

});
Explicação do Código

useState()
const [nome, setNome] = useState('');

Armazena o texto digitado.

salvarNome()
await [Link]('@nome', nome);

Salva:

 chave → @nome
 valor → conteúdo digitado.

carregarNome()
const valor = await [Link]('@nome');

Busca o valor salvo anteriormente.

Por que usamos await?

O AsyncStorage é assíncrono.

Sem await:

o código pode continuar antes da operação terminar;

erros e comportamentos inesperados podem ocorrer.

Trabalhando com Objetos

O AsyncStorage salva apenas strings.

Então objetos precisam ser convertidos.

[Link]()
Converte objeto para texto.

[Link](objeto)

[Link]()
Converte texto novamente para objeto.

[Link](texto)

Exemplo com Objeto

const usuario = {
nome: 'Renato',
idade: 30
};

await [Link](
'@usuario',
[Link](usuario)
);

Recuperando Objeto
const dados = await [Link]('@usuario');

const usuario = [Link](dados);

Exemplo Avançado — Lista de Tarefas

Objetivo
Criar CRUD simples utilizando AsyncStorage.

Conceito CRUD
Operação Significado
Create Criar
Read Ler
Update Atualizar
Delete Excluir
Código Completo
import React, { useState, useEffect } from 'react';

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

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

export default function App() {

const [tarefa, setTarefa] = useState('');

const [tarefas, setTarefas] = useState([]);

useEffect(() => {

carregarTarefas();

}, []);

async function carregarTarefas() {

try {

const dados = await [Link]('@tarefas');

if(dados !== null){

setTarefas([Link](dados));

} catch (erro) {

alert('Erro ao carregar tarefas');

async function adicionarTarefa() {

if(tarefa === '') return;

const novaLista = [
...tarefas,
{
id: [Link]().toString(),
nome: tarefa
}
];

setTarefas(novaLista);

await [Link](
'@tarefas',
[Link](novaLista)
);

setTarefa('');
 }

async function removerTarefa(id) {

const novaLista = [Link](

item => [Link] !== id
);

setTarefas(novaLista);

await [Link](
'@tarefas',
[Link](novaLista)
);

return (

<View style={[Link]}>

<Text style={[Link]}>
Lista de Tarefas
</Text>

<TextInput
placeholder="Digite uma tarefa"
value={tarefa}
onChangeText={setTarefa}
style={[Link]}
/>

<Button
title="Adicionar"
onPress={adicionarTarefa}
/>

<FlatList
data={tarefas}
keyExtractor={(item) => [Link]}
renderItem={({ item }) => (

<View style={[Link]}>

<Text style={[Link]}>
{[Link]}
</Text>

<Button
title="Excluir"
onPress={() => removerTarefa([Link])}
/>

</View>

)}
/>

</View>

);

const styles = [Link]({

 container: {
flex: 1,
padding: 20,
marginTop: 50
},

titulo: {
fontSize: 28,
fontWeight: 'bold',
marginBottom: 20
},

input: {
borderWidth: 1,
padding: 10,
borderRadius: 8,
marginBottom: 10
},

item: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 10,
borderWidth: 1,
marginTop: 10,
borderRadius: 8
},

texto: {
fontSize: 18
}

});

Conceitos Importantes no Projeto

useEffect()
useEffect(() => {

carregarTarefas();

}, []);

Executa quando o aplicativo inicia.

FlatList
Utilizada para renderizar listas com melhor performance.
Persistência Automática
Sempre que adicionamos ou removemos:

 atualizamos o estado;
 salvamos novamente no AsyncStorage.

Estrutura de Dados
{
id: "123",
nome: "Estudar React Native"
}

Tratamento de Erros
Sempre utilize:

try {

} catch(erro) {

Erros Mais Comuns

Esquecer await
ERRADO:

const dados = [Link]('@dados');

CERTO:

const dados = await [Link]('@dados');

Salvar objeto sem [Link]
ERRADO:

await [Link]('@obj', objeto);

CERTO:

await [Link](
'@obj',
[Link](objeto)
);

Não tratar null

ERRADO:

[Link](null);

Segurança
O AsyncStorage:

NÃO é criptografado;
NÃO deve armazenar dados extremamente sensíveis.

Evite salvar:

senhas;
informações bancárias;
documentos críticos.

AsyncStorage vs Banco de Dados

AsyncStorage Banco de Dados
Simples Complexo
Chave-valor Estruturado
Pequeno volume Grande volume
Fácil uso Consultas avançadas
Offline simples Alto desempenho
Aplicações Reais
O AsyncStorage é muito utilizado em:

aplicativos agrícolas;
sistemas de coleta em campo;
aplicativos educacionais;
aplicativos offline;
apps de produtividade;
sistemas híbridos.

Desafio Proposto
Desenvolver um aplicativo contendo:
Requisitos

cadastro;
listagem;
remoção;
persistência local;
interface organizada.

Desafio Avançado
Adicionar:

edição;
tema escuro;
favoritos;
categorias;
cache offline;
sincronização futura.
Conclusão
O AsyncStorage é uma das ferramentas mais importantes no desenvolvimento mobile com React Native.

Ele permite:

persistência local;
funcionamento offline;
melhor experiência do usuário;
armazenamento simples e eficiente.

Dominar AsyncStorage é fundamental para qualquer desenvolvedor mobile que deseje construir aplicações
modernas, funcionais e profissionais.

Recomendações Finais
Durante o desenvolvimento:

organizem o código;
utilizem nomes padronizados;
tratem erros;
utilizem JSON corretamente;
pratiquem persistência constantemente.

A melhor maneira de aprender React Native é construindo aplicações reais.