Merge pull request #46358 from software-mansion-labs/types/react-native-web

[NO QA] Move react-native-web styles to a separate package

Author: roryabraham

package-lock.json

@@ -245,6 +245,7 @@
     "@types/react-collapse": "^5.0.1",
     "@types/react-dom": "^18.2.4",
     "@types/react-is": "^18.3.0",
+    "@types/react-native-web": "^0.0.0",
     "@types/react-test-renderer": "^18.0.0",
     "@types/semver": "^7.5.4",
     "@types/setimmediate": "^1.0.2",

package.json

@@ -1,8 +1,9 @@
 import type {ImageContentFit} from 'expo-image';
 import React, {useMemo} from 'react';
-import type {ImageSourcePropType, StyleProp, TextStyle, ViewStyle, WebStyle} from 'react-native';
+import type {ImageSourcePropType, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {SvgProps} from 'react-native-svg';
+import type {WebStyle} from 'react-native-web';
 import type {MergeExclusive} from 'type-fest';
 import AutoEmailLink from '@components/AutoEmailLink';
 import Icon from '@components/Icon';

src/components/BlockingViews/BlockingView.tsx

@@ -4,7 +4,7 @@ import type {BaseSyntheticEvent, ForwardedRef} from 'react';
 import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {flushSync} from 'react-dom';
 // eslint-disable-next-line no-restricted-imports
-import type {DimensionValue, NativeSyntheticEvent, Text as RNText, TextInput, TextInputKeyPressEventData, TextInputSelectionChangeEventData, TextStyle} from 'react-native';
+import type {NativeSyntheticEvent, Text as RNText, TextInput, TextInputKeyPressEventData, TextInputSelectionChangeEventData, ViewStyle} from 'react-native';
 import {DeviceEventEmitter, StyleSheet, View} from 'react-native';
 import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
 import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
@@ -100,7 +100,7 @@ function Composer(
     });
     const [caretContent, setCaretContent] = useState('');
     const [valueBeforeCaret, setValueBeforeCaret] = useState('');
-    const [textInputWidth, setTextInputWidth] = useState('');
+    const [textInputWidth, setTextInputWidth] = useState<ViewStyle['width']>('');
     const [isRendered, setIsRendered] = useState(false);
     const isScrollBarVisible = useIsScrollBarVisible(textInput, value ?? '');
     const [prevScroll, setPrevScroll] = useState<number | undefined>();
@@ -352,7 +352,7 @@ function Composer(
                 opacity: 0,
             }}
         >
-            <Text style={[StyleSheet.flatten([style, styles.noSelect]), StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), {maxWidth: textInputWidth as DimensionValue}]}>
+            <Text style={[StyleSheet.flatten([style, styles.noSelect]), StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), {maxWidth: textInputWidth}]}>
                 {`${valueBeforeCaret} `}
                 <Text
                     numberOfLines={1}
@@ -378,7 +378,7 @@ function Composer(
             Browser.isMobileSafari() || Browser.isSafari() ? styles.rtlTextRenderForSafari : {},
             scrollStyleMemo,
             StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize),
-            isComposerFullSize ? ({height: '100%', maxHeight: 'none' as DimensionValue} as TextStyle) : undefined,
+            isComposerFullSize ? {height: '100%', maxHeight: 'none'} : undefined,
             textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {},
         ],
 

src/components/Composer/index.tsx

@@ -1,12 +1,12 @@
-import type {DimensionValue} from 'react-native';
+import type {ViewStyle} from 'react-native';
 import type {EdgeInsets} from 'react-native-safe-area-context';
 
 type SafeAreaChildrenProps = {
-    paddingTop?: DimensionValue;
-    paddingBottom?: DimensionValue;
+    paddingTop?: ViewStyle['paddingTop'];
+    paddingBottom?: ViewStyle['paddingBottom'];
     insets?: EdgeInsets;
     safeAreaPaddingBottomStyle: {
-        paddingBottom?: DimensionValue;
+        paddingBottom?: ViewStyle['paddingBottom'];
     };
 };
 

src/components/SafeAreaConsumer/types.ts

@@ -2,7 +2,7 @@ import {useNavigation} from '@react-navigation/native';
 import type {StackNavigationProp} from '@react-navigation/stack';
 import type {ForwardedRef, ReactNode} from 'react';
 import React, {createContext, forwardRef, useEffect, useMemo, useRef, useState} from 'react';
