Revisando nuevamente la librería AsyncStorage vi que se encontraba así:
https://reactnative.dev/docs/asyncstorage
Hasta la misma documentación recomienda usar otros de la comunidad, y en eso descubrí react-native-mmkv que esta siendo actualizado más, puede guardar cadenas, números, booleanos, Objetos y cuenta con soporte Android y iOS, más de sus características en: https://github.com/mrousavy/react-native-mmkv#features
A continuación explicare la forma como lo realice en Android, pero igual cuenta con el paso a paso de iOS. (Puede que se halla actualizado y cambie o se omitan alguno de los siguientes pasos)
Paso 1: instalar en package.json
npm install react-native-mmkv
Paso 2: Realizar unos ajustes con Android Studio para terminar de instalar MMKV completamente
Primero seguir esta instalación: https://github.com/mrousavy/react-native-mmkv/blob/master/INSTALL.md
Si se tiene la librería react-native-reanimated seguir con dichos pasos:
Encontrar la carpeta con los archivos MainActivity.java y MainApplication.java
Luego agregar una New > Java Class donde se encuentran dichas carpetas y poner el nombre {Ejemplo}JSIPackage (puede colocar cualquier nombre, pero es para diferenciar su funcionalidad), para que copie y pegue el siguiente código
package com.example; // Cambie este package de la forma como nombro el proyecto
import com.facebook.react.bridge.JSIModuleSpec;
import com.facebook.react.bridge.JavaScriptContextHolder;
import com.facebook.react.bridge.ReactApplicationContext;
import com.swmansion.reanimated.ReanimatedJSIModulePackage;
import com.reactnativemmkv.MmkvModule;
import java.util.Collections;
import java.util.List;
// TODO: Remove all of this when MMKV and Reanimated can be autoinstalled (maybe RN 0.65)
public class ExampleJSIPackage extends ReanimatedJSIModulePackage {
@Override
public List<JSIModuleSpec> getJSIModules(ReactApplicationContext reactApplicationContext, JavaScriptContextHolder jsContext) {
super.getJSIModules(reactApplicationContext, jsContext);
MmkvModule.install(jsContext, reactApplicationContext.getFilesDir().getAbsolutePath() + "/mmkv");
return Collections.emptyList();
}
}
Mas adelante resolveremos unos problemas en este archivo.
Abrimos MainApplication.java y donde se encuentra el método ReactNativeHost agregamos el JSIModulePackage
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return new PackageList(this).getPackages();
}
@Override
protected String getJSMainModuleName() {
return "index";
}
// Agregar este método aquí
@Override
protected JSIModulePackage getJSIModulePackage() {
return new ExampleJSIPackage(); // <-- el nombre de su paquete
}
};
// ...
Segundo hay que seguir esta configuración para resolver los problemas de un archivo anterior: https://github.com/mrousavy/react-native-mmkv/issues/38
Agregar estas líneas en el Proyect en el archivo settings.gradle
include ':react-native-mmkv'
project(':react-native-mmkv').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-mmkv/android/')
Agregar esta línea donde se implementa otras dependencias en la carpeta app archivo buil.gradle
implementation project(’:react-native-mmkv’)
Paso 3: Importante sincronizar el proyecto
Con esto ya se soluciona los errores y ya se puede implementar la librería.
Paso 4: Agrega la librería e implemente
Aquí una forma como lo implemente, pero seguro se puede mejorar
import { MMKV } from 'react-native-mmkv';
class Storage {
static instance = new Storage();
// store the key and value
store = (key, value) => {
try {
// key need to be a string and value a string, number, bool
MMKV.set(key, value)
} catch(e) {
console.log('Error storage: ', e)
return false;
}
}
storeObject = (key, values) => {
try {
MMKV.set(key, JSON.stringify(values))
} catch(e) {
console.log('Error storage Object: ', e)
return false;
}
}
// get a specific key
get = (key) => {
try {
// Get the title of the list
return MMKV.getString(key)
} catch(e) {
console.log('Error get key: ', e)
}
}
// get a specific key
getObject = (key) => {
try {
const jsonObject = MMKV.getString(key)
// console.log("save list: ", JSON.parse(jsonObject))
return JSON.parse(jsonObject)
} catch(e) {
console.log('Error get key: ', e)
}
}
getAllKeys = () => {
try {
return MMKV.getAllKeys()
} catch(e) {
console.log('Error get all keys: ', e)
}
}
delete = (key) => {
try {
// Delete the list
console.log('the list item is deleted:', key )
return MMKV.delete(key)
} catch(e) {
console.log('Error delete key: ', e)
}
}
}
export default Storage;
Y ya es cuestión de implementarlo donde lo necesitemos y no preocuparnos únicamente que debe ser string:
Para conseguir todas las keys
getLists = () => {
try {
const allKeys = storage.instance.getAllKeys()
const filteredKeys = allKeys.filter((key) => key.includes("item-"))
// console.log("keysObj", filteredKeys)
let keysObj = []
for(let i=0; i<allKeys.length; i++) {
keysObj.push(storage.instance.getObject(filteredKeys[i]))
}
// console.log("keysObj", keysObj)
let objectsKeys = keysObj.map((key) => JSON.parse(key))
// console.log("Array keys", (objectsKeys))
this.setState({ lists: objectsKeys})
} catch (e) {
console.log('error getting lists:', e)
}
}
Borrar todas las keys
removeAllKeys = () => {
const allKeys = storage.instance.getAllKeys()
for(let i=0; i<allKeys.length; i++) {
(storage.instance.delete(allKeys[i]))
console.log("keys", keysObj)
}
}
Remover un item específico
removeItemList = (key, nav) => {
Alert.alert(
"Eliminar Lista",
"¿Estas seguro de eliminar esta lista?",
[
{
text: "Aceptar",
onPress: () => {
try {
storage.instance.delete(`item-${key}`)
nav.navigate('DetailScreen')
} catch(e) {
console.log('Error remove item list', e)
}
}
},
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
]
);
}
Agregar un elemento, en este caso un Objeto
<Pressable
onPress={ () => {
const dataList = {
valOne: title,
valTwo: description,
}
const key = `item-${id}`
storage.instance.storeObject(key, JSON.stringify(dataList))
}}>
Y eso sería todo, si hay algún error no duden en señalarlo y con gusto lo corregiré, y vuelvo a agregar la documentación por si desea conocer más de los que puede hacer la librería o si se les presenta algún error y puedan encontrarlo en el repositorio.
Curso de React Native CLI
