Andrei Calazans

React Native Weekly - W19 2021

☕️ 4 min read

Welcome to the eighth edition of React Native Weekly. This is week 19 of 2021.

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

How To Override CMD+R In Newer IOS Simulators

How to override cmd+r in the newer iOS simulators: Tweet

If you don’t want change the recording shortcut, you can always type R in the Metro CLI to make it reload.

Shopify’s Webinar

Shopify’s investment in React Native is absolute. They are doing a webinar on how they write Performant React Native apps: Tweet

I’ll try to make it and summarize what I learn from them.

Software Mansion’s Webinar

Sofware Mansion is also hosting a webinar, for those who don’t know Software Mansion is a massive contributor to the React Native ecosystem being the ones behind Reanimated.

Link to tweet about their webinar

The topic is Native for React developers, I believe this is a nice topic for those who want to get into React Native from Web.

React Native Vision Camera V2 Release

Marc Rousavy is a prolific contributor to the React Native ecosystem, he is in the forefront of what is possible to achieve with JSI, Turbo Modules, and Fabric. He has published a few libraries exploring the usage of JSI like react-native-threading, react-native-mmkv (key-value storage), and react-native-vision-camera.

He recently released react-native-vision-camera v2.

In summary it is blazing fast:

A fully native app written in Objective-C can do this in 68ms

A #ReactNative app using VisionCamera Frame Processors (JavaScript) can do this in 69ms!

There is a single millisecond difference for the bonus of using JS for AI!

Tweet

Rescript React Native Release

For the fans of sound types, no not TypeScript since is isn’t sound 😅. ReScript React Native is here after its long transition from Reason React Native.

Tweet

Add explicit type casts to fix compilation errors on Windows. (#31363)

Commit

It is positive to see how the impact surface of React Native core now expands to Microsoft. A recent change to MapBuffer broke compilation on Windows.

React Native certainly needs an automated end-to-end test verification that validates how all of its stakeholders are using React Native.

Migrating To Functional Components

Part of an effor to modernize React Native’s components. They updated ItemWithSeparator in VirtualizedSectionList, Switch Component, and ScrollViewStickyHeader to be functional.

ItemWithSeparator Commit

Switch Component Commit

ScrollViewStickyHeader

Accessibility Updates

Introduce RCTBundleManager

Part of the Fabric rearchitecture effort, where there will be a “bridgeless” mode. RCTBundleManager introduces a normalized way to read/write to the bundleURL even in bridgeless mode. Before this, native modules accessed the bridge directly, which will be nil in bridgeless mode.

After this stack lands, every NativeModule will be able to synthesize an RCTBundleManager, like so:

synthesize bundleManager = _bundleManager;

Interface Header

+typedef void (^RCTBridgelessBundleURLSetter)(NSURL *bundleURL);
+typedef NSURL * (^RCTBridgelessBundleURLGetter)();
+
+/**
+ * A class that allows NativeModules/TurboModules to read/write the bundleURL, with or without the bridge.
+ */
+@interface RCTBundleManager : NSObject
+- (void)setBridge:(RCTBridge *)bridge;
+- (void)setBridgelessBundleURLGetter:(RCTBridgelessBundleURLGetter)getter
+                           andSetter:(RCTBridgelessBundleURLSetter)setter;
+@property NSURL *bundleURL;
+@end
+

As a follow up to the above change, a few native modules have been migrated to use the RCTBundleManager.

f2157a0558 Migrate RCTDevSettings to RCTBundleManager
eb0a918577 Migrate RCTSourceCode to RCTBundleManager
1f105e6f16 Migrate RedBox to RCTBundleManager
adaa1c98f6 Migrate RCTDevLoadingView to RCTBundleManager
4198c2bcb6 Migrate RCTDevMenu over to RCTBundleManager

[External Collaboration] fix: codegen - project paths with spaces (#31141)

Craig Martin cmart1220@gmail.com fixed a codegen script issue that incorrectly split root project paths that contained spaces.

Commit

[External Collaboration] Add onPressIn & onPressOut props to Text (#31288)

Adrien HARNAY adrien@harnay.me added onPressIn and onPressOut props to the Text component to help implement custom highlighting logic (e.g. when clicking on a Text segment). Since TouchableOpacity can’t be nested in Text having custom lineHeights without bugs in some occasions, this modification helps to replicate its behavior.

Commit

Resolve Memory Leak In Promises [iOS]

On iOS when using promises with Turbo Modules on iOS, previously they weren’t destroying the weak reference to the resolver and rejector callbacks. With block guard they properly destroy it.

Commit

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 = )