The importance of debugging in React Native development.

You are working smoothly on new functionality, suddenly something goes wrong and you can’t find the reason why. You are cursing, frustrated, nothing seems to work. Trying different things and approaches, a couple of hours of working hard, finally get you to the right solution. Sounds familiar? 

That’s how React Native development looks in practice, and there is only one hope… debugging! So, we are going to dive a little deeper into what the React Native debugging approaches and tools are.

Debugging of code (logic)

With console.log

The simplest way of seeing JS thread and native logs is running react-native log-ios or react-native log-android in Terminal when the app is running on proper device/emulator.
You can check what’s inside your RN code with the well-known for JavaScript developers console.log and see the output. Remember, do whatever Dan Abramov says to do. Although, there is a more convenient (common for front-end developers) way to see the outputs.

With Chrome

This is the default way of debugging React Native cross-platform app development according to documentation. To turn it on, you need to shake your device, click ⌘D keyboard shortcut for iOS Simulator or ⌘M for Android Emulator (Ctrl+M on Windows and Linux) and select Debug JS Remotely. Be aware that the Developer Menu is disabled in release (production) builds.

Chrome debugger will launch automatically. Open the Console tab with Control+Shift+J( Windows / Linux)/⌘+control+M(Mac), all console.log function arguments will appear here. Not enough? There is more beyond console.log, check it out. You can always go to the Source tab and set breakpoints in the code if you prefer. But what about the redux store, order of actions and network requests? Chrome can’t handle that much, or it is too overwhelming so, we need to use the custom debugger.

With Reactotron

This complex solution is an absolute must know for every React Native developer. Documentation is sufficient and has very useful explanations of how to integrate Reactotron with different plugins like redux, redux-saga, apisauce or storybook. Handy in all parts of development and almost irreplaceable once you start using it.

With Flipper

The desktop debugging platform for mobile developers made by Facebook is called Flipper and it will be available out of the box in React Native soon, while manual integration is possible right away. RN view abstractions and native view hierarchy in one tool, check out this tweet and see how it works.

Debugging GUI (Graphical User Interface) 

With Inspector

In the same menu where you can select Debug JS Remotely, you can see the Toggle Inspector button which can help you with debugging the structure, size of components, and styling.

With React Developer Tools

For debugging the React component hierarchy you can use React DevTools extension for

Chrome and Firefox browsers.

With XCode, using native tools in hybrid mobile app development

React Native uses native components to present the UI to the users and sometimes debugging RN view abstractions is not enough to see what doesn’t turn out the way we would have hoped. Xcode comes with the great feature of being able to see native components in 3D, just build your app in XCode, go to Debug tab, and click View Debugging -> Capture View Hierarchy. Put the cursor over the image and drag it to the side to see the 3d native components hierarchy. 

Check out the more detailed article on native iOS debugging created by Dmytro Anokhin on Medium. 

With Android Studio

Android counterpart of the XCode is called Android Studio, if you want to debug an issue that occurs only on Android you can use Layout Inspector.

Looking for expert advice? Start from working with the best React Native companies and developers!

Great ideas need a smooth organization. Transform your plans into reality with React Native development: here you can contact us and share your challenge!

Looking for more tips and content? Check our blog post about the best React Native experts & blogs to follow in 2022.

Photo by Goran Ivos on Unsplash

Meta: Struggling with React Native bug? Get to know all of the React Native debugging techniques and approaches in a nutshell. 

Social: React Native development might be a struggle. Do you need help? 🚑 Check out our guide across React Native debugging techniques.  👉