Will & Skill Developers

Will & Skill Developers

Thoughts, snippets and ideas from the team at Will & Skill AB, Stockholm.



Common debugging strategies when developing React Native apps


When developing apps using React Native you might find yourself spending countless of hours struggling with weird issues and red screens.

Image Alt Text

These following steps will hopefully help you spend more time creating and less time banging your head against the keyboard :).

Keeping it clean

Make sure to remove the node_modules folder and do not forget clean the cache.

Run these commands:

react-native start --reset-cache  
watchman watch-del-all  

or even the GOD clean as some prefer to call it:

# RN >= 0.50
watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache  

Image Alt Text

Sometimes you might even have to remove the native build folders for each platform.

rm -rf ios/build && rm -rf android/build

Keep in mind that removing these folders greatly increases the build time since all the generated filed in them need to be regenerated.

Then reinstall your dependencies using preferred method (Yarn/NPM) However, try to stick to one of them.

Uninstalling the app from the device/simulator can sometimes also prove helpfull

Stay informed

Image Alt Text

Make sure to check the GitHub repositories of your dependencies for issues. Some times you might stumble upon a solution in the issues section that would have saved you hours if not days. Or even steered you away from using the dependency in the first place.

Keep your dependencies updated, but do this with caution since upgrading dependencies might come with breaking changes.

Avoid quickly skimming through or even jumping directly to the example of the ReadMe for the dependency you are about to use. Some times you miss out on critical info regarding usage and compatibly.

Over and out