Fix Switch causing RetryableMountingLayerException

[jonathanmos]

Summary

Added a null check to native.value in Switch to fix regression from RN 66 -> stuck operation in mViewCommandOperations list in Android Release on initial layout of a screen with Switch component. If approved, please incorporate this fix into an RN 66 release.

Changelog

[Android][Fixed] - Added a null check to native.value in Switch to fix #32594

Test Plan

To reproduce, put a log in UIViewOperationQueue in dispatchViewUpdates you can see that the RetryableMountingException is no longer thrown for a screen with the Switch component on Android Release. As a result, mViewCommandOperations no longer has a stuck operation on initial layout.

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 05b4570
Branch: main

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,477,042	+288,693
android	hermes	armeabi-v7a	7,776,544	-11,931
android	hermes	x86	8,945,903	+387,608
android	hermes	x86_64	8,890,002	+378,670
android	jsc	arm64-v8a	9,791,895	-65,574
android	jsc	armeabi-v7a	8,752,623	-89,506
android	jsc	x86	9,740,722	-82,791
android	jsc	x86_64	10,341,576	-79,108

Base commit: 05b4570
Branch: main

[lunaleaps]

In the issue, you mention that we attempt to setNativeValue on initial render but wouldn't nativeSwitchRef.current be null in this case?

I believe that's why we have the check there to avoid the case of the native view not being rendered yet. If this isn't the appropriate check, then maybe we need to update it.

[lunaleaps]

For more context, this was part of a Switch refactor and this logic used to live in a componentDidUpdate (

react-native/Libraries/Components/Switch/Switch.js

Line 220 in 683b825

this._nativeSwitchRef.setNativeProps

). I believe these changes should still occur in a useLayoutEffect as this behavior we're trying to do is keep the JS and native value in sync but maybe we need to also check if nativeValue is set.

Although, forgive me if I'm mis-remembering, shouldn't the native ref only be set when the native view has been rendered?

[d4vidi]

@jonathanmos ping?

[jonathanmos]

@lunaleaps I'd like to revive this pr and hopefully we can bring it to a conclusion.

You suggested in your comments adding a check for whether native.value was set. I've tried adding such a check to shouldUpdateNativeSwitch and it does solve the issue, but I've hesitated to push it as a fix as i noticed that after this change shouldUpdateNativeSwitch seems to always return false (value is always equal to native.value) and so setNativeValue is not being called. I think I'm not understanding completely in what situation these values are both set but different. Do you know what steps I can use to simulate such a situation in a test to ensure that everything works as expected?

[jonathanmos]

Regarding the nativeref being set only on render, I'm unsure exactly what is going on here. The nativeref is undoubtedly set when the call to setnativevalue is made, but nevertheless causes a retryableMountingException on the initial render

[asafkorem]

Hi @lunaleaps 👋🏼
We will be very grateful to reach a solution soon, as this stuck operation affects Detox tests directly with synchronization issues and fails tests of screens that involves switch components unless a workaround is used. 🙏🏼

[lunaleaps]

jonathanmos

Hmm for coming up with a case where native might be out of sync with JS, I think is an edge case. I could see something like dynamically toggling disabled perhaps that will get the native value and JS value out of sync or a very quick succession of JS updates? Generally that useLayoutEffect logic shouldn't be firing as JS and native values should mostly be in sync

Are you seeing other issues when adding a null check for nativeSwitchRef on this line?

[jonathanmos]

@lunaleaps In the tests that I've run, out of the variables in useLayoutEffect, only native.value is null on initial render of the component (although this is unconnected to whether the RetryableMountingLayerException is thrown as sometimes it is and sometimes not). Adding a null check for native.value in this line prevents useLayoutEffect from executing logic on the initial render. This 'solves' the issue by avoiding inserting the problematic operation into the queue.

I've tried rapid toggling of disabled state for the switch, as well as sending many js operations, but was unable to produce a situation where sync was lost.

[facebook-github-bot]

@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[lunaleaps]

@jonathanmos Can we update the changelog summary of this change as well? Thanks!

[jonathanmos]

@lunaleaps I've updated the changelog for the issue

[facebook-github-bot]

@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[lunaleaps]

Oh actually thinking about this again, I think the case to test this is if we hardcode the JS value to be some constant value -- then we want to ignore any attempts of native to toggle the switch. Let me try this case out

[react-native-bot]

This pull request was successfully merged by @jonathanmos in 8d50bf1.

^{When will my fix make it into a release? | Upcoming Releases}