First React Native Weekly of 2022 and the 40th edition.

This is a special edition after a long deserving end of year break. This issue covers updates from December 20th 2021 to January 17th of 2022. Enjoy!

Highlights

Codegen TypeScript parser
”accessibilityLabelledBy” prop Android
Start of LazyUIManager
Static View Config updates
and many udpates from the community

Remove “interfaceOnly” on 3rd party Fabric component generation

Ubax jakub.tkacz@swmansion.com fixed an issue where 3rd party codegen generated components (outside core) where not included in the Fabric component provider.

Comment:

Currently the codegen does not include component with field interfaceOnly set to true in the ThirdPartyFabricComponentsProvider. These components need to be added to this file, so that non-core components can be used in fabric.

TypeScript Parser For Codegen

Charles Dudley charlesdudley@fb.com took on the job to implement the codegen TypeScript parser based off of the Flow parser.

For context, codegen reads Flow type definitions from a JavaScript file to generate the header files for native component/module.

Example of a Native command interface written in JavaScript Flow.

interface NativeCommands {
  +callNativeMethodToChangeBackgroundColor: (
    viewRef: React.ElementRef<MyNativeViewType>,
    color: string,
  ) => void;
}

source

But, TypeScript is the most popular static type language for JavaScript and many requested that the Codegen shoud support it. With this support the above definition could become:

interface NativeCommands {
  callNativeMethodToChangeBackgroundColor: (
    viewRef: React.ElementRef<MyNativeViewType>,
    color: string,
  ) => void;
}

On December 20th 2021, Charles pushed the following commits introducing support for TypeScript as a spec file for Native Components/Modules:

821382b9f77 TypeScript Module Tests f9e512e8fe0 TypeScript Component Tests f4e32ac5bfb Copy Flow parser tests to prepare TypeScript Parser 078f6310ba5 Choose parser based on file extension 0d3036abdef TypeScript Modules a9632c5ec53 Copy Flow parser modules logic to prepare TypeScript parser 7615bde0230 TypeScript Components c532fcff90b Copy Flow parser components logic to prepare TypeScript parser 114d5a8a176 TypeScript parser foundation 165dfbcc87a Copy Flow parser foundation for TypeScript parser

Improved how React Native Android defines touchable events for overflown items

I have noticed that Xin Chen xch@fb.com has been doing work related to VR and he has made a few improvements to React Native to deliver performance improvements for VR.

On this occasion Xin Chen is trying to improve performance of the following situations:

This perf issue is getting obvious when a view loads too many items, which matches our experience with “Hover getting slow after scrolling”, “Hover getting slow after going back from PDP view”, and “The saved list view (in Explore) is very fast (because it has very few components)“

On this commit, Xin adds overflowInset to RN Android ViewGroup as separate mount instruction. This will allow each rendered view group on Android to compute tis overflow boundaries and know if it should handle touch events on not as a separate instruction.

New “newArchEnabled” property to enable Fabric on Android

Nicola Corti ncor@fb.com setup a newArchEnabled property to Opt-in the New Architecture on the Android template.

Notes from Nicola:

Set newArchEnabled to true inside the gradle.properties file
Invoke gradle with -PnewArchEnabled=true
Set an environment variable ORG_GRADLE_PROJECT_newArchEnabled=true

The Project property will also control if:

ReactNative dependency should be built from source or not.
The NDK should be enabled or not.

Please note that this requires RN 0.68.x to run properly (it won’t work with 0.67 RCs) or a Nightly version of React Native.

Meta is testing Concurrent mode with VR

This commit enables ConcurrentRoot in React Native VR apps. This is exciting to see.

Introduce TextInput.onChangeSync

Samuel Susla samuelsusla@fb.com added the experimental TextInput.onChangeSync which delivers onChange event synchronously.

This means you can use onChangeSync as you did with onChange for your TextInput. Warning - this is still experimental and can change.

But you might be asking why? Well, the asynchronous nature of the text updates can cause the user input to become out of sync with what he sees on the screen. Making it synchronous forces the state updates immediately.

Bump Gradle, AGP and Download plugins

Commit

Gradle to 7.3.3 which fixes several Log4j CVEs
Android Gradle Plugin (AGP) to 7.0.4
Download Task plugin to 4.1.2

Allow lazy detection of native UI component

Paige Sun paigesun@fb.com added multiple patches to enable the LazyUIManager for Fabric and Static View Config enabled.

The Static View Configs (SVC) can be codegen generated or not, its job is to represent what the native interface should look like, see the ImageViewNativeComponent as an example.

With these changes, the UIManager will be:

DummyUIManager.js for Bridgeless,
LazyUIManager.js for Fabric with SVC enabled,
and PaperUIManager.js. for Fabric with SVC disabled.

List of commits from Paige:

b3a34194c08 5/5 Hook up Bridgeless’ UIManager.hasViewManagerConfig with Fabric’s native component registry a620d7dc851 4/5 Minor: Move unstable_hasComponent out of NativeComponentRegistry 7c63e0d5bc8 3/5 For codegenNativeComponent, with SVC enabled, use UIManager hasViewManagerConfig instead of getViewManagerConfig 6be46b0bb59 Comments only. Clarify a few Venice and SVC methods 9daae5a5f2b For Fabric with StaticViewConfigs, fix UIManager to use LazyUImanager, not PaperUIManager

Added “accessibilityLabelledBy” prop [Android]

Commit by grgr-dkrk 40130327+grgr-dkrk@users.noreply.github.com, the accessibilityLabelledBy prop is specially useful for TextInputs to announce its title, see video in PR description

Stativ View Config fixes

Ramanpreet Nara ramanpreet@fb.com made a few commits fixing the Static View Configs using the staticViewConfigValidator.

This is mostly making the SVC match the Native View Config which the validator pointed out.

Clang-tidy linter

There were several commits adding new lint rules like 1 modernize-avoid-c-arrays and 1 modernize-deprecated-headers for the clang-tidy linter - a C++ linter.

V0.67.0 Changelog

Commit & changelog

New Fabric Section

Rachel Nabors tweet about the new Fabric section in the React Native docs

React Native JSI Image

Tweet by Marc about this library

A writeable in-memory Image JSI Host Object. This library allows you to load an image to memory and share it across different context without having to copy it or read it from disk again. Like everything Marc builds this is a performance gainer.

This is likely to work well with his other library VisionCamera

Community

Done

That’s it. There was a bit more than usual on this weekly since it accumulated, I’m glad you got through it all. 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 - W3 2022