Introducción

En esta lección, aprenderemos sobre AsyncStorage, una API de React Native que permite almacenar datos de manera persistente en el dispositivo del usuario. AsyncStorage es útil para guardar configuraciones, preferencias del usuario, tokens de autenticación, y otros datos que necesiten ser persistentes entre sesiones de la aplicación.

¿Qué es AsyncStorage?

AsyncStorage es una API asíncrona, no volátil y basada en clave-valor que permite almacenar datos de manera persistente en el dispositivo del usuario. Es similar a localStorage en el navegador, pero diseñada para aplicaciones móviles.

Configuración

Antes de comenzar a usar AsyncStorage, debemos instalar el paquete correspondiente. Ejecuta el siguiente comando en tu terminal:

npm install @react-native-async-storage/async-storage

Luego, asegúrate de vincular el paquete a tu proyecto:

npx pod-install

Uso Básico de AsyncStorage

Importación

Primero, importamos AsyncStorage en nuestro archivo de componente:

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

Guardar Datos

Para guardar datos, utilizamos el método setItem. Este método toma dos argumentos: la clave y el valor que queremos almacenar. Ambos deben ser cadenas de texto.

const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
    console.log('Data stored successfully');
  } catch (e) {
    console.error('Failed to save the data to the storage', e);
  }
};

Leer Datos

Para leer datos, utilizamos el método getItem. Este método toma un argumento: la clave del valor que queremos recuperar.

const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      console.log('Data retrieved successfully:', value);
      return value;
    }
  } catch (e) {
    console.error('Failed to fetch the data from storage', e);
  }
};

Eliminar Datos

Para eliminar datos, utilizamos el método removeItem. Este método toma un argumento: la clave del valor que queremos eliminar.

const removeData = async (key) => {
  try {
    await AsyncStorage.removeItem(key);
    console.log('Data removed successfully');
  } catch (e) {
    console.error('Failed to remove the data from storage', e);
  }
};

Ejemplo Práctico

Vamos a crear un ejemplo práctico donde almacenamos, leemos y eliminamos un valor usando AsyncStorage.

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

const AsyncStorageExample = () => {
  const [inputValue, setInputValue] = useState('');
  const [storedValue, setStoredValue] = useState('');

  const handleSave = async () => {
    await storeData('myKey', inputValue);
    setInputValue('');
  };

  const handleLoad = async () => {
    const value = await getData('myKey');
    setStoredValue(value);
  };

  const handleRemove = async () => {
    await removeData('myKey');
    setStoredValue('');
  };

  return (
    <View>
      <TextInput
        placeholder="Enter some text"
        value={inputValue}
        onChangeText={setInputValue}
      />
      <Button title="Save" onPress={handleSave} />
      <Button title="Load" onPress={handleLoad} />
      <Button title="Remove" onPress={handleRemove} />
      <Text>Stored Value: {storedValue}</Text>
    </View>
  );
};

const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
    console.log('Data stored successfully');
  } catch (e) {
    console.error('Failed to save the data to the storage', e);
  }
};

const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      console.log('Data retrieved successfully:', value);
      return value;
    }
  } catch (e) {
    console.error('Failed to fetch the data from storage', e);
  }
};

const removeData = async (key) => {
  try {
    await AsyncStorage.removeItem(key);
    console.log('Data removed successfully');
  } catch (e) {
    console.error('Failed to remove the data from storage', e);
  }
};

export default AsyncStorageExample;

Ejercicio Práctico

Ejercicio

Crea una aplicación que permita al usuario ingresar su nombre y guardarlo usando AsyncStorage.
Agrega un botón para recuperar y mostrar el nombre almacenado.
Agrega un botón para eliminar el nombre almacenado.

Solución

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

const NameStorageApp = () => {
  const [name, setName] = useState('');
  const [storedName, setStoredName] = useState('');

  const saveName = async () => {
    try {
      await AsyncStorage.setItem('userName', name);
      setName('');
      console.log('Name saved successfully');
    } catch (e) {
      console.error('Failed to save the name', e);
    }
  };

  const loadName = async () => {
    try {
      const value = await AsyncStorage.getItem('userName');
      if (value !== null) {
        setStoredName(value);
        console.log('Name loaded successfully');
      }
    } catch (e) {
      console.error('Failed to load the name', e);
    }
  };

  const removeName = async () => {
    try {
      await AsyncStorage.removeItem('userName');
      setStoredName('');
      console.log('Name removed successfully');
    } catch (e) {
      console.error('Failed to remove the name', e);
    }
  };

  return (
    <View>
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
      />
      <Button title="Save Name" onPress={saveName} />
      <Button title="Load Name" onPress={loadName} />
      <Button title="Remove Name" onPress={removeName} />
      <Text>Stored Name: {storedName}</Text>
    </View>
  );
};

export default NameStorageApp;

Conclusión

En esta lección, hemos aprendido cómo usar AsyncStorage para almacenar, recuperar y eliminar datos de manera persistente en una aplicación React Native. AsyncStorage es una herramienta poderosa para manejar datos locales y es esencial para muchas aplicaciones móviles. Asegúrate de manejar los errores adecuadamente y de probar tu aplicación en diferentes escenarios para garantizar una experiencia de usuario fluida.

AsyncStorage para Datos Locales

Introducción

¿Qué es AsyncStorage?

Configuración

Uso Básico de AsyncStorage

Importación

Guardar Datos

Leer Datos

Eliminar Datos

Ejemplo Práctico

Ejercicio Práctico

Ejercicio

Solución

Conclusión

Curso de React Native

Módulo 1: Introducción a React Native

Módulo 2: Componentes Básicos y Estilizado

Módulo 3: Estado y Ciclo de Vida

Módulo 4: Navegación

Módulo 5: Redes y Datos

Módulo 6: Conceptos Avanzados

Módulo 7: Despliegue y Publicación

Módulo 8: Proyectos del Mundo Real