React Native and Flipper!

react native
Friday, August 6, 2021

React Native and Flipper!

react native 0.62 in conjunction with Flipper to improve your development performance.

Good news, more progress, react native 0.62 in conjunction with Flipper to improve your development performance.

Image for post
Image for post

Flipper

Experts mention that it could be the fun competition of react-native-debugger , including network management, layout inspector, React devtools including state handlers!

Flipper is a tool that until now was handled properly in their respective Android Studio or XCode IDEs, but it gained a lot of popularity because it allows debugging both applications from this tool.

Flipper is a platform for debugging iOS, Android and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API.

Image for post
Image for post

Features

Flipper continue in general the following features and additionally you can have more by adding them from your own plugin store.

  • Metro Actions : Reload the app and show the dev menu.
  • Crash Reporter : View Android and iOS reports.
  • React DevTools: The last React Devtools !!!.
  • Network Inspector: Allows you to see all the requests created by the application.
  • Metro and Device Logs: See, search and filter absolutely everything about the meter and the device.
  • Native Layout Inspector: Allows you to view and edit the native layout generated by React Native Renderer.
  • Database and Preference Inspectors: Allows you to view and edit databases and preferences.

We have seen many react native developers using the react native debugger from chrome, not the best! using this debugger basically puts development in an environment under the chrome V8 engine, which sometimes creates strange behavior, not in all cases. That is why there are tools like Hermes created to improve the performance of our applications.

Hermes, JavaScript engine optimized for React Native

Versions 0.62 vs Versions

The difference is that react native 0.62 contains Flipper installed by default. :)

Network Inspector

Access to requests, payloads, headers, body, request, response, including the ease of doing a search.

Image for post
Image for post

Layout Inspector

We have already seen this in other tools, including react-native-debugger, it supports other Litho tools and ComponentKit, you can see properties, props and state of the components. Something very useful that it allows is to be able to modify the attributes in real time, saving a lot of reloading time.

Image for post
Image for post

Default implementation in React Native 0.62

Android: https://github.com/facebook/react-native/blob/master/template/android/app/src/main/java/com/helloworld/MainApplication.java#L57

iOS: https://github.com/facebook/react-native/blob/b85cb0cf7aa697016fd7b97d570377cb67eef807/template/ios/HelloWorld/AppDelegate.m#L15

What do you think?

Share your opinion with us and your experiences, what do you think of Flipper!

james jara
August 6, 2021