Properly render switch on/off text when labelPosition prop = "before"

apps/fluent-tester/src/TestComponents/Switch/SwitchTest.tsx

@@ -96,6 +96,7 @@ const OnOffText: React.FunctionComponent = () => {
     <View style={commonTestStyles.settingsPicker}>
       <Switch defaultChecked={true} labelPosition={'before'} label={'Autosave'} onText={'On'} offText={'Off'} />
       <Switch defaultChecked={true} labelPosition={'above'} label={'Autosave'} onText={'On'} offText={'Off'} />
+      <Switch defaultChecked={true} labelPosition={'after'} label={'Autosave'} onText={'On'} offText={'Off'} />
     </View>
   );
 };

change/@fluentui-react-native-switch-407aa2c6-eb30-4bca-9b93-dc14436e8786.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "On/off text renders with labelPosition=before",
+  "packageName": "@fluentui-react-native/switch",
+  "email": "winlarry@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-3b07212a-3b7c-48bd-a9ba-516497167dc8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add new example for Switch on/off text section",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "winlarry@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/components/Switch/src/Switch.styling.ts

@@ -102,6 +102,16 @@ export const stylingSettings: UseStylingOptions<SwitchProps, SwitchSlotProps, Sw
       }),
       ['color', ...fontStyles.keys],
     ),
+    onOffTextContainer: buildProps(
+      () => ({
+        style: {
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          justifyContent: 'center',
+        },
+      }),
+      [],
+    ),
     onOffText: buildProps(
       (tokens: SwitchTokens, theme: Theme) => ({
         style: {

packages/components/Switch/src/Switch.tsx

@@ -1,9 +1,11 @@
 /** @jsx withSlots */
+import type { StyleProp } from 'react-native';
 import { View, AccessibilityInfo, Pressable, Animated, Platform } from 'react-native';
 
 import type { UseSlots } from '@fluentui-react-native/framework';
-import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import { compose, memoize, mergeProps, withSlots } from '@fluentui-react-native/framework';
 import { Text } from '@fluentui-react-native/text';
+import type { TextStyle } from '@office-iss/react-native-win32';
 
 import { stylingSettings } from './Switch.styling';
 import type { SwitchType, SwitchState, SwitchProps } from './Switch.types';
@@ -44,6 +46,7 @@ export const Switch = compose<SwitchType>({
     track: Animated.View, // Conversion from View to Animated.View for Animated API to work
     thumb: Animated.View,
     toggleContainer: View,
+    onOffTextContainer: View,
     onOffText: Text,
   },
   useRender: (userProps: SwitchProps, useSlots: UseSlots<SwitchType>) => {
@@ -68,10 +71,10 @@ export const Switch = compose<SwitchType>({
     // now return the handler for finishing render
     return (final: SwitchProps) => {
       const { label, offText, onText, labelPosition, ...mergedProps } = mergeProps(switchInfo.props, final);
-      const onOffText = switchInfo.state.toggled ? onText : offText;
       const displayOnOffText = !!offText || !!onText;
       const isReduceMotionEnabled = AccessibilityInfo.isReduceMotionEnabled;
       const thumbAnimation = isReduceMotionEnabled ? { animationClass: 'Ribbon_SwitchThumb' } : null;
+
       return (
         <Slots.root {...mergedProps}>
           <Slots.label>{label}</Slots.label>
@@ -80,10 +83,25 @@ export const Switch = compose<SwitchType>({
             <Slots.track {...(isMobile && { style: switchInfo.props.switchAnimationStyles.trackBackgroundStyle })}>
               <Slots.thumb {...thumbAnimation} {...(isMobile && { style: switchInfo.props.switchAnimationStyles.thumbAnimatedStyle })} />
             </Slots.track>
-            {displayOnOffText && <Slots.onOffText>{onOffText}</Slots.onOffText>}
+            {displayOnOffText && (
+              /**
+               * If the onText and offText are different lengths, this can cause unwanted shifting of the track, if labelPosition = "after",
+               * or the label, if labelPosition = "above". We fix this by rendering both texts and setting the height of the text to hide to
+               * zero. This way, even when not visible, the hidden text still takes up its width to prevent shifting.
+               */
+              <Slots.onOffTextContainer>
+                <Slots.onOffText style={getOnOffTextStyle('on', switchInfo.state.toggled)}>{onText}</Slots.onOffText>
+                <Slots.onOffText style={getOnOffTextStyle('off', switchInfo.state.toggled)}>{offText}</Slots.onOffText>
+              </Slots.onOffTextContainer>
+            )}
           </Slots.toggleContainer>
         </Slots.root>
       );
     };
   },
 });
+
+const onOffTextStyleWorker = (text: 'on' | 'off', isOn: boolean): StyleProp<TextStyle> => ({
+  height: (text === 'on' && isOn) || (text === 'off' && !isOn) ? undefined : 0,
+});
+const getOnOffTextStyle = memoize(onOffTextStyleWorker);

packages/components/Switch/src/Switch.types.ts

@@ -202,6 +202,7 @@ export interface SwitchSlotProps {
   track: IViewProps;
   thumb: IViewProps;
   toggleContainer: IViewProps;
+  onOffTextContainer: IViewProps;
   onOffText: TextProps;
 }
 

packages/components/Switch/src/useSwitch.ts

@@ -97,16 +97,6 @@ export const useSwitch = (props: SwitchProps, animationConfig?: AnimationConfig)
     console.warn("The props 'defaultChecked' and 'checked' are mutually exclusive. Use only one of the props, do not use both.");
   }
 
-  if (labelPosition === 'after' || labelPosition === undefined) {
-    if (__DEV__ && (!!props.onText || !!props.offText)) {
-      console.warn(
-        "The prop labelPosition's value of \"after\" and the props 'onText' or 'offText' are mutually exclusive. Try setting 'labelPosition' value to \"before\" or \"above\" instead.",
-      );
-    }
-    props.onText = null;
-    props.offText = null;
-  }
-
   const onClickWithFocus = useOnPressWithFocus(focusRef, toggleCallback);
   const pressable = usePressableState({ ...rest, onPress: onClickWithFocus });
   const onKeyUpProps = useKeyProps(toggleCallback, ' ', 'Enter');