React Native development experience improves with Flipper

React Native 0.62 RC2 was released today and it introduces integration with Facebook's extensible mobile app debugger, Flipper! This powerful tool looks to be some big competition to react-native-debugger, as it allows developers to write their own extensions to further its power. Let's take a quick preview look and see how this new tool works as booted up from a default React Native app:

Layout Inspector

The Layout Inspector is useful for a many different debugging scenarios - like inspecting what views the hierarchy is made up of as and the properties each view has. This view gives us React Native developers a better look into what is going on under the hood with native elements.

Network

Use Network inspector to inspect outgoing network traffic in your apps. You can quickly browse through all requests being made and their responses. This one clearly has a much nicer UI than using the Network Inspect buried within react-native-debugger -- and hopefully is less buggy too.

React Devtools

A powerful version of the React Devtools is included with Flipper and it will let you dive deep into the nitty gritty of your app with editing abilities. There is a Redux plugin available too.

Shared Preferences

The Shared Preferences tab lets you quickly inspect and edit data contained within your app's shared preferences.

Very exciting stuff from the React Native team. As more and more extensions are created and/or updated to support React Native - this tool will only grow in popularity. There's even a native crash reporter! We're personally excited for the Images extension, which are you most excited for?