Welcome to the 20th edition of React Native Weekly 😅

This is everything that happened in between 26th of July and 1st of August 2021.

Example with all Transform properties

Luna Wei luwe@fb.com added an Animated transform style property example to the RNTester app.

+const transformProperties = {
+  rotate: {outputRange: ['0deg', '360deg'], selected: false},
+  rotateX: {outputRange: ['0deg', '360deg'], selected: false},
+  rotateY: {outputRange: ['0deg', '360deg'], selected: false},
+  rotateZ: {outputRange: ['0deg', '360deg'], selected: false},
+  skewX: {outputRange: ['0deg', '45deg'], selected: false},
+  skewY: {outputRange: ['0deg', '45deg'], selected: false},
+  perspective: {outputRange: [1, 2], selected: false},
+  scale: {outputRange: [1, 3], selected: false},
+  scaleX: {outputRange: [1, 3], selected: false},
+  scaleY: {outputRange: [1, 3], selected: false},
+  translateX: {outputRange: [0, 100], selected: false},
+  translateY: {outputRange: [0, 100], selected: false},
+};

Implement View.removeClippedSubviews prop [Fabric][iOS]

Fabric didn’t have prop removeClippedSubviews implemented. This diff adds it.

Ignore when a text string or number is supplied as a child [Fabric]

React Native throws an error when a text string or number is passed as a child. This change will ignore this error. This will work once another work related to host configs are landed (https://github.com/facebook/react/pull/21953)

Remove option to make measure calls asynchronous

Calling the measure method in Fabric had an option to be asynchronous, but due to a found regression in core metrics they removed it.

Fix android view dimensions

While this seems like a trivial fix, what caught my attention was this comment: This diff fixes the Android View dimensions in VR. Does VR mean virtual reality?

Summary from commit message:

PixelUtil.toSPFromPixel and PixelUtil.getDisplayMetricDensity() are both using getScreenDisplayMetrics() to perform conversion of dimensions. This is not correct because we should take into consideration the density of the Context / Activity instead of the Screen.

Refactor DevServerHelper to separate checking if packager running

Separate the functionality of the isPackagerRunning() function into a new class PackagerStatusCheck with the intention of being able to use this without needing a DevServerHelper

So technically you can use PackagerStatusCheck for tooling to check if the JS packager is running.

+/** Use this class to check if the JavaScript packager is running on the provided host. */
+public class PackagerStatusCheck {

Rename immediate to ReactNativeMicrotask in Bridge

The setImmediate became queueReactNativeMicrotask.

You can and should still use setImmediate since it is aliased to queueReactNativeMicrotask.

+  /**
+   * Set up immediate APIs as aliases to the ReactNativeMicrotask APIs.
+   */
+  polyfillGlobal(
+    'setImmediate',
+    () => require('./Timers/JSTimers').queueReactNativeMicrotask,
+  );
+  polyfillGlobal(
+    'clearImmediate',
+    () => require('./Timers/JSTimers').clearReactNativeMicrotask,
+  );

Xuan Huang jsx@fb.com renamed the internal occurrences of “Immediate” with “ReactNativeMicrotask” in the legacy bridge and then polyfilled the original immediate APIs during the timer setup phases as aliases of them.

So internally the handler for setImmediate’s callbacks used to be _immediatesCallback and now it is _reactNativeMicrotasksCallback.

I was wondering why, until I stumbled on another commit below by Xuan Huang jsx@fb.com moving the Immediate API to JSVM microtask.

Introduce queueMicrotask API

Commit message:

queueMicrotask is a relatively recent API defined in the WHATWG HTML spec and it’s been widely adopted by all web browsers and Node.js.

This diff introduced it to React Native by polyfilling it via a lazily-allocated resolved Promise, or calling directly into a fast path provided by Hermes.

See MDN doc about the queueMicrotask

Shim Immediate APIs when Promise is queueing to JSVM

This is a step towards moving from React Native internally handling promises to letting the JavaScript Virtual Machine (JSCore, Hermes, etc.,.) handle promises.

React Native handles both promises and immedidate callbacks by keeping a queue internally. In order to let the JSVM handle promises they need to migrate the Immediate API to the JSVM microtask queue.

Makes “force” property available to Apple Pencil based events. (#31780)

Change

For more detailed explanation, see issue https://github.com/facebook/react-native/issues/31779

The code compiles and runs, and trying a simple handler for a View like

  touchMove = (e: GestureResponderEvent) => {
    console.log(`pressure, altitude (${e.nativeEvent.force}, ${e.nativeEvent.altitudeAngle})`);

results in

and when pencil is oriented perpendicular to the screen and pressed with full force shows

Updated TextInput autoCompleteType prop to autoComplete (#26010)

Change

Implement PlatformColor in Fabric Android

Change

react-native-quick-sqlite

Tweet by Oscar:

This is what react-native with JSI can do for you Link to repo

Not only it is super fast, but you get all the benefits of SQLite:

• Relational data
• SQL
• Transactions
• TypeORM

JSI Tutorial

Oscar always shared a link to his React Native Module JSI tutorial

Improving the Text Component’s Performance

Sebastian Lorber shared a tweet that highlighted William Candillon conversation on how he improved the Text components performance by 2x by removing some of the unnecessary things from it.

You can watch the talk here

You can check the Text component implementation and create a new version of it without a few things if you need the performance boost.

Some of the things you can remove is the press handler and the nested Text support.

That Is It!

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