¡Reencuéntrate con la tecnología en Platzi Day! Accede a miles de cursos por 72 horas. Una sorpresa te espera 😎

Regístrate

Comienza en:

05D

12H

19M

45S

3

El AsyncStorage que es 30x más rápido y no solamente guarda cadenas

Revisando nuevamente la librería AsyncStorage vi que se encontraba así:
asy-storage.PNG
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

archivos.PNG

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 proyectoimport 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

publicclassMainApplicationextendsApplicationimplementsReactApplication{

  privatefinal ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @OverridepublicbooleangetUseDeveloperSupport(){
          return BuildConfig.DEBUG;
        }

        @Overrideprotected List<ReactPackage> getPackages(){
          returnnew PackageList(this).getPackages();
        }

        @Overrideprotected String getJSMainModuleName(){
          return"index";
        }

        // Agregar este método aquí@Overrideprotected JSIModulePackage getJSIModulePackage(){
          returnnew 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
config.PNG

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’)

ultimo.PNG

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)
            returnfalse;
        }
    }

    storeObject = (key, values) => {
        try {
            MMKV.set(key, JSON.stringify(values))
        } catch(e) {
            console.log('Error storage Object: ', e)
            returnfalse;
        }
    }

    // get a specific keyget = (key) => {
        try {
            // Get the title of the listreturn 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.

https://github.com/mrousavy/react-native-mmkv

Escribe tu comentario
+ 2