Welcome to the 30th edition of React Native Weekly!
This is week 42 of 2021: October 11th and 17th.
Added ACCESS_MEDIA_LOCATION to PermissionsAndroid
Commit by Aditya Wasan adityawasan55@gmail.com
Fixed incorrect offset position after scrollToItem [IOS]
Xin Chen xch@fb.com fixed an edge case where the offset measurement in the ScrollView was off after calling scrollToIndex or scrollToItem with animation false.
Kotlin & Gradle version bumps
Commit bumped Kotlin version to 1.5.31 and Gradle version to 7.2
Add hermesFlagsForVariant and deleteDebugFilesForVariant
Geraint White geraintwhite@gmail.com’s commit adds two build.gradle config lambdas: hermesFlagsForVariant and deleteDebugFilesForVariant.
Previously build.gradle would only give you a Hermes release configuration if the target name contained release. With the above change you can now set the release config as you wish - this is helpful if you have staging releases for instance where the target name does not contain “release” i.e., “your-app-staging”.
You can set hermesFlagsForVariant and deleteDebugFilesForVariant in android/app/build.gradle.
Commit and issue related to this.
Fix border positioning regression [Android]
Issue introduced a regression where non-rounded borders on Android would render outside of the view. This change addresses that by rendering the borders completely inside the view like it works on iOS.
Refactor touch event dispatch
While this change is only relevant internally to the touch event architecture for Android, it introduces improvements that should decrease allocations done when transforming events, according to Andrei Shikov ashikov@fb.com.
Essentially, Andrei Shikov reuses the event emitter’s receiveEvent method directly to dispatch events instead of the previous custom dispatcher.
Centralize C++ compiler flags in rn_defs.bzl
This commit unifies all C++ compiler flags used throughout the project under Bazel’s config file.
Stop using RTTI features in Fabric core and components
Joshua Gross joshuagross@fb.com’s commit removes a few dynamic casting from the codebase as an effort to possibly disabled RTTI in a near future.
For Context, in C++, RTTI’s have a bad rep for having bad performance, increasing bundle size to include the type informations, and for indicating a bad architecture.
Add Github Action to close stale PRs and issues
Nicola Corti ncor@fb.com’s commit adds a Github Action to close stale issues/PRs that have one year of inactivity.
React Native Core Team QA
There were a few great questions and answers on topics like: list peformance; input & keyboard handling; upgrading React Native; and when will Fabric/TurboModule become production ready for Open Source.
A few answers overlapped on the contribution that concurrent mode can make on performance. In one answer on the performance problems of the current FlatList, Timothy Yung shared how simply creating a synchronous version of the FlatList wouldn’t necessarily solve performance since the JavaScript thread can be blocked by other computations or garbage collection, he continued to say that with concurrent mode they can explore improving it. Yung shared how the FlatList is used by many components at Facebook and changing/improving requires caution.
Faster bundling in Expo by Evan Bacon
Faster bundling in Expo by Evan Bacon. Expo and Evan continues pushing React Native forward. This article highlights how Evan is improving Metro’s bundling time by using a custom Metro transformer that does the following:
- Avoid transforming already transformed code in node_modules
In contrast with the web, React Native 3rd party libs are shipped as is without having it pre-bundled, with some exceptions.
-
Use a faster transformer - Sucrase on the untransformed code in node_modules
-
Use Babel only in the remaining application code
The insight from this is: React Native 3rd party ecosystem habit of shipping unbundled code is a bad practice, we should try to push the community towards shipping bundled code. And due to the high number of plugins, Babel is slow to transform all the code. The less code we transform with Babel the faster it obviously becomes.
If you are interested in the topic, I recommend reading it since Evan Bacon does an amazing job with Gifs to illustrate his point.
I haven’t had the time to look into the exotic transformer itself yet, but I believe we can replicate this same idea on a non-Expo project.
Community
- Lorenzo Sciandra’s React Native Performance Compendium link
- React Native hint: for optimizing images
npx expo-optimize - Marc Rousavy is looking for sponsors for VisionCamera
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 = )