Adding custom items to your react native dev menu
Out of all the react native APIs, AsyncStorage is probably the most popular one. It brings all the simplicity of localStorage to mobile development. It’s incredibly convenient and useful for all kinds of data storage.
One thing, though, that I have wanted from the beginning is an easy way to see all the data that’s in my AsyncStorage while debugging. I’ve been wanting to write a native module for a while so I thought why not add an entry to the shaky menu that logs everything in AsyncStorage to the console.
Unfortunately, the native side of react native is pretty much undocumented as far as I can tell. Finding out how things work means reading through github issues and grepping your way through the code base to a code snippet that is useful to you. This also means some familiarity with the iOS/Android frameworks is very helpful.
The main difficulty I faced was making sure the module gets loaded together with the JavaScript bundle when that gets reloaded. This gets achieved by calling a native initialize function from a js file the user has to import. Pressing the dev menu item dispatches a LogAsyncStorage event that, again, gets handled in JavaScript code.This means the package can easily be forked and modified to add other entries to the dev menu.
The code for this project is on github and npm as react-native-async-storage-dev-menu-item. If you have any ideas of other things that might be useful to have quick access to while debugging, feel free to copy or fork my code.
