Ignoring invalid text style warnings

src/styles/StyleUtils.js

@@ -181,12 +181,10 @@ function getNavigationDrawerType(isSmallScreenWidth) {
  */
 function getZoomCursorStyle(isZoomed, isDragging) {
     if (!isZoomed) {
-        return {cursor: 'zoom-in'};
+        return styles.cursorZoomIn;
     }
 
-    return {
-        cursor: isDragging ? 'grabbing' : 'zoom-out',
-    };
+    return isDragging ? styles.cursorGrabbing : styles.cursorZoomOut;
 }
 
 /**
@@ -544,7 +542,7 @@ function getReportActionItemStyle(isHovered = false, isLoading = false) {
             // Warning: Setting this to a non-transparent color will cause unread indicator to break on Android
             : colors.transparent,
         opacity: isLoading ? 0.5 : 1,
-        cursor: 'initial',
+        ...styles.cursorInitial,
     };
 }
 

src/styles/styles.js

@@ -20,6 +20,8 @@ import pointerEventsNone from './pointerEventsNone';
 import pointerEventsAuto from './pointerEventsAuto';
 import overflowXHidden from './overflowXHidden';
 import CONST from '../CONST';
+import cursor from './utilities/cursor';
+import userSelect from './utilities/userSelect';
 
 const picker = {
     backgroundColor: themeColors.transparent,
@@ -157,6 +159,8 @@ const styles = {
     ...wordBreak,
     ...whiteSpace,
     ...writingDirection,
+    ...cursor,
+    ...userSelect,
     ...themeColors,
 
     rateCol: {
@@ -628,8 +632,8 @@ const styles = {
             appearance: 'none',
             height: 26,
             opacity: 1,
-            cursor: 'pointer',
             backgroundColor,
+            ...cursor.cursorPointer,
         },
         inputAndroid: {
             fontFamily: fontFamily.EXP_NEUE,
@@ -941,7 +945,7 @@ const styles = {
 
         inputWeb: {
             appearance: 'none',
-            cursor: disabled ? 'not-allowed' : 'pointer',
+            ...(disabled ? cursor.cursorDisabled : cursor.cursorPointer),
             ...picker,
             backgroundColor,
         },
@@ -1342,8 +1346,7 @@ const styles = {
         // Starting version 6.3.2 @react-navigation/drawer adds "user-select: none;" to its container.
         // We add user-select-auto to the inner component to prevent incorrect triple-click text selection.
         // For further explanation see - https://github.com/Expensify/App/pull/12730/files#r1022883823
-        userSelect: 'text',
-        WebkitUserSelect: 'text',
+        ...userSelect.userSelectText,
     },
 
     appContentHeader: {
@@ -1438,7 +1441,7 @@ const styles = {
         fontFamily: fontFamily.EXP_NEUE,
         lineHeight: variables.lineHeightXLarge,
         maxWidth: '100%',
-        cursor: 'auto',
+        ...cursor.cursorAuto,
         ...whiteSpace.preWrap,
         ...wordBreak.breakWord,
     },
@@ -1661,8 +1664,7 @@ const styles = {
     },
 
     navigationModalOverlay: {
-        userSelect: 'none',
-        WebkitUserSelect: 'none',
+        ...userSelect.userSelectNone,
         position: 'absolute',
         width: '100%',
         height: '100%',
@@ -2177,7 +2179,7 @@ const styles = {
         flexDirection: 'row',
         alignItems: 'center',
         zIndex: 1,
-        cursor: 'default',
+        ...cursor.cursorDefault,
     },
 
     unreadIndicatorLine: {
@@ -2233,9 +2235,9 @@ const styles = {
     attachmentModalArrowsContainer: {
         display: 'flex',
         justifyContent: 'center',
-        cursor: 'unset',
         height: '100%',
         width: '100%',
+        ...cursor.cursorUnset,
     },
 
     leftAttachmentArrow: {
@@ -2499,23 +2501,11 @@ const styles = {
         marginVertical: 4,
     },
 
-    cursorDefault: {
-        cursor: 'default',
-    },
-
-    cursorDisabled: {
-        cursor: 'not-allowed',
-    },
-
     noSelect: {
         boxShadow: 'none',
         outline: 'none',
     },
 
-    cursorPointer: {
-        cursor: 'pointer',
-    },
-
     fullscreenCard: {
         position: 'absolute',
         left: 0,
@@ -2876,7 +2866,7 @@ const styles = {
         alignItems: 'center',
         justifyContent: 'center',
         backgroundColor: themeColors.imageCropBackgroundColor,
-        cursor: 'move',
+        ...cursor.cursorMove,
     },
 
     sliderKnobTooltipView: {
@@ -2892,7 +2882,7 @@ const styles = {
         width: variables.sliderKnobSize,
         borderRadius: variables.sliderKnobSize / 2,
         left: -(variables.sliderKnobSize / 2),
-        cursor: 'pointer',
+        ...cursor.cursorPointer,
     },
 
     sliderBar: {
@@ -2903,16 +2893,6 @@ const styles = {
         justifyContent: 'center',
     },
 
-    userSelectText: {
-        userSelect: 'text',
-        WebkitUserSelect: 'text',
-    },
-
-    userSelectNone: {
-        userSelect: 'none',
-        WebkitUserSelect: 'none',
-    },
-
     screenCenteredContainer: {
         flex: 1,
         justifyContent: 'center',

src/styles/utilities/cursor/index.js

@@ -0,0 +1,32 @@
+export default {
+    cursorDefault: {
+        cursor: 'default',
+    },
+    cursorDisabled: {
+        cursor: 'not-allowed',
+    },
+    cursorPointer: {
+        cursor: 'pointer',
+    },
+    cursorMove: {
+        cursor: 'move',
+    },
+    cursorUnset: {
+        cursor: 'unset',
+    },
+    cursorAuto: {
+        cursor: 'auto',
+    },
+    cursorZoomIn: {
+        cursor: 'zoom-in',
+    },
+    cursorGrabbing: {
+        cursor: 'grabbing',
+    },
+    cursorZoomOut: {
+        cursor: 'zoom-out',
+    },
+    cursorInitial: {
+        cursor: 'initial',
+    },
+};

src/styles/utilities/cursor/index.native.js

@@ -0,0 +1,12 @@
+export default {
+    cursorDefault: {},
+    cursorDisabled: {},
+    cursorPointer: {},
+    cursorMove: {},
+    cursorUnset: {},
+    cursorAuto: {},
+    cursorZoomIn: {},
+    cursorGrabbing: {},
+    cursorZoomOut: {},
+    cursorInitial: {},
+};

src/styles/utilities/userSelect/index.js

@@ -0,0 +1,10 @@
+export default {
+    userSelectText: {
+        userSelect: 'text',
+        WebkitUserSelect: 'text',
+    },
+    userSelectNone: {
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+    },
+};

src/styles/utilities/userSelect/index.native.js

@@ -0,0 +1,8 @@
+export default {
+    userSelectText: {
+        userSelect: 'text',
+    },
+    userSelectNone: {
+        userSelect: 'none',
+    },
+};