skip to content
Andrei Calazans

React Native Weekly - W15 2021

/ 6 min read

react-native , react-native-weekly

Welcome to the fourth edition of React Native Weekly = )

Reach out to me via Twitter if you have any feedback, and don’t forget to subscribe!

Expo Founders Were Creating A Cross-Platform Solution Alike React Native

Did you know the Expo founders, Charlie Cheever and James Ide, were creating a cross-platform solution similar to React Native back when React Native was released?

Brent Vatne shared this bit of history while in a Podcast with the Infinite Red crew, it was cool to learn the roots of the Expo company and why they got into this space.

And got together with James to try and figure out like what they could do to improve the state of cross-platform mobile development. And they were actually building something similar to React Native at the time that React Native was released. And I think they cleverly identified, well, why should we build this thing totally separately? Let’s just combine efforts with this other project since they were already big fans and users of React JS on the web.

Infinite Red’s React Native Radio - Advancements In Expo With Brent Vatne

But there is more from the Expo crew

Is React Native still Growing? Evan Bacon Says YES! 😂

React Native is still growing like crazy, each release of Expo is bigger and better than the last. I have engineers and VCs messaging me every week looking for React Native developers.”

Tweet

And I can confirm that at least at G2i we keep getting a lots of request for React Native engineers.

Moti’s Declarative Power

Moti is taking declarative animations to the next level, with 16 lines of JSX you can create this animation, check our Fernando’s tweet. I haven’t yet used Motti in an app, but more and more I’m convinced I should 🤔.

Injected Components

There was a commit that updated the Switch component to try to solve the following problems:

  • Keeping native and JS in sync
  • Switch skips animation occassionally on iOS simulator

However, it is following the injection pattern which seems to be the way Facebook injects their custom components into React Native without making it public first. They are labelling it with the unstable flag which might just indicate they are still working on it and will make it public once they feel confident. This happened with the Text component in a recent past.

This injection pattern is being used for:

  • UIManager
  • Switch Component
  • VirtualizedSectionList
  • VirtualizedList
  • ScrollViewStickyHeader

[Android] [Added] - Add getRecommendedTimeoutMillis to AccessibilityInfo

On Android 10 and above the user can set “Time to take action (Accessibility timeout)”, see Android documention. PR #31063 adds support for React Native to get this user setting.

d29a7e7a89 add getRecommendedTimeoutMillis to AccessibilityInfo (#31063)

Introducing RuntimeScheduler. A coordinator of work between native and React.

Commit eb13baf2a6 introduced a “RuntimeScheduler” that connects to the JavaScript Runtime via a JSI binding.

However, there wasn’t any source code included for the actual “RuntimeScheduler” so we don’t know what it does - Facebook only included an empty class which might just be forward declaring for another class internally, I don’t know and this is pure speculation.

On a later commit Facebook also added logic in the Scheduler class to bind to the RuntimeScheduler, on the commit message it explains they won’t use it yet since it requires changes to React directly. But, from the changes we do know this is intended to be used with Fabric.

+    if (enableRuntimeScheduler) {
+      RuntimeSchedulerBinding::createAndInstallIfNeeded(runtime);
+    }

Tweet at me if you know what the “RuntimeScheduler” will do! 😁 Thanks!

Android: Upgrade OkHttp from v3 to v4 (#31084)

OkHttp is the library used internally for making HTTP requests in Android.

According to the commit message, the React Native repo will have the following side-effects from this update:

  • OkHttp v4 depends on Kotlin’s standard library, so react-native will have a transitive dependency on it.
  • The dex method count of test apk has exceeded the maximum, so multidexing had to be enabled for android tests.

Codemod: Give legacy cxx and ObjC-only NativeModules a getTurboModule: method

This is another step toward making all native modules TurboModule compatible.

Commit message:

Summary:

We're making the getTurboModule: method required for all classes that conform to RCTTurboModule.

Many of our ObjC-only and Cxx NativeModules don't implement this method. This diff implements a getTurboModule: method on all those modules that returns nullptr.

**Question:** Why is it fine to make ObjC-only NativeModules return nullptr from their getTurboModule: method?
- Because they're only accessed from ObjC, and should appear as null on the JavaScript side. Longer term, these NativeModules will also go away.

**Question:** Why is it fine to make Cxx NativeModules return nullptr from getTurboModule: method?
- Because after D27316872, the TurboModuleManager checks if the module is a CxxModule first. If it is, we do an early return, and never call the module's getTurboModule: method.

Diff example:

diff --git a/React/CoreModules/RCTEventDispatcher.mm b/React/CoreModules/RCTEventDispatcher.mm
index 1dd07d936c..1edb079a9b 100644
--- a/React/CoreModules/RCTEventDispatcher.mm
+++ b/React/CoreModules/RCTEventDispatcher.mm
@@ -224,6 +224,12 @@ - (void)flushEventsQueue
   }
 }
 
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return nullptr;
+}
+
 @end
 
 Class RCTEventDispatcherCls(void)

They made RCTTurboModule getTurboModule required in the next commit.

Use C++17 feature - structured bindings

This is for the programming language nerds.

With C++ 17 React Native team can now use “Structured Bindings” which are similar to JavaScript “destructuring assignment “.

auto const [shouldAnimate, transitionStyle] = animationConfiguration(newProps.animationType);

1739ab5ec2 Use C++17 feature - structured bindings

Introducing Breadcrumb Logging

c91e32b050 Differ: introduce breadcrumb logging

If for some reason you need to debug what the React Native renderer is doing you can set the flag DEBUG_LOGS_BREADCRUMBS for the compiler to get extra logs outputted when calculating the mutations and flattening of the ShadowViews.

ShadowViews are the virtual view representation of the UI tree (ShadowTree).

Commit message summary:

Introduce a new debugging mechanism for the debugger. Outside of debug mode (you must defined `DEBUG_LOGS_BREADCRUMBS` manually to enable this feature) it will have no cost or binary size.

When the debug mode is enabled, it allows you to trace the call stack to trace what the differ is doing, making logs more useful.

Diff example:

@@ -743,6 +796,9 @@ static void calculateShadowViewMutationsFlattener(
 
       if (!treeChildPair.flattened) {
         calculateShadowViewMutationsV2(
+            DIFF_BREADCRUMB(
+                "Recursively delete tree child pair (unflatten case): " +
+                std::to_string(treeChildPair.shadowView.tag)),
             mutationInstructionContainer.downwardMutations,
             treeChildPair.shadowView,
             {},

That Is It!

That’s it for this week. If you want to see more checkout last week’s post here. Subscribe to get notified when new posts are out = )