Fix excessive toggles on the Switch component #26496
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
In Windows, if you clicked on a Switch component to toggle it, you could see it "shimmy" back and forth once before settling. The native Switch ends up toggling three times every time it's invoked.
Switch.js
prevents the native switch from toggling to the new value by explicitly setting the switch tothis.props.value
when it receives anonChange
event. The re-setting of the value wasn't fast enough to prevent theSwitch
from starting to toggle, causing the visual shimmy.The solution is taken from
TextInput
.TextInput.js
stores_lastNativeText
when it receives anonChange
event. IncomponentDidUpdate
, it putsthis.props.text
back on the native textbox if the value ofthis.props.text
isn't the same as_lastNativeText
, which is how it ensures that it is a controlled component. Porting this to theSwitch
results in only one toggle happening per invoke, removing the shimmy, while preserving the controlled component behavior.This bug is not visible on Android or iOS, only Windows, however the code causing the bug was in
Switch.js
and it seems reasonable to avoid changing the value of the native switch excessively.Changelog
[General] [Fixed] - Fix excessive toggles on the Switch component
Test Plan
Used RNTester on Android and iOS to test the Switch component and made sure that all scenarios behave as expected visually. Also ensured through the debugger that the value of the native switch is only being changed once, instead of three times.
Ruriko Araki
Microsoft Corp.