-import type {DimensionValue, StyleProp, ViewStyle} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {Keyboard, PanResponder, View} from 'react-native';
 import {PickerAvoidingView} from 'react-native-picker-select';
 import type {EdgeInsets} from 'react-native-safe-area-context';
@@ -31,7 +31,7 @@ import withNavigationFallback from './withNavigationFallback';
 type ScreenWrapperChildrenProps = {
     insets: EdgeInsets;
     safeAreaPaddingBottomStyle?: {
-        paddingBottom?: DimensionValue;
+        paddingBottom?: ViewStyle['paddingBottom'];
     };
     didScreenTransitionEnd: boolean;
 };

src/components/ScreenWrapper.tsx

@@ -1,10 +1,12 @@
 import React, {memo, useEffect, useRef} from 'react';
 import {InteractionManager} from 'react-native';
-import type {LayoutChangeEvent} from 'react-native';
+import type {LayoutRectangle, NativeSyntheticEvent} from 'react-native';
 import GenericTooltip from '@components/Tooltip/GenericTooltip';
 import type {EducationalTooltipProps} from '@components/Tooltip/types';
 import CONST from '@src/CONST';
 
+type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle; target: HTMLElement}>;
+
 /**
  * A component used to wrap an element intended for displaying a tooltip.
  * This tooltip would show immediately without user's interaction and hide after 5 seconds.
@@ -45,7 +47,7 @@ function BaseEducationalTooltip({children, shouldAutoDismiss = false, ...props}:
                 // eslint-disable-next-line react-compiler/react-compiler
                 hideTooltipRef.current = hideTooltip;
                 return React.cloneElement(children as React.ReactElement, {
-                    onLayout: (e: LayoutChangeEvent) => {
+                    onLayout: (e: LayoutChangeEventWithTarget) => {
                         // e.target is specific to native, use e.nativeEvent.target on web instead
                         const target = e.target || e.nativeEvent.target;
                         // When tooltip is used inside an animated view (e.g. popover), we need to wait for the animation to finish before measuring content.

src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

@@ -1,5 +1,4 @@
 import type {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack';
-import type {ViewStyle} from 'react-native';
 import type {ThemeStyles} from '@styles/index';
 import type {StyleUtilsType} from '@styles/utils';
 import variables from '@styles/variables';
@@ -61,8 +60,7 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr
                 width: '100%',
                 top: 0,
                 left: 0,
-                // We need to guarantee that it covers BottomTabBar on web, but fixed position is not supported in react native.
-                position: 'fixed' as ViewStyle['position'],
+                position: 'fixed',
             },
         }),
         leftModalNavigator: {

src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts

@@ -23,31 +23,27 @@ export default {
      * Web-only style.
      */
     dInline: {
-        // NOTE: asserting "display" to a valid type, because it isn't possible to augment "display".
-        display: 'inline' as ViewStyle['display'],
+        display: 'inline',
     },
 
     /**
      * Web-only style.
      */
     dInlineFlex: {
-        // NOTE: asserting "display" to a valid type, because it isn't possible to augment "display".
-        display: 'inline-flex' as ViewStyle['display'],
+        display: 'inline-flex',
     },
 
     /**
      * Web-only style.
      */
     dBlock: {
-        // NOTE: asserting "display" to a valid type, because it isn't possible to augment "display".
-        display: 'block' as ViewStyle['display'],
+        display: 'block',
     },
 
     /**
      * Web-only style.
      */
     dGrid: {
-        // NOTE: asserting "display" to a valid type, because it isn't possible to augment "display".
-        display: 'grid' as ViewStyle['display'],
+        display: 'grid',
     },
 } satisfies Record<string, ViewStyle>;

src/styles/utils/display.ts

@@ -20,8 +20,7 @@ const getMiniWrapperStyle = (theme: ThemeColors, styles: ThemeStyles): ViewStyle
         borderWidth: 1,
         borderColor: theme.border,
         // In Safari, when welcome messages use a code block (triple backticks), they would overlap the context menu below when there is no scrollbar without the transform style.
-        // NOTE: asserting "transform" to a valid type, because it isn't possible to augment "transform".
-        transform: 'translateZ(0)' as unknown as ViewStyle['transform'],
+        transform: 'translateZ(0)',
     },
 ];
 

