fausto95 / rn-async-storage-flipper

React Native's Async Storage logger for Flipper

Async-Storage Flipper

Async-Storage debugger for Flipper.

Getting Started

1. Install these libraries in your react-native app.

yarn add rn-async-storage-flipper react-native-flipper

For iOS, you'll need to run

cd ios && pod install

2. Import the rn-async-storage-flipper library and pass as argument your storage instance.

import RNAsyncStorageFlipper from 'rn-async-storage-flipper';

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

// We recommend to invoke the function inside a componentDidMount or useEffect
RNAsyncStorageFlipper(AsyncStorage);

Note that you storage must have the following async methods:

• getAllKeys

• multiGet

3. Install the flipper-plugin-async-storage in Flipper app

4. Re-run your app

rn-async-storage-flipper's Issues

Save the connection for later usage

Generate an unique ID for each row of the table

Use a React component

Implement a React component instead of the current implementation for the plugin UI

react-native-flipper hard dependency

It looks like the plugin has both a dependency and peerDependency on react-native-flipper v0.37.0, which is causing peer requirements to fail (for version 0.83.0) in yarn.

rn-async-storage-flipper/packages/rn-async-storage-flipper/package.json

Lines 25 to 27 in 48a063e

	"dependencies": {
	"react-native-flipper": "^0.37.0"
	},

If you need this provided for developing locally, is it safe to remove dependencies entirely and rely on devDependencies?

Deleted Keys not disappearing in table view

When a key/value is displayed in Flipper and you delete that key with something like await AsyncStorage.removeItem(KEY) the state of the table still shows that the key with old values is there.

RN: 0.62.2
Flipper: 0.49.0
@react-native-community/async-storage: 1.11.0

react-native-flipper is a duplicate dependency

It's in the peer deps and the "real" deps and is a fairly old version. I can make a PR, but wondered if there's any intent around the fact that it's in both places.

Ability to edit data

Diff persisted data

When the data is persisted and we refresh the page, we should diff the current data we have and the incoming one to determine if we need to update

Get data from Flipper client plugin

On cold starts, we might not have the data in the client, we should have a button to send a message to the RN client in order to get data back.

readonly types in AsyncStorage Typescript break this package

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Typescript error as referenced in #46

Here is the diff that solved my problem:

diff --git a/node_modules/rn-async-storage-flipper/index.d.ts b/node_modules/rn-async-storage-flipper/index.d.ts
index 704da6a..08d7117 100644
--- a/node_modules/rn-async-storage-flipper/index.d.ts
+++ b/node_modules/rn-async-storage-flipper/index.d.ts
@@ -1,10 +1,10 @@
 interface Storage {
-    getAllKeys(callback?: (error?: Error, keys?: string[]) => void): Promise<string[]>;
+    getAllKeys(callback?: (error?: Error | null, keys?: readonly string[] | null) => void): Promise<readonly string[]>;
 
     multiGet(
         keys: string[],
-        callback?: (errors?: Error[], result?: [string, string | null][]) => void
-    ): Promise<[string, string | null][]>;
+        callback?: (errors: readonly (Error | null)[] | null | undefined, result?: readonly [string, string | null][]) => void
+    ): Promise<void | readonly [string, string | null][]>;
 }
 
 export default function RNAsyncStorageFlipper(_storage: Storage): void;

This issue body was partially generated by patch-package.

AsyncStorage broke this in 1.16.0

IMHO it's their fault for doing this in a minor, BUT:

error TS2345: Argument of type 'AsyncStorageStatic' is not assignable to parameter of type 'Storage'.
  Types of property 'getAllKeys' are incompatible.
    Type '(callback?: CallbackWithResult<readonly string[]> | undefined) => Promise<readonly string[]>' is not assignable to type '(callback?: ((error?: Error | undefined, keys?: string[] | undefined) => void) | undefined) => Promise<string[]>'.
      Types of parameters 'callback' and 'callback' are incompatible.
        Types of parameters 'error' and 'error' are incompatible.
          Type 'Error | null | undefined' is not assignable to type 'Error | undefined'.
            Type 'null' is not assignable to type 'Error | undefined'.

Which happens on:

    RNAsyncStorageFlipper(AsyncStorage);

Needs a way to embed only on dev mode

It would be cool if we could apply this plugin only in development mode, much like react-query-native-devtools does.

Receiver sendMeData not found

When pressing "Get Data" it triggers a flipper "crash":

With only this information available in the crash reporter:

I see no mentions of sendMeData anywhere other than

rn-async-storage-flipper/packages/flipper-plugin-async-storage/index.js

Line 69 in ccc5c5c

sendMeData = () => {

But I see no attempts to register this receiver or anything like it.

I'm using Flipper 0.81.0 but also tried the most recent 0.84 (which has a performance regression issue).
Any idea what could cause this? From what I can tell it's using client.call() which is deprecated:
https://fbflipper.com/docs/extending/js-plugin-api

Peer dependencies are too restrictive

The peerDependecies for rn-async-storage-flipper are too restrictive:

rn-async-storage-flipper/packages/rn-async-storage-flipper/package.json

Lines 20 to 24 in 83996f5

	"peerDependencies": {
	"@react-native-async-storage/async-storage": "^1.15.2",
	"react-native": "^0.62.0",
	"react-native-flipper": "^0.37.0"
	},

With @react-native-async-storage/async-storage: 1.15.4, react-native: 0.63.2 and react-native-flipper: 0.87.0 I got two warning when running npm install:

npm WARN [email protected] requires a peer of react-native@^0.62.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-native-flipper@^0.37.0 but none is installed. You must install peer dependencies yourself.

npm semver consider react-native: 0.63.2 not compatible with ^0.62.0 because the major version is 0 (Same behavior with react-native-flipper)

Please remove peerDependecies or make them less restrictive in particular for react-native and react-native-flipper because these libraries are updated very often

Persist State

https://fbflipper.com/docs/extending/js-plugin-api.html#persistedstate

Clearer Documentation regarding Usage

Hi,

Thanks for the library. I am a big fan of it. I am a little confused about how to use it though.

The README mentions that we should use RNAsyncStorageFlipper(AsyncStorage) - but do we do this just once, or do we run this every time we want to update the reading from the Database? Because I do it once in App.js and the values never update.

Thanks.

@react-native-community/async-storage peerDependency

rn-async-storage-flipper depends on @react-native-community/async-storage, but they've split off into their own org: @react-native-async-storage/async-storage

NPM page contains broken links

NPM page for this package (https://www.npmjs.com/package/flipper-plugin-async-storage) has 2 broken links:

• https://github.com/Fausto95/rn-async-storage-flipper/blob/rn-async-storage-flipper/
• https://github.com/Fausto95/rn-async-storage-flipper/blob/HEAD/flipper-plugin-async-storage

Probably they became broken after Github changed URL structure