Welcome to the 19th edition of React Native Weekly 😅

This is everything that happened in between 19th and 25th of July 2021.

Highlights

Removed default props from FlatList
Upgraded Metro to 0.66.2
Fix for maintain cursor position on TextInput
New FabricUIManager APIs

Remove defaultProps from FlatList (#31798)

Commit

Upgrade metro to 0.66.2

Commit

Add unit tests for VirtualizedList render quirks (#31401)

Commit summary:

This change adds a series of snapshot tests to validate the render output of VirtualizedList in mixed scenarios. Jest timer mocks are used to measure rendering at different ticks. These test cases mostly center around realization logic, to help prevent regressions when changing internal state representation.

Good place to look if you want to see how to test a FlatList or ScrollView.

Composing Animations in Animated API Example

Charles Dudley charlesdudley@fb.com added a Animation composing example page with examples for parallel, sequence, stagger, and delay to the rn-tester app.

Cursor Position Fix on iOS

Two commits, one and two worked on improving the cursor positon on TextInput for iOS.

Fix for crash when using PlatformColor on TextInput [Android]

The purpose of this change by David Vacca dvacca@fb.com is avoid a crash when using PlatformColor on TextInput. He refactored AndroidTextInput.AndroidTextInput.color prop to use SharedColor instead of int.

Fix missing autoCompleteType on TextInput for Android

Original issue. The change that fixes it.

The autoCompleteType on the TextInput was missing the AUTOFILL_HINT_NEW_PASSWORD value, which would help the users when signing up to a service tremendously.

diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
index b0227ca0eb5..e25e3011446 100644
--- a/Libraries/Components/TextInput/TextInput.js
+++ b/Libraries/Components/TextInput/TextInput.js
@@ -332,18 +332,42 @@ type AndroidProps = $ReadOnly<{|
    * @platform android
    */
   autoCompleteType?: ?(
+    | 'birthdate-day'
+    | 'birthdate-full'
+    | 'birthdate-month'
+    | 'birthdate-year'
     | 'cc-csc'
     | 'cc-exp'
+    | 'cc-exp-day'
     | 'cc-exp-month'
     | 'cc-exp-year'
     | 'cc-number'
     | 'email'
+    | 'gender'
     | 'name'
+    | 'name-family'
+    | 'name-given'
+    | 'name-middle'
+    | 'name-middle-initial'
+    | 'name-prefix'
+    | 'name-suffix'
     | 'password'
+    | 'password-new'
+    | 'postal-address'
+    | 'postal-address-country'
+    | 'postal-address-extended'
+    | 'postal-address-extended-postal-code'
+    | 'postal-address-locality'
+    | 'postal-address-region'
     | 'postal-code'
     | 'street-address'
+    | 'sms-otp'
     | 'tel'
+    | 'tel-country-code'
+    | 'tel-national'
+    | 'tel-device'
     | 'username'
+    | 'username-new'
     | 'off'
   ),

Commit by Tomáš Havlas tomas@havlas.me

diff --git a/ReactAndroid/src/main/java/com/facebook/react/ReactAndroidHWInputDeviceHelper.java b/ReactAndroid/src/main/java/com/facebook/react/ReactAndroidHWInputDeviceHelper.java
index 49d3cd2f40a..c73590c7d2a 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/ReactAndroidHWInputDeviceHelper.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/ReactAndroidHWInputDeviceHelper.java
@@ -36,6 +36,8 @@ public class ReactAndroidHWInputDeviceHelper {
           .put(KeyEvent.KEYCODE_DPAD_RIGHT, "right")
           .put(KeyEvent.KEYCODE_DPAD_DOWN, "down")
           .put(KeyEvent.KEYCODE_DPAD_LEFT, "left")
+          .put(KeyEvent.KEYCODE_INFO, "info")
+          .put(KeyEvent.KEYCODE_MENU, "menu")
           .build();

Flipper Upgrade

Bump Flipper to 0.99.0

Summary: Includes fix included in a Flipper Pod for incorrect timestamps in the Network viewer with iOS apps https://github.com/facebook/flipper/commit/1cf745613390e5ce87b72e09016c42784cb0566a

Fix testID support for TextInput, Slider and ScrollView component (#31865)

This is part of a long-standing issue where black-box testing frameworks like Appium and Xamarin UITest have not been able to access the testID view prop on Android.

This commit fixes for TextInput, Slider and ScrollView component.

Expose new API FabricUIManager.getInspectorDataForInstance

This is the last of three changes by David Vacca dvacca@fb.com related to exposing React metadata for a Native view:

43cdd84a22a Expose new API FabricUIManager.getInspectorDataForInstance ff494eece26 Expose new struct InspectorData 4208925bbc1 Expose new API RuntimeExecutor.executeSynchronouslyOnSameThread_CAN_DEADLOCK

Commit summary: This diff exposes a new API in FabricUIManager called getInspectorDataForInstance. The goal of this method is to return React metadata for a Native view.

This data will be used from partner teams to build tools that uses React metadata in RN.

Rendering thousands of images

Fernando Rojo demo-ed his work on Beatgig. Pretty impressive rendering of thousands of list items without any flickering.

His tweet

He says his secret is:

FlatList
memoize everything
zero logic or functions in the list items
react-native-fast-image
tiny item components

React Native 0.65 RC3 is here, packed with hermes 0.8.1

Tweet by Thibault Malbranche

Stripe is hiring a React Native Developer

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 - W30 2021