src/styles/utils/generators/ReportActionContextMenuStyleUtils.ts

@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import type {AnimatableNumericValue, Animated, ColorValue, DimensionValue, ImageStyle, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import type {AnimatableNumericValue, Animated, ColorValue, ImageStyle, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {EdgeInsets} from 'react-native-safe-area-context';
 import type {ValueOf} from 'type-fest';
@@ -342,7 +342,6 @@ function getSafeAreaMargins(insets?: EdgeInsets): ViewStyle {
     return {marginBottom: (insets?.bottom ?? 0) * variables.safeInsertPercentage};
 }
 
-// NOTE: asserting some web style properties to a valid type, because it isn't possible to augment them.
 function getZoomSizingStyle(
     isZoomed: boolean,
     imgWidth: number,
@@ -356,23 +355,23 @@ function getZoomSizingStyle(
     if (isLoading || imgWidth === 0 || imgHeight === 0) {
         return undefined;
     }
-    const top = `${Math.max((containerHeight - imgHeight) / 2, 0)}px` as DimensionValue;
-    const left = `${Math.max((containerWidth - imgWidth) / 2, 0)}px` as DimensionValue;
+    const top = `${Math.max((containerHeight - imgHeight) / 2, 0)}px`;
+    const left = `${Math.max((containerWidth - imgWidth) / 2, 0)}px`;
 
     // Return different size and offset style based on zoomScale and isZoom.
     if (isZoomed) {
         // When both width and height are smaller than container(modal) size, set the height by multiplying zoomScale if it is zoomed in.
         if (zoomScale >= 1) {
             return {
-                height: `${imgHeight * zoomScale}px` as DimensionValue,
-                width: `${imgWidth * zoomScale}px` as DimensionValue,
+                height: `${imgHeight * zoomScale}px`,
+                width: `${imgWidth * zoomScale}px`,
             };
         }
 
         // If image height and width are bigger than container size, display image with original size because original size is bigger and position absolute.
         return {
-            height: `${imgHeight}px` as DimensionValue,
-            width: `${imgWidth}px` as DimensionValue,
+            height: `${imgHeight}px`,
+            width: `${imgWidth}px`,
             top,
             left,
         };
@@ -381,20 +380,20 @@ function getZoomSizingStyle(
     // If image is not zoomed in and image size is smaller than container size, display with original size based on offset and position absolute.
     if (zoomScale > 1) {
         return {
-            height: `${imgHeight}px` as DimensionValue,
-            width: `${imgWidth}px` as DimensionValue,
+            height: `${imgHeight}px`,
+            width: `${imgWidth}px`,
             top,
             left,
         };
     }
 
     // If image is bigger than container size, display full image in the screen with scaled size (fit by container size) and position absolute.
     // top, left offset should be different when displaying long or wide image.
-    const scaledTop = `${Math.max((containerHeight - imgHeight * zoomScale) / 2, 0)}px` as DimensionValue;
-    const scaledLeft = `${Math.max((containerWidth - imgWidth * zoomScale) / 2, 0)}px` as DimensionValue;
+    const scaledTop = `${Math.max((containerHeight - imgHeight * zoomScale) / 2, 0)}px`;
+    const scaledLeft = `${Math.max((containerWidth - imgWidth * zoomScale) / 2, 0)}px`;
     return {
-        height: `${imgHeight * zoomScale}px` as DimensionValue,
-        width: `${imgWidth * zoomScale}px` as DimensionValue,
+        height: `${imgHeight * zoomScale}px`,
+        width: `${imgWidth * zoomScale}px`,
         top: scaledTop,
         left: scaledLeft,
     };
@@ -538,17 +537,23 @@ function getButtonStyleWithIcon(
     }
 }
 
+type MarginPaddingValue = ViewStyle['marginTop' | 'marginBottom' | 'paddingTop' | 'paddingBottom'];
+
 /**
  * Combine margin/padding with safe area inset
  *
  * @param modalContainerValue - margin or padding value
  * @param safeAreaValue - safe area inset
  * @param shouldAddSafeAreaValue - indicator whether safe area inset should be applied
  */
-function getCombinedSpacing(modalContainerValue: DimensionValue | undefined, safeAreaValue: number, shouldAddSafeAreaValue: boolean): number | DimensionValue | undefined {
+function getCombinedSpacing(modalContainerValue: MarginPaddingValue, safeAreaValue: number, shouldAddSafeAreaValue: boolean): MarginPaddingValue {
     // modalContainerValue can only be added to safe area inset if it's a number, otherwise it's returned as is
-    if (typeof modalContainerValue === 'number' || !modalContainerValue) {
-        return (modalContainerValue ?? 0) + (shouldAddSafeAreaValue ? safeAreaValue : 0);
+    if (typeof modalContainerValue === 'number') {
+        return modalContainerValue + (shouldAddSafeAreaValue ? safeAreaValue : 0);
+    }
+
+    if (!modalContainerValue) {
+        return shouldAddSafeAreaValue ? safeAreaValue : 0;
     }
 
     return modalContainerValue;
@@ -563,10 +568,10 @@ type ModalPaddingStylesParams = {
     safeAreaPaddingBottom: number;
     safeAreaPaddingLeft: number;
     safeAreaPaddingRight: number;
-    modalContainerStyleMarginTop: DimensionValue | undefined;
-    modalContainerStyleMarginBottom: DimensionValue | undefined;
-    modalContainerStylePaddingTop: DimensionValue | undefined;
-    modalContainerStylePaddingBottom: DimensionValue | undefined;
+    modalContainerStyleMarginTop: MarginPaddingValue;
+    modalContainerStyleMarginBottom: MarginPaddingValue;
+    modalContainerStylePaddingTop: MarginPaddingValue;
+    modalContainerStylePaddingBottom: MarginPaddingValue;
     insets: EdgeInsets;
 };
 
@@ -964,8 +969,7 @@ function getCheckboxPressableStyle(borderRadius = 6): ViewStyle {
     return {
         justifyContent: 'center',
         alignItems: 'center',
-        // eslint-disable-next-line object-shorthand
-        borderRadius: borderRadius,
+        borderRadius,
     };
 }
 
@@ -1311,8 +1315,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         borderWidth: 2,
         justifyContent: 'center',
         alignItems: 'center',
-        // eslint-disable-next-line object-shorthand
-        borderRadius: borderRadius,
+        borderRadius,
     }),
 
     /**
@@ -1338,13 +1341,13 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     /**
      * Get the style for the AM and PM buttons in the TimePicker
      */
-    getStatusAMandPMButtonStyle: (amPmValue: string): {styleForAM: ViewStyle; styleForPM: ViewStyle} => {
+    getStatusAMandPMButtonStyle: (amPmValue: string): {styleForAM: StyleProp<ViewStyle>; styleForPM: StyleProp<ViewStyle>} => {
         const computedStyleForAM: ViewStyle = amPmValue !== CONST.TIME_PERIOD.AM ? {backgroundColor: theme.componentBG} : {};
         const computedStyleForPM: ViewStyle = amPmValue !== CONST.TIME_PERIOD.PM ? {backgroundColor: theme.componentBG} : {};
 
         return {
-            styleForAM: [styles.timePickerWidth100, computedStyleForAM] as unknown as ViewStyle,
-            styleForPM: [styles.timePickerWidth100, computedStyleForPM] as unknown as ViewStyle,
+            styleForAM: [styles.timePickerWidth100, computedStyleForAM],
+            styleForPM: [styles.timePickerWidth100, computedStyleForPM],
         };
     },
 

src/styles/utils/index.ts

@@ -1,12 +1,10 @@
-import type {ViewStyle} from 'react-native';
 import type OverflowAutoStyles from './types';
 
 /**
  * Web-only style.
  */
 const overflowAuto: OverflowAutoStyles = {
-    // NOTE: asserting "overflow" to a valid type, because it isn't possible to augment "overflow".
-    overflow: 'auto' as ViewStyle['overflow'],
+    overflow: 'auto',
 };
 
 export default overflowAuto;

src/styles/utils/overflowAuto/index.ts

@@ -15,8 +15,7 @@ export default {
      * Web-only style.
      */
     pFixed: {
-        // NOTE: asserting "position" to a valid type, because it isn't possible to augment "position".
-        position: 'fixed' as ViewStyle['position'],
+        position: 'fixed',
     },
 
     t0: {