React Native

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.

About Javascript

You could debug Javascript using the remote debugging which is done through the browser debugger. It means that instead of running the code in the device Javascript engine, your app code run in chrome’s V8 engine (if you are using a chrome-based browser, of course).

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.

This is even getting worse while releasing on Android, as depending on the Android version and the device model, the system’s Javascript engine is not homogeneous, some things might behave differently. This is one reason why little by little Facebook is bringing tools to improve reliability across devices and debugging tools such as Hermes, an embedded Javascript engine for Android.

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

There is a new way to deal with device shortcuts. You can now provide a keyboard shortcut using Flipper to reload or show the dev menu, no matter if your app emulator has the focus or not. Which is great when you’re using the Javascript debugger in chrome and you want to reload the application.

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 prop-types library

Remove PropTypes: We’re removing propTypes from 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.

One other thing that happened behind the scene is the deprecation of the prop-types library, which was used to display a warning when some props were missing at runtime. This is a great thing in my opinion as it will progressively push people to adopt good practice in Javascript with static typings tools. Which helps to detect those issues Ahead of Time at transpilation.

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:

Everything named 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 android/app/src/main/java/<your/package/name>/MainApplication.java

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");

The ReactNativeFlipper class contains all your Flipper plugins configuration, this is where you can add more.

🇫🇷STOP! Are you French 🥖 ? Alors tu devrais plutôt cliquer ici pour recevoir ma newsletter privée en Français 🙂