Welcome to the 32nd edition of React Native Weekly!

This is week 44 of 2021: October 25th and 31st.

Fix devDisabledInStaging not working with multiple productFlavors [Android]

Geraint White geraintwhite@gmail.com’s commit fixes the ability to disable dev builds for specific build target (product flavor).

Now you can define a disableDevForVariant lambda in build.gradle project.ext.react to define if this build variant should have dev build disabled.

project.ext.react = [
    ...
    disableDevForVariant: {
         def variant -> variant.name.toLowerCase().contains('release') || variant.name.toLowerCase().contains('live')
    },
    ...
]

Add bundleForVariant option [Android]

Geraint White geraintwhite@gmail.com also implemented a bundleForVariant lambda. The bundle output (.aab) is an optimized APK which the Play Store can derive all the APK architecture from.

With bundleForVariant you can now define to use the bundle option per build variant. Similar to disableDevForVariant:

  bundleForVariant: {
       def variant -> variant.name.toLowerCase().contains('release') || variant.name.toLowerCase().contains('live')
  },

Update XMLHttpRequest.getAllResponseHeaders() implementation

Andrew Scherkus ascherkus@gmail.com updated getAllResponseHeaders to conform with the XHR whatwg spec.

As per the XMLHttpRequest specification [1], getAllResponseHeaders() should return a string of headers with lowercased names and sorted by their uppercase representation, with each header ending with ‘\r\n’. [1] https://xhr.spec.whatwg.org/#the-getallresponseheaders()-method

Expose Pressability Hover config props in Pressable

Saad Najmi sanajmi@microsoft.com highlighted how react-native-macos, react-native-windows, and react-native-web all already support mouse hover events since the underlying Pressability module already calculates onMouseEnter/onMouseLeave events. The core React Native Pressable event wasn’t sending these events because the props were not forwarded - Saad fixes this.

Fix Switch crash [Android]

The Switch component is crashing when initialized with both backgroundColor and thumbColor.

Stefanos Markidis stmarkidis@gmail.com’s fix and summary:

ReactSwitch component is crashing on Android when it is initialised with both a backgroundColor and thumbColor, style={{ backgroundColor: "anyColor" }} thumbColor="anyColor", due to IllegalCastException.

Red screen will show highlighting an IllegalCastException.

With fix:

backgroundColor with thumbColor:

Just thumbColor:

Fix #flingAndSnap to check all the scroll item for offset range [Android]

According to Xin Chen xch@fb.com, when the ScrollView calculated the offset of the items it skipped the first item since it assumed the offset was zero, turns out this is not always the case and thus this diff fixes this.

Added isAccessibilityServiceEnabled to get if accessibility services are enabled [Android]

grgr-dkrk 40130327+grgr-dkrk@users.noreply.github.com’s commit adds isAccessibilityServiceEnabled:

  AccessibilityInfo.isAccessibilityServiceEnabled().then(state => {
    this.setState({isEnabled: state});
  });

React Freeze

Krzysztof Magiera’s thread on performance audit of RN apps to announce React Freeze - an experimental library that uses Suspense to prevent portions of React trees from rendering.

If you are using react-navigation you can try it just by upgrading to react-native-screens 3.9 and calling enableFreeze(true).

Dripsy V3

Dripsy is worth checking out, specially if you need responsive UI. This library created by Fernando Rojo is an unstyled, responsive UI primitives for React Native + Web.

V3 annoucement

Monorepo example

Victor Malov posted a tweet sharing his Monorepo workflow for React Native that supports:

• TypeScript
• Yarn v3 Face screaming in fear
• Yarn Workspaces
• TypeScript Project References
• Multiple RN example apps: 0.65.1, 0.66.0, 0.66.1
• Shared example code

Towards Hermes being the default

The core React Native shared shared this post on how they envision Hermes becoming the default JS engine for all the platforms using React Native.

Done

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