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.
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.
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.
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.
Default implementation in React Native 0.62
What do you think?
Share your opinion with us and your experiences, what do you think of Flipper!