Welcome to the 21th edition of React Native Weekly!

This is everything that happened in between 2nd of August and 8th of August 2021.

Allows to set individual (left,top,right,bottom) dotted/dashed borders [Android] [Fix]

With fabriziobertoglio1987 fabrizio.bertoglio@gmail.com ‘s fixes, on Android, if a single border is specified and the borderStyle is dotted or dashed then each border gets drawn taking the border style and thickness into consideration.

AFTER	AFTER

AFTER	AFTER

AFTER	AFTER

AFTER	AFTER

AFTER	AFTER

AFTER	AFTER

Feature Detection Utility Module

Small module that will currently only encapsulate isNativeFunction used in setUpTimers, but you can expect more functions to be added to it in the future, like on the next commit that adds hasNativeConstructor utility function.

Allow resolving view from FabricUIManager [Android]

Change

If you ever need to get a React View in the Android native layer this FabricUIManager method might be useful.

+  /**
+   * Resolves a view based on its reactTag. Do not mutate properties on this view that are already
+   * managed by React, as there are no guarantees this changes will be preserved.
+   *
+   * @throws IllegalViewOperationException if tag could not be resolved.
+   * @param reactTag tag
+   * @return view if found
+   */
+  View resolveView(int reactTag);
+

Extend getInspectorDataForInstance to return props

Change

@@ -216,6 +216,8 @@ InspectorData Scheduler::getInspectorDataForInstance(
         result.lineNumber = (int)source["lineNumber"].getDouble();
         result.columnNumber = (int)source["columnNumber"].getDouble();
         result.selectedIndex = (int)dynamic["selectedIndex"].getDouble();
+        // TODO T97216348: remove folly::dynamic from InspectorData struct
+        result.props = dynamic["props"];
         auto hierarchy = dynamic["hierarchy"];
         for (size_t i = 0; i < hierarchy.size(); i++) {
           auto viewHierarchyValue = hierarchy[i]["name"];

StatusBarIOS was removed

Case you were stil using StatusBarIOS, it was removed from the repo. The main functionalities of this component was merged with the StatusBar component back in 2019.

Nomenclature “Paper” replaced for “old renderer”

Change, just an evidence that the era of the new asynchronous renderer (Fabric) has come 🙌.

Fix Deadlock in RCTi18nUtil [iOS]

This change is a good summary about a deadlock bug caused by two threads trying to access the same resource.

Commit message by Saad Najmi saadnajmi2@gmail.com:

Internally in Microsoft code, we ran into a deadlock where the main queue and the UIManager queue were both trying to access [RCTI18nUtil sharedInstance], and were blocked on each other. This is similar to an earlier issue with RCTScreenScale decsribed here.

To summarize: 1- RCTShadowView (on the UIManager queue) and RCTView (on the main queue) both try to access [RCTI18nUtil sharedInstance] 2- The UIManager thread gets there first, and lazily initializes the sharedInstance. Meanwhile, the main thread is waiting on a lock possessed by the UIManager thread 3- As part of the initialization, we set an NSUserDefault, which seems to require the (blocked) main thread. 4- Deadlock.

For whatever reason, this only happens on debug. I did not figure out why, but I do know based on this comment, that the UIManagerQueue should never block the main queue.

The fix is to not use NSUserDefaults, and simpy use atomic properties instead. We get the thread safety for free, and it also simplifies the code somewhat without changing the public API. The downside is values aren’t persisted anymore, but I do not think that was necessary / intended.

Taps to overflowed Views [Fix] [Android]

This is an important fix by Harry Yu hy.harry.yu@gmail.com. Previously, on Android, taps to a View that is overflown and had overflow:visible did not register the tap. His change fixes this issue.

Summary: By default, Views in React Native have overflow: visible. When a child view is outside of the parent view’s boundaries, it’s visible on Android, but not tappable. This behaviour is incorrect, and doesn’t match iOS behaviour.

Taps on Views outside the bounds of a parent with overflow: visible (or unset) should register
Taps on Views outside the bounds of a parent with overflow: hidden should continue to not register

Before	After

Expo SDK 43 will support React Native for Web v17

Lots of new features and changes that you can start preparing your projects for now.

This also means upgrading to React and React DOM 17 support, and Babel ^7.12.9

Source

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

React Native Weekly - W32 2021