Welcome to the 42nd edition of React Native Weekly.

This week covers updates from January 25th to January 30th 2022.

Highlights

Introduce Animated.Color
OkHttp upgrade due to vulnerability
react/no-unstable-nested-components rule

Fixed capitalize Text style [iOS]

MaeIg larochmael@hotmail.fr fixed a broken behavior when using the style textTransform: 'capitalize' on iOS. It didn’t handle dates well.

Before	After

Note the difference in the “th”.

Github Action to apply version label on issues

Gabriel Donadel Dall’Agnol donadeldev@gmail.com included a Github action to apply version labels to opened issues.

Make Easing an object

Marshall Roch mroch@fb.com’s small change is just a reminder that you should use object instead of classes if you don’t need your element to be constructed or subclassed.

Enable earger initialization of Fabric

David Vacca dvacca@fb.com enabled eager initialization of Fabric on Android which was previously implemented under a feature flag back in May 14th of 2021.

According to David:

Enable eager intialization of FabricUIManager during intiialization of React Native. This feature highly improved TTRC in Markeptlace Home

ps: I don’t know what TTRC means, if you do tweet at me

Enable react/no-unstable-nested-components rule

Pieter De Baets pieterdb@fb.com added the no unstabled nested components ESLINT rule.

Dynamic nested components can cause tricky performance issues in React, as the reconciler will not be able to reuse the previously mounted component tree.

The following nested component definition throws a warning:

function Component() {
  function UnstableNestedComponent() {
    return <div />;
  }

  return (
    <div>
      <UnstableNestedComponent />
    </div>
  );
}

Support update for fnm

Max Thirouin git@moox.io fixed the fnm integration that stopped working since 0.64.

fnm is a “fast node manager” to manage node version.

Shipped RuntimeScheduler yielding

Samuel Susla samuelsusla@fb.com removed the feature flag around the RuntimeScheduler yielding feature, this is part of the concurrent React scheduler work. Back in April’s edition I wrote a bit about the RuntimeScheduler.

Fix TouchTargetHelper [Android]

Xin Chen xch@fb.com fixed the math for detecting if children views are in parent’s overflowInset area on Android.

Fix execution of animation when a toValue of AnimatedValue is used

Genki Kondo gkondo@fb.com fixed an Animated API issue where passing another Animated value to the toValue field didn’t sync the values.

  it('should start tracking immediately on animation start', () => {
    const value1 = new Animated.Value(42);
    const value2 = new Animated.Value(0);
    Animated.timing(value2, {
      toValue: value1,
      duration: 0,
      useNativeDriver: false,
    }).start();
    expect(value2.__getValue()).toBe(42);
    value1.setValue(7);
    expect(value2.__getValue()).toBe(7);
  });

Add markEvent to QuickPerformanceLogger

Dmytro Voronkevych zloy@fb.com extended (1) & (2) React Native’s QuickPerformanceLogger to have a markEvent method.

  markEvent(
    markerId: number,
    type: string,
    annotations: AnnotationsMap,
  ): void

Upgrade OkHttp to fix security vulnerability: CVE-2021-0341 [Android]

owjsub owen@subsplash.com upgraded OkHttp from 4.9.1 to 4.9.2 to fix CVE-2021-0341.

Introduce AnimatedColor

Genki Kondo gkondo@fb.com is implementing 1 2 3 the AnimatedColor API. It will enable us to natively animate colors using the Animated API.

It currently supports RGBA, string values, native driver for Android. Upcoming changes will include support for iOS native driver and platform colors.

This will change how you can animate colors. Previously we could only do it by having a Animated.Value be a number and using interporlate to output different rgba values based on that number. With this change you will be able to use Animated.Color directly plus have it run natively with native driver.

const color = new Animated.Color('red');

I wonder if this is a sign that with Fabric fully enabled animation APIs like Reanimated might become absolute? Of course Reanimated API has a bit more to offer with its worklet concept, but I’d love to see the core be shipped with all you need to get 60fps animations.

Use AssetManager buffer instead of copying bundle

Pieter De Baets pieterdb@fb.com patched the JSLoader on Android to avoid copying the buffer into a JSBigBufferString during startup. According to Pieter this is duplicate work on Android since it already allocates a copy of the bundle in memory while decompressing the asset from the APK.

ps: Too bad that the impact of this on startup wasn’t measured.

RNTester App updated Android intents

Gabriel Donadel Dall’Agnol donadeldev@gmail.com updated Android’s AndroidManifest intents to include http/https URLs, phone numbers, and geolocation since RNTester app is using SDK 31.

android/app/src/main/AndroidManifest.xml

   </application>
  <queries>
    <package android:name="com.facebook.katana" />
    <package android:name="com.facebook.lite" />
    <package android:name="com.facebook.android" />
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:scheme="https" />
    </intent>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <data android:scheme="geo" />
    </intent>
    <intent>
      <action android:name="android.intent.action.DIAL" />
      <data android:scheme="tel" />
    </intent>
  </queries>
 </manifest>

Added missing sources JAR into published artifacts [Android]

Kudo Chien ckchien@gmail.com added the missing source jar into published Android artifacts back which broke in 0.66 when we moved to maven-publish. According to Kudo, the lack of these artifacts is not ideal for debug or tracing code.

Apply transform matrix in Yoga due to overflowInset [Android]

Xin Chen xch@fb.com fixed an issue with Android’s overflowInset values that are used to figure out which view touch events belong to. Turns out his recent implementation of the overflowInset were not working with native animations (useNativeDriver: true).

Introduce RuntimeScheduler::callImmediates

Samuel Susla samuelsusla@fb.com implemented RuntimeScheduler::callImmediates.

According to him:

React on web uses microtasks to schedule a synchronous update for discrete event. Microtasks are not yet available in React Native and as a fallback, React uses native scheduler and task with immediate priority. Until Microtasks are in place, React Native needs to make sure all immediate tasks are executed after it dispatches each event. I tried to stay as close to microtask standard as I reasonably could. Once microtasks on RN are shipped, this code can be removed.

Community

Done

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

Partners

TypeScript Weekly: The best TypeScript links every week, right in your inbox.
This Week In React: the best of React & React Native news. Sebastien filters the noise, and you save time!
ES.next News: learn about the latest in JavaScript and cross-platform tools.
Tailwind Weekly: all things Tailwind CSS, new issue every Saturday.

React Native Weekly - W5 2022