Persist user preferences of React DevTools when debugging with Flipper

[darrenvong]

Description

When I am debugging my React Native app using the React DevTools in Flipper, I like to change the settings/preferences available, in particular the component filter to remove components I don't care about so I can locate the component I'm after more easily.

However, when the app is being reloaded, the values of the filter (amongst other preferences such as theme colours) aren't being persisted like they do when you use the same tool in the browser (say Chrome). This is a minor inconvenience as I'd like to not have to set the filters up again each time the app reloads.

Apparently this is a known problem due to the lack of a synchronous persistent storage API available on React Native from this conversation I started with @mweststrate @bvaughn @rickhanlonii on this Twitter thread, and I've been encouraged to raise this issue officially so it can be properly tracked and see if others are interested in this feature/solving it etc!

React Native version:

System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 33.91 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.20.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 27, 28, 29
      Build Tools: 28.0.3, 29.0.3
      System Images: android-22 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Start the Metro bundler and the iOS/Android simulator following the standard Environment Setup instructions. Then:

1. Open Flipper and go to React DevTools. Update the user preference by clicking the settings cog.
2. Refresh the app

Expected Results

The user preference persists between app refreshes.

[rickhanlonii]

Thanks for filing this!

As mentioned in the thread, the blocker to this is reading storage synchronously when the bundle loads. Once we can do that, adding this is pretty trivial.

[darrenvong]

Since you mentioned the introduction of the "new architecture" in React Native would be needed to add this, is there any rough timeline on when that would be ready?

[rickhanlonii]

There is not, it's being actively worked on right now.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[darrenvong]

Should we add this to the "Backlog"? It'd be a nice feature to have, especially if once synchronous persistant storage is available, it'd be easy to implement for those who knows how this works :D

[rickhanlonii]

We don't really have a backlog, but once sync persistent storage is available we'll add this.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[swrobel]

The new architecture is available now, so this should be possible, right?

[hoxyq]

Hey, we have plans to support this as a part of React DevTools improvements for https://github.com/react-native-community/discussions-and-proposals/pull/641.

I will follow up once we get more clarity on when this will be implemented and shipped.