Fix Switch broken as controlled component (facebook#50928)

Summary:
Pull Request resolved: facebook#50928

This broke in D72979663, since we relied on the object identify of `native` changing to correctly reset the native state back to the controlled JS state.

Changelog: [General][Fixed] Fixed switches correctly reverting to controlled state

Reviewed By: vzaidman

Differential Revision: D73653323

fbshipit-source-id: d6ca8a31d9f08a339c7acf6bba264137690dd794

Author: javache

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

@@ -22,6 +22,7 @@ import SwitchNativeComponent, {
   Commands as SwitchCommands,
 } from './SwitchNativeComponent';
 import * as React from 'react';
+import {useLayoutEffect, useRef, useState} from 'react';
 
 export type SwitchPropsIOS = {
   /**
@@ -179,13 +180,16 @@ const Switch: component(
   const trackColorForFalse = trackColor?.false;
   const trackColorForTrue = trackColor?.true;
 
-  const nativeSwitchRef = React.useRef<React.ElementRef<
+  const nativeSwitchRef = useRef<React.ElementRef<
     typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
   > | null>(null);
 
   const ref = useMergeRefs(nativeSwitchRef, forwardedRef);
 
-  const [native, setNative] = React.useState({value: (null: ?boolean)});
+  // We wrap the native state in an object to force the layout-effect
+  // below to re-run whenever we get an update from native, even if it's
+  // not different from the previous native state.
+  const [native, setNative] = useState({value: (null: ?boolean)});
 
   const handleChange = (event: SwitchChangeEvent) => {
     // $FlowFixMe[unused-promise]
@@ -195,7 +199,7 @@ const Switch: component(
     setNative({value: event.nativeEvent.value});
   };
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     // This is necessary in case native updates the switch and JS decides
     // that the update should be ignored and we should stick with the value
     // that we have in JS.
@@ -213,7 +217,7 @@ const Switch: component(
         SwitchCommands.setValue(nativeSwitchRef.current, jsValue);
       }
     }
-  }, [value, native.value]);
+  }, [value, native]);
 
   if (Platform.OS === 'android') {
     const {onTintColor, tintColor, ...androidProps} = restProps;