skip to content
Andrei Calazans

React Native Weekly - W6 2022

/ 5 min read

react-native , react-native-weekly

Welcome to the 43rd edition of React Native Weekly.

This week covers updates from January 31st to February 6th 2022.

Highlights

  • StatusBar API update for Android 11+
  • Support platform color with AnimatedColor
  • CDP inspector API (callFunctionOn)

Fix crash due to null WindowInsets on ReactRootView [Android]

This change by Elias Nahum nahumhbl@gmail.com fixes a crash happening on Android for apps that register different ReactRootViews. Maybe only for those using react-native-navigation?

Great summary by Elias:

Fixes a potential crash was introduced by PR 30919 that aimed to get the keyboard height on devices with a Notch. The problem is that it considers that any ReactRootView will have an insets available.

When using react-native-navigation and assigning a Navigation button to the TopBar as a component, the component gets registered as a RootView but won’t have any insets attach to the view.

getRootWindowInsets() in fact return a WindowInset only available if the view is attached, so when executing checkForKeyboardEvents method from ReactRootView, is trying to access the DisplayCutout of a null object, leading to a crash.

StatusBar API update for Android 11+

Kuba Holuj kubah@remitly.com refactored Android’s StatusBarModule.setStyle to use WindowInsetsController#setSystemBarsAppearance for Android 11 (API 30).

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
  WindowInsetsController insetsController = activity.getWindow().getInsetsController();
  if ("dark-content".equals(style)) {
    // dark-content means dark icons on a light status bar
    insetsController.setSystemBarsAppearance(
        WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS,
        WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS);
  } else {
   insetsController.setSystemBarsAppearance(
        0, WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS);
  }
}

Introduce PlatformBaseViewConfig and fix SVC for RCTView

Ramanpreet Nara ramanpreet@fb.com refactored the Static View Config to unify both platforms under one interface - the PlatformBaseViewConfig. Remember the Static View Config declares what props the native layer supports.

This commit also goes over the internal architecture for how each platform defines its base ViewConfig. On iOS all props come from the ViewManagers and all HostComponents extend the View’s ViewManager. On Android props also come from the Shadow Nodes and instead of View’s ViewManager, the HostComponents extend a BaseViewManager class.

See PlatformBaseViewConfig file for all base platform props.

PropTypes removals

If you are still using PropTypes you should reconsider as React Native core is almost done removing all references to it.

cdfddb4dad7 RN: Remove deprecated-react-native-props Dependency
3e229f27bc9 RN: Remove propTypes from Image, Text, and TextInput
10199b15813 RN: Remove {Color,EdgeInsets,Point}PropType and ViewPropTypes

Fix ScrollView Snapping [Android]

Pieter De Baets pieterdb@fb.com fixed ScrollView’s setSnapToInterval offset calculation to take into consideration density of the Context/Activity instead of the screen.

This is done by using PixelUtil.getDisplayMetricDensity instead of DisplayMetricsHolder.getScreenDisplayMetrics.

Support platform color with AnimatedColor

Continuation of last week’s work. Genki Kondo gkondo@fb.com introduced AnimatedColor API and now landed support for us to use platform colors.

Implement Chrome DevTools inspector API - Runtime.callFunctionOn

John Porto jpporto@fb.com implemented the Chrome DevTools Protocol function - Runtime.callFunctionOn to enable proper inspection of Hermes through Chrome DevTools.

According to Chrome DevTools the callFunctionOn is responsible for:

Calls function with given declaration on the given object. Object group of the result is inherited from the target object.

Single underscore privates methods being obfuscated

These changes don’t seem to impact OSS React Native, I think. Two bugs were fixed where underscore prefixed methods were obfuscated at Facebook for being private due to its internal compiler (Flow) for obfuscating underscore private fields.

Further Runtime Yielding Improvements

Samuel Susla samuelsusla@fb.com refactored RuntimeScheduler’s yielding flag to use a counter for pending lambdas instead of a boolean flag. Yield for each access to the runtime

From Samuel’s commit message:

With multiple requests to the runtime, we need to make sure they are all granted before React continues with rendering. A boolean is not enough to track this. The first lambda that has VM will set it to false and subsequent requests will have to wait for React to finish rendering.

Build tests for RNTester

Commit by Gabriel Donadel Dall’Agnol donadeldev@gmail.com.

Attempt fix on App termination [iOS]

Samuel Susla samuelsusla@fb.com is attempting to fix a Fabric crash on iOS when the app is closed by stoping all surfaces before the app is terminated.

Fix ScrollView contentOffset [Android]

Commit.

Summary by Genki Kondo gkondo@fb.com:

When setting ScrollView’s contentOffset, if the ScrollView hasn’t been laid out yet when ReactScrollViewManager.setContentOffset is called, then scroll position is never set properly. This is because the actual scroll offset (0, 0) was being passed into setPendingContentOffsets, instead of the desired scroll offset. Thus, when ReactScrollView.onLayout gets called, ReactScrollView.scrollTo gets called with (0, 0).

-    setPendingContentOffsets(actualX, actualY);
+    ReactScrollViewHelper.updateFabricScrollState(this);
+    setPendingContentOffsets(x, y);

Updates to PushNotificationIOS

Despite its deprecation in favor of the community module, some work went in to enable custom sound in local notications and to avoid error messages in Xcode.

Dependency updates

Community

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.

Done

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