Typerror: withCustomKey is not working

[sayem314]

Example code:

const MMKVwithEncryptionKey = new MMKVStorage.Loader().withEncryption().withCustomKey('encryptionKey').initialize();

[sayem314]

.initialize() should not be async btw since there might be immediate .get* call after that line on app boot and await can only be used inside the function.

[ammarahm-ed]

Thanks for reporting this!

There is actually nothing such as withCustomKey, that is a bug in documentation. I will fix it soon.

Use this:

const MMKVwithEncryptionKey = new MMKVStorage.Loader().withEncryption().encryptWithCustomKey('encryptionKey').initialize();

[ammarahm-ed]

Without async the database will not be initialized when you make the get call. That is the other problem.

[sayem314]

Thanks, understood. I'm using it this way now.

// src/store/mmkv.js
import MMKVStorage from 'react-native-mmkv-storage';

class MMKV {
  constructor() {
    this.instance = new MMKVStorage.Loader().withEncryption();
    this.MMKV = null;
  }

  initialize = async () => {
    this.MMKV = await this.instance.initialize();
  };

  setMapAsync = async (name, value) => {
    return this.MMKV.setMapAsync(name, value);
  };

  getMapAsync = async (name) => {
    return this.MMKV.getMapAsync(name);
  };
}

export default new MMKV();

// App.js
import 'react-native-gesture-handler';
import React, {useEffect} from 'react';
import {View, StyleSheet} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import AppNavigator from './src/navigation/AppNavigator';
import {MMKV, dispatch} from './src/store';

export default function App() {
  useEffect(() => {
    MMKV.initialize().then(async () => {
      try {
        const settings = await MMKV.getMapAsync('settings');
        dispatch({type: 'settings', settings});
      } catch (err) {
        console.log(err.message);
      } finally {
        RNBootSplash.hide({duration: 250}); // fade
      }
    });
  }, []);

  return (
    <View style={styles.container}>
      <AppNavigator />
    </View>
  );
}

// other components
import {MMKV} from './src/store';

Btw thanks for the library, just what I wanted :)

[ammarahm-ed]

I will look into it and see if we can make the API directly exposed without async, because async is creating some problems especially with redux-persist etc.

[sayem314]

It seems like data is stored inside the document directory, Is it possible to change it to somewhere else? My app is a file storing app, mmkv folder and sks stuff is being exposed to end users :(

[ammarahm-ed]

What folder is this? I mean the path? @sayem314

[sayem314]

It's storing data inside DocumentDirectoryPath where users are supposed to put data. See https://github.com/itinance/react-native-fs#constants

[ammarahm-ed]

I don't think the document directory is exposed in any file manager directly. Its the App's document directory right? Then I don't understand why are you exposing this directory to the user?

[sayem314]

In iOS there are no other directories for storing flat files, in fact after exposing iTunes file sharing this path is shared on both iTunes and files. On android it's possible to expose another directory but not for iOS. A while ago I have used realm and they don't seem to host on that, not sure where realm data is stored tho.

[ammarahm-ed]

can a folder be hidden? @sayem314

[sayem314]

In-App I can hide it. But since my app downloads files and plays contents in-app I must expose it to the Files app and iTunes, no workaround for iOS. I can use realm but it adds about 5 MB and is meant for complex databases. If you can't change the path I would request you to add .(dot) before filenames and folder so it will be hidden by OS I think, and I would just hide in-app.

[ammarahm-ed]

@sayem314 I will look into it and see what we can do about it.