Welcome to the ninth edition of React Native Weekly. This is week 20 of 2021.

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

Coinbase Successfully Migrates To React Native

This week Coinbase posted how they successfully migrated their client apps to use React Native.

Some highlights:

Their main reason was the ability for anyone on the “client” team to be able to contribute to the codebase.
They judged the “brownfield” approach, native app with React Native embedded, to be problematic due to the rise of complexity, and thus went with a full rewrite from native to a greenfield React Native app.
It took them about 6 months to rewrite Coinbase Pro, their most complex app.
According to their key metrics, all performance KPIs remained the same or slightly improved 🤯.
They want to reduce the amount of context switching even further by normalizing their back-end with a GraphQL layer and having a unified design system.

Your Data Fetching Logic Might Be Hindering Your Performance

Weslley Aroujo made a tweet of a performance graph showing how React Query positively impacted their performance metrics. Can it be that your app is slow because of the way you request data?

Official React Native Stripe Library

Stripe launched the official React Native library.

Support ScrollAway in ReactScrollView [Android]

It is not clear yet what this feature is. Joshua Gross joshuagross@fb.com added a prop named scrollAwayPaddingTop that enables a natively-controlled navbar that optionally obscures the top content of the ScrollView. This was implemented only for Android, and there are no demo or examples on how to use it. For now, we will have to wait for more updates.

Commit

Fix accessibility when the entire text node is a link [iOS]

Commit

Fix Hermes + no Flipper build on Xcode 12.5

When folly was bumped in version, they later found out that having Flipper disabled and Hermes enabled broke React Native. This commit fixes this issue.

Event should infer UIManagerType by the presence of SurfaceId

This commit makes a small contractual change between events in Fabric or non-fabric environments. It is interesting because you get to learn some of the nuances of the event system, like how events always have a SufarceID in Fabric so that Views don’t unexpectedly get events they aren’t waiting for.

Fix various c++ warnings (#31399) [Microsoft Contribution]

Due to react-native-windows’ more strict set of warnings, they made some changes to the React Native codebase to fix warnings from the compiler.

[External Collaboration] Fix natively driven animations not getting reset properly

Tien Pham tien@phaw.io explained in his commit that Animated.loop needs to reset the animation after each iteration but currently, natively driven animations are not getting reset properly.

@@ -196,6 +196,12 @@ class AnimatedValue extends AnimatedWithChildren {
   resetAnimation(callback?: ?(value: number) => void): void {
     this.stopAnimation(callback);
     this._value = this._startingValue;
+    if (this.__isNative) {
+      NativeAnimatedAPI.setAnimatedNodeValue(
+        this.__getNativeTag(),
+        this._startingValue,
+      );
+    }
   }

Funnel All Fabric calls to RuntimeExecutor to RuntimeScheduler [Concurrent Mode]

With the purpose of preparing infrastructure for Concurrent Mode, they moved all calls from RuntimeExecutor to RuntimeScheduler to leverage the scheduler priority system later.

diff --git a/React/Fabric/RCTSurfacePresenter.mm b/React/Fabric/RCTSurfacePresenter.mm
index c4516c8838..b7222d342b 100644
--- a/React/Fabric/RCTSurfacePresenter.mm
+++ b/React/Fabric/RCTSurfacePresenter.mm
+
+  if (reactNativeConfig && reactNativeConfig->getBool("react_fabric:enable_runtimescheduler_ios")) {
+    auto runtimeScheduler = std::make_shared<RuntimeScheduler>(_runtimeExecutor);
+    toolbox.runtimeScheduler = runtimeScheduler;
+    runtimeExecutor = [runtimeScheduler](std::function<void(jsi::Runtime & runtime)> &&callback) {
+      runtimeScheduler->scheduleWork(std::move(callback));
+    };
+  }
+

Add yielding mechanism to RuntimeScheduler [Concurrent Mode]

Add yielding mechanism to RuntimeScheduler. It is disabled unless RuntimeScheduler::setEnableYielding is called. Again, remember this is work towards enabling Concurrent Mode’s priority system queue.

Introduce RCTCallableJSModules [iOS]

This is a Bridgeless-compatible API to allow our NativeModules to call JSModule methods. This is useful when you need to call a JavaScript module from the native side, RCTCallableJSModules gives you that interface to access JavaScript defined modules.

This is another step towards a bridgeless React Native.

Further commits were added to migrate to RCTCallableJSModules:

6c5ac8036e Bridgeless Mode: Migrate modules away from invokeJS
22ba277496 Attach RCTCallableJSModules to TurboModules
478365079b Attach RCTCallableJSModules to NativeModules

Here is an example of you can call a JS Module from Objective-C

[_callableJSModules invokeModule:@"RCTNativeAppEventEmitter" method:@"emit" withArgs:@[ @"RCTDevMenuShown" ]];

This the same as RCTNativeAppEventEmitter.emit("RCTDevMenuShown") in JS.

And

RCTJSInvokerModule protocol was deleted since the protocol is no longer necessary because React Native Core team introduced the bridgeless-compatible abstraction: RCTCallJSModuleMethod.

That Is It!

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

React Native Weekly - W20 2021