fix: set transformOrigin only for mobile

Author: lukewalczak

src/components/Button/Button.tsx

@@ -220,6 +220,7 @@ const Button = (
   );
   const { roundness, isV3, animation } = theme;
   const uppercase = uppercaseProp ?? !theme.isV3;
+  const isWeb = Platform.OS === 'web';
 
   const hasPassedTouchHandler = hasTouchHandler({
     onPress,
@@ -255,8 +256,7 @@ const Button = (
         toValue: activeElevation,
         duration: 200 * scale,
         useNativeDriver:
-          Platform.OS === 'web' ||
-          Platform.constants.reactNativeVersion.minor <= 72,
+          isWeb || Platform.constants.reactNativeVersion.minor <= 72,
       }).start();
     }
   };
@@ -269,8 +269,7 @@ const Button = (
         toValue: initialElevation,
         duration: 150 * scale,
         useNativeDriver:
-          Platform.OS === 'web' ||
-          Platform.constants.reactNativeVersion.minor <= 72,
+          isWeb || Platform.constants.reactNativeVersion.minor <= 72,
       }).start();
     }
   };

src/components/Chip/Chip.tsx

@@ -213,6 +213,7 @@ const Chip = ({
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const { isV3, roundness } = theme;
+  const isWeb = Platform.OS === 'web';
 
   const { current: elevation } = React.useRef<Animated.Value>(
     new Animated.Value(isV3 && elevated ? 1 : 0)
@@ -234,8 +235,7 @@ const Chip = ({
       toValue: isV3 ? (elevated ? 2 : 0) : 4,
       duration: 200 * scale,
       useNativeDriver:
-        Platform.OS === 'web' ||
-        Platform.constants.reactNativeVersion.minor <= 72,
+        isWeb || Platform.constants.reactNativeVersion.minor <= 72,
     }).start();
   });
 
@@ -246,8 +246,7 @@ const Chip = ({
       toValue: isV3 && elevated ? 1 : 0,
       duration: 150 * scale,
       useNativeDriver:
-        Platform.OS === 'web' ||
-        Platform.constants.reactNativeVersion.minor <= 72,
+        isWeb || Platform.constants.reactNativeVersion.minor <= 72,
     }).start();
   });
 

src/components/TextInput/Label/InputLabel.tsx

@@ -56,6 +56,8 @@ const InputLabel = (props: InputLabelProps) => {
   const { INPUT_PADDING_HORIZONTAL } = getConstants(isV3);
   const { width } = useWindowDimensions();
 
+  const isWeb = Platform.OS === 'web';
+
   const paddingOffset =
     paddingLeft && paddingRight ? { paddingLeft, paddingRight } : {};
 
@@ -111,9 +113,10 @@ const InputLabel = (props: InputLabelProps) => {
             : labeled,
       },
     ],
-    ...(Platform.constants.reactNativeVersion.minor >= 73 && {
-      transformOrigin: 'left',
-    }),
+    ...(!isWeb &&
+      Platform.constants.reactNativeVersion.minor >= 73 && {
+        transformOrigin: 'left',
+      }),
   };
 
   const labelWidth =
@@ -147,9 +150,9 @@ const InputLabel = (props: InputLabelProps) => {
         pointerEvents="none"
         style={[
           StyleSheet.absoluteFill,
-          Platform.OS !== 'web' && { width },
+          !isWeb && { width },
           { opacity },
-          Platform.constants.reactNativeVersion.minor <= 72 &&
+          (isWeb || Platform.constants.reactNativeVersion.minor <= 72) &&
             labelTranslationX,
         ]}
       >

src/components/TextInput/Label/LabelBackground.tsx

@@ -17,6 +17,8 @@ const LabelBackground = ({
   maxFontSizeMultiplier,
   testID,
 }: LabelBackgroundProps) => {
+  const isWeb = Platform.OS === 'web';
+
   const opacity = labeled.interpolate({
     inputRange: [0, 0.6],
     outputRange: [1, 0],
@@ -52,7 +54,7 @@ const LabelBackground = ({
           bottom: Math.max(roundness, 2),
           opacity,
         },
-        Platform.constants.reactNativeVersion.minor <= 72 && {
+        (isWeb || Platform.constants.reactNativeVersion.minor <= 72) && {
           transform: [labelTranslationX],
         },
       ]}