dev-plugins icon indicating copy to clipboard operation
dev-plugins copied to clipboard

@dev-plugins/react-native-mmkv - not showing the boolean data from the mmkv store

Open sainjay opened this issue 1 year ago • 5 comments

Boolean data is not showing the Browser for mmkv dev plugin. Can anyone else confirm if they're facing this too?

image

sainjay avatar Jul 09 '24 17:07 sainjay

I'm facing the same problem. Using:

  • react-native-mmkv: 2.12.2
  • @dev-plugins/react-native-mmkv: 0.0.1
  • expo: 51.0.38
  • react-native: 0.74.5

g-otn avatar Nov 13 '24 18:11 g-otn

I believe it has to do with the dev-plugin using getString always: https://github.com/expo/dev-plugins/blob/abe7bad6d4511fab274402c7f10c067fd3e78321/packages/react-native-mmkv/src/useMMKVDevTools.ts#L62

I don't think react-native-mmkv provides a way to retrieve the type of the value you stored (string, boolean, number or ArrayBuffer), so I think a solution would be to use all getters (getBoolean, etc), and show the value of the one which didn't return undefined.

Reading their Contributing though, not sure if this will get attention anytime soon

g-otn avatar Nov 13 '24 18:11 g-otn

@g-otn I tried doing that in local node_module but couldn't figure out how to build.

@Kudo can we add getters for- boolean: storage.getBoolean(key) number: storage.getNumber(key)

sainjay avatar Nov 13 '24 19:11 sainjay

I've created a patch using patch-package as a workaround.

It seems to properly display string, numbers and booleans. However displaying Uint8Array values and editing values other than strings don't work properly.

patches/@dev-plugins+react-native-mmkv+0.0.1.patch
diff --git a/node_modules/@dev-plugins/react-native-mmkv/build/useMMKVDevTools.js b/node_modules/@dev-plugins/react-native-mmkv/build/useMMKVDevTools.js
index bb8b9e0..a556072 100644
--- a/node_modules/@dev-plugins/react-native-mmkv/build/useMMKVDevTools.js
+++ b/node_modules/@dev-plugins/react-native-mmkv/build/useMMKVDevTools.js
@@ -41,7 +41,18 @@ export function useMMKVDevTools({ errorHandler, storage = new MMKV() } = {}) {
         try {
             subscriptions.push(on('getAll', async () => {
                 const keys = storage.getAllKeys();
-                return keys?.map(key => [key, storage.getString(key)]);
+                /**
+                 * PATCH
+                 * 
+                 * Workaround to display number and boolean values.
+                 * May break edit interface, doesn't display Uint8Array values.
+                 * See https://github.com/expo/dev-plugins/issues/44
+                 */
+                return keys?.map(key => [key, 
+                    storage.getString(key) || 
+                    storage.getNumber(key)?.toString() || 
+                    storage.getBoolean(key)?.toString()
+                ]);
             }));
         }
         catch (e) {

g-otn avatar Nov 13 '24 21:11 g-otn

Thanks for sharing @g-otn. Works as expected!

sainjay avatar Nov 14 '24 00:11 sainjay