This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix excessive toggles on the Switch component (#26496)
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 to `this.props.value` when it receives an `onChange` event. The re-setting of the value wasn't fast enough to prevent the `Switch` from starting to toggle, causing the visual shimmy. The solution is taken from `TextInput`. `TextInput.js` stores `_lastNativeText` when it receives an `onChange` event. In `componentDidUpdate`, it puts `this.props.text` back on the native textbox if the value of `this.props.text` isn't the same as `_lastNativeText`, which is how it ensures that it is a controlled component. Porting this to the `Switch` 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 Pull Request resolved: #26496 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. Reviewed By: TheSavior Differential Revision: D17468905 Pulled By: JoshuaGross fbshipit-source-id: 92bf511510306968c3573ee4eed6df009850fd77
- Loading branch information
Showing 1 changed file with 21 additions and 9 deletions.