Welcome to the tenth edition of React Native Weekly. This is week 21 of 2021.
Reach out to me via Twitter if you have any feedback, and don’t forget to subscribe!
Curated List Of Native Modules
Someone (can’t see their name) tweet a curated list of native modules in a Github repo. I thought this was a good idea which would be nice to have it centralized under the React Native Community.
Build A Game With React Native?
This article hosted by Software Mansion and written by Wojciech Stanisz goes over some techniques he used with Reanimated 2 to build his game.
Coinbase’s Article On Its Animated TabBar
At Coinbase one of the biggest risks for our React Native rewrite was overcoming the stigma that “you can’t build great UX with React Native”.
Today we’re publishing some of the interaction details we sweat in order to prove that sentiment wrong.
A Guide To React Native Optmization
This video by the evening kid is based on Callstack’s eBook. It is short and straight to the point.
Accessibility Improvements
There were two external contributions to accessibility.
- 35dd86180ba Fix/30842 - Add accessibilityState prop in slider (#31145)
Accessibility service does not announce “selected” on accessibilityState =
{selected: true} of the Button Component. Issue link - https://github.com/facebook/react-native/issues/30956
- ea609defe84 Disable TouchableOpacity when accessibility disabled is set (#31108)
When using a screen reader the TouchableOpacity component disables click functionality. Fixes Issue https://github.com/facebook/react-native/issues/30951
Add Android 12 BLUETOOTH_[CONNECT/SCAN] to PermissionsAndroid
eeb8e5829e1 feat: add Android 12 BLUETOOTH_[CONNECT/SCAN] to PermissionsAndroid (#31488)
This PR adds BLUETOOTH_CONNECT / BLUETOOTH_SCAN, which showed up in the latest Android 12 Preview build as new dangerous permissions requiring approval for them.
Shipped The New Diff Algorithm to iOS
d393cc4814d Ship new differ on iOS
While we are still waiting for Android results, we can safely ship this on iOS.
Add ios_assume_nonnull flag to Rect Native Codegen
This was a change intended to deal with an Objective-C compiler issue because the code generated by codegen had partially annotation. The interesting part is learning how the codegen will translate nullabable types and how this impacts Lightspeed and Instagram apps.
Changelog: [iOS][Added] - Description
When compiling iOS apps with flag -Wnullability-completeness (like Lightspeed app and soon Instagram), Objective-C headers are required to either have full explicit nullability annotations on all members of its public API, or none at all; partially annotated headers will fail to build that module.
RN native modules are currently generated with partial annotations. This works today because most apps are not compiled with -Wnullability-completeness turned on. But when we flip the switch for Instagram, the app doesn’t build due to importing these RN partially annotated modules.
JavsScript Flow types are implied nonnull, and the current RN codegen translates Flow’s maybe/optional type to Obj-C _Nullable annotation, and everything else without an explicit Obj-C annotation. However this creates a mismatch with the Obj-C type system, where the implied default is unannotated, which is handled differently from nonnull when built with the nullability compiler flags.
Proposed Fix For ScrollView Race Condition Between C++ State Update And OnScroll [Fabric]
b161241db2e Proposed fix for ScrollView race condition between C++ state update and onScroll.
In Fabric, usage of measure relies on C++ having an accurate view of the current scroll position of the ScrollView, and sometimes the C++ update will lose and C++ will have an inaccurate view of the world when FlatList receives the onScroll event and calls measure.
My proposed solution, gated behind a feature flag, is to delay /some/ onScroll events until the C++ UpdateState has made its way back to Java, and send UpdateStates more frequently. The balance here is that UpdateState is a relatively expensive operation, so we probably still want to call it /less/ than we call onScroll. This means that measure will still return some incorrect results but will return correct results more frequently. Win?
Fix Hermes Build on iOS
If you were experiencing issues with building Hermes on iOS on version 0.65 this commit fixes it.
Introduce RCTInitializing
9b45df1fced introduces an initializer for NativeModules.
Motivation
NativeModules need a way to execute custom initialization code. The current way to achieve this is by overriding the setBridge: method. This doesn’t work in bridgeless mode, because in bridgeless mode, the TurboModule system doesn’t (and shouldn’t) invoke the setBridge: method.
Changes
This diff introduces a new protocol RCTInitializing that NativeModules can conform to. Once they conform to this protocol, they can implement the - (void)initialize; method. Both the NativeModule and TurboModule infra will execute this method towards the end of NativeModule setup.
Related changes:
a2ab3fccd04 Migrate RCTNativeAnimatedTurboModule to initialize 8aa85241a43 Migrate RCTDevSettings to initialize ed86891d012 Migrate NativeModules to initialize
Replace EventDispatcherImpl with LockFreeEventDispatcherImpl [Android]
I wanted to include this change in this week’s log, but I don’t have much I can say about it. Joshua Gross joshuagross@fb.com explains in his commit that he is concerned with the performance implications of the original EventDispatcherImpl because it uses synchronized blocks to make it thread-safe.
Move isColorMeaningful to platform specific code
A contribution from Microsoft to move isColorMeaningful to platform specific code (#31557).
isColorMeaningful is the only place in xplat code that currently uses colorComponentsFromColor, which assumes that a color is an RGBA value. When implementing PlatformColor for windows, where colors might be complex patterns or effects, I’d like to keep the details of SharedColor isolated within SharedColor. This change moves isColorMeaningful into color.cpp, where each platform can provide an implementation that takes into account its platform specific color capabilities.
That Is It!
That’s it for this week. If you want to see more checkout previous week’s posts here. Subscribe to get notified when new posts are out = )