React Native 0.62 and Flipper Will Change Your Mobile Development Experience and...
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React Native 0.62 and Flipper Will Change Your Mobile Development Experience and make it easier!
In short: A tour of the new fairly better development experience that is just at the beginning. Also a migration guide helper.
React Native mobile development state of play
Until 2020, React native was a poor framework in terms of debugging tools. Most of the time you had to rely on various platform-specific tools for Android and IOS in order to get system logs (logcat, …), debug and analyze performance pits or rendering issues.
That’s for the native part of the framework.
This can leads to some strange behaviors because the engine is not the same, and because your code is running in a browser with the power of your computer CPU, you might not see performance pits while developing and get surprised when back to the device, when releasing on staging as example.
Until now, to face the poor collection of tools we had available for react-native, some companies built their own tools such as InfiniteRed with Reactotron. This tool is great because it brings through plugins some nice features such as Network inspector, overlay or redux store inspector among other things, that were missing out-of-the-box in react-native apps.
But besides Reactotron and the CLI embedded version of the React Devtools (that was not usable in v4)…
There was clearly a lack of platform tools that we could easily use where a concurrent like Flutter is doing and taking into consideration of developing such tools since the beginning.
But little by little Facebook reacted and started building a nice tool to fill the gap, a tool you might have heard of but that was not so popular until today for many developers…
This tool is named Flipper and it is officially shipped by default in any react-native > 0.62 application.
Flipper: An extensible mobile app debugger
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.
Let’s see why this is great news for mobile development with react native.
A new development experience has awakened.
What’s new? Why is it a good breaking point with the past? As we saw above, the development experience was not so good with react native tools but Flipper brings a lot of improvement to that and remember: it’s only the beginning. Feel free to make your own plugins for it!
A fairly better debugging experience
- Flipper is now integrated out-of-the-box with react-native projects.
Flipper provides the following features without any additional configuration steps.
You can now, using Network Inspector, debug network requests that occur, before you had to use something like Reactotron and bootstrap it in your code.
It works for HTTP calls, and you can access any element of the payload such as Headers, body formatted. You might also filter requests based on some rules and use sorting.
Metro Actions: Reload the app and trigger the Dev Menu right from the toolbar.
As I already talked about in my article about react native dev menu that you can find here
Save your phone and your hands with simple actions and stop being the strange guy in the open-space that is shaking all…
Crash Reporter:View crash reports from Android and iOS devices.
Some bugs don’t happen in development, this is where crash reporter shines. This is especially great to debug crash on React Native’s
release mode build variant, as you will get the triggering error stack trace in Flipper if a crash occurs while running the app.
Also if any of the native libraries trigger a crash, you’ll get the log here.
React DevTools:The latest react development tool that helps to inspect components state and props.
This tool is a masterpiece in terms of development experience and debugging. And for those who are familiar with the React web, it’s exactly the same tool! Which is a great thing.
Briefly, it provides two tabs: a
componentstab that allows us to inspect the components tree and hooks with the state/props in real-time. And the
profiler tab that helps to find performance pitfall such as over-rendering.
It’s also possible to search in device logs in Flipper, that originally were printed in the metro bundler console or chrome console if using remote debugging. That way you can use custom filters if your app is having a bunch of logs, preventing getting overwhelmed.
This is especially useful for apps that are business logic heavy with a lot of events, such as a Bluetooth communication-based app.
You can inspect the native Ios/android layout output by the React Native renderer and edit it. This might help you understand some effects produced by a bug.
And my favorite one is the Database and Preferences Inspector plugin.
Using that one you can finally see which data lives in your Async Storage and embedded SQLite database. For adding a custom database such as WatermelonDB (based on SQLite), you need to add some code, we will see how in another article. But by the time, see that.
- New Log box improves errors display
This version also comes with the brand new Log boxes.
You can turn them on as an experimental feature using
require(‘react-native’).unstable_enableLogBox(); in your root file (generally
index.js) They are way more stylish and less obtrusive and the stack has been enhanced, especially for components exceptions.
- Deprecation of
Remove PropTypes: We’re removing
propTypesfrom core components in order to reduce the app size impact of React Native core and to favor static type systems which check at compile time instead of runtime.
You might have a look at the well-known Typescript is you are not aware of it
How to migrate React native to 0.62
For those that haven’t project already, it’s pretty easy, just create a new react-native CLI and you’ll get the latest version instantly :), for those like me using a
0.61.5 version you’ll need some steps for android and IOS.
If you followed the migration tools, take not that Gradle has been updated to version 6, which can introduce some breaking changes in your libraries.
You’ll need to follow https://react-native-community.github.io/upgrade-helper/?from=0.61.5&to=0.62.0 migration guide.
I just wanted to highlight that there are some part to take care of and adapt to your project specificities:
package com.rndiffapp; must correspond to your own package name and you must adapt your folder structure accordingly. You can find your app package name in
Also take note in the same file that the
initializeFlipper method is using class reflection to target your Flipper configuration class you’ll create, you might need to adjust the package name here too.
Class<?> aClass = Class.forName("<your/package/name>.ReactNativeFlipper");
ReactNativeFlipper class contains all your Flipper plugins configuration, this is where you can add more.
Aggregate valuable and interesting links.
Joyk means Joy of geeK