Fix (most) typescript issue

package.json

@@ -41,7 +41,7 @@
     "@react-native/typescript-config": "0.78.3",
     "@shopify/flash-list": "1.7.6",
     "@testing-library/react-native": "^11.5.1",
-    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/hoist-non-react-statics": "^3.3.7",
     "@types/jest": "^29.5.13",
     "@types/lodash": "^4.0.0",
     "@types/react": "19.0.0",

packages/react-native-ui-lib/package.json

@@ -65,7 +65,7 @@
         "@react-native/typescript-config": "0.78.3",
         "@shopify/flash-list": "1.7.6",
         "@testing-library/react-native": "^11.5.1",
-        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/hoist-non-react-statics": "^3.3.7",
         "@types/jest": "^29.5.13",
         "@types/lodash": "^4.0.0",
         "@types/react": "19.0.0",

packages/react-native-ui-lib/src/components/featureHighlight/index.tsx

@@ -327,7 +327,6 @@ class FeatureHighlight extends Component<FeatureHighlightProps, State> {
               titleStyle
             ]}
             numberOfLines={titleNumberOfLines}
-            // @ts-expect-error
             pointerEvents={'none'}
           >
             {title}
@@ -338,7 +337,6 @@ class FeatureHighlight extends Component<FeatureHighlightProps, State> {
             text70
             style={[styles.message, {color}, messageStyle]}
             numberOfLines={messageNumberOfLines}
-            // @ts-expect-error
             pointerEvents={'none'}
           >
             {message}

packages/react-native-ui-lib/src/components/hint/HintMockChildren.tsx

@@ -25,7 +25,7 @@ export default function HintMockChildren({children, backdropColor, targetLayout}
         {React.cloneElement<any>(children, {
           collapsable: false,
           key: 'mock',
-          style: [children.props.style, styles.mockChildren]
+          style: [(children.props as any).style, styles.mockChildren]
         })}
       </View>
     );

packages/react-native-ui-lib/src/components/hint/HintOld.tsx

@@ -593,7 +593,7 @@ class Hint extends Component<HintProps, HintState> {
           {React.cloneElement<any>(children, {
             collapsable: false,
             key: 'mock',
-            style: [children.props.style, styles.mockChildren]
+            style: [(children.props as any).style, styles.mockChildren]
           })}
         </View>
       );

packages/react-native-ui-lib/src/components/image/index.tsx

@@ -245,17 +245,21 @@ class Image extends PureComponent<Props, State> {
     const {margins} = modifiers;
 
     return (
-      // @ts-ignore
       <ImageView
+        // @ts-expect-error TODO: this error emanates from the fact that
+        // RNImage does not support `resizeMode` inside styles.containImage
+        // I think this is too complex for TS to handle as using inline style
+        // solves it. It is probably possible to refactor and solve it, but
+        // I feel it is not worth the risk ATM.
         style={[
           tintColor && {tintColor},
           shouldFlipRTL && styles.rtlFlipped,
-          width && {width},
-          height && {height},
-          borderRadius && {borderRadius},
+          width ? {width} : undefined,
+          height ? {height} : undefined,
+          borderRadius ? {borderRadius} : undefined,
           cover && styles.coverImage,
           this.isGif() && styles.gifImage,
-          aspectRatio && {aspectRatio},
+          aspectRatio ? {aspectRatio} : undefined,
           !useImageInsideContainer && margins,
           useImageInsideContainer && styles.containImage,
           style,

packages/react-native-ui-lib/src/components/scrollBar/index.tsx

@@ -3,6 +3,7 @@ import React, {Component, useCallback} from 'react';
 import {
   Animated,
   FlatListProps,
+  ScrollViewProps,
   ImageSourcePropType,
   NativeSyntheticEvent,
   NativeScrollEvent,
@@ -16,11 +17,21 @@ import View from '../view';
 import Image from '../image';
 import Assets from '../../assets';
 
-export interface ScrollBarProps extends FlatListProps<any> {
-  /**
-   * Whether to use a FlatList. NOTE: you must pass 'data' and 'renderItem' props as well
-   */
-  useList?: boolean;
+export type ListProps =
+  | (FlatListProps<any> & {
+      /**
+       * Whether to use a FlatList. NOTE: you must pass 'data' and 'renderItem' props as well
+       */
+      useList: true;
+    })
+  | (ScrollViewProps & {
+      /**
+       * Whether to use a ScrollView. NOTE: you must pass 'contentContainerStyle' prop as well
+       */
+      useList?: false;
+    });
+
+export type ScrollBarProps = ListProps & {
   /**
    * The element to use as a container, instead of a View
    */
@@ -58,7 +69,7 @@ export interface ScrollBarProps extends FlatListProps<any> {
    * The index to currently focus on
    */
   focusIndex?: number;
-}
+};
 
 type Props = ScrollBarProps & ForwardRefInjectedProps;
 

packages/react-native-ui-lib/src/components/view/index.tsx

@@ -116,7 +116,7 @@ function View(props: ViewProps, ref: any) {
     }
 
     return container;
-  }, [useSafeArea, animated, reanimated]);
+  }, [useSafeArea, animated, reanimated]) as React.ComponentType<any>;
 
   const _style = useMemo(() => {
     const backgroundColor = backgroundColorProps || backgroundColorModifiers;
@@ -155,7 +155,6 @@ function View(props: ViewProps, ref: any) {
   }
 
   return (
-    //@ts-expect-error
     <ViewContainer
       accessibilityElementsHidden={inaccessible}
       importantForAccessibility={inaccessible ? 'no-hide-descendants' : undefined}

packages/react-native-ui-lib/src/hooks/useCombinedRefs/index.ts

@@ -11,7 +11,6 @@ const useCombinedRefs = <T>(...refs: React.Ref<any>[]) => {
       if (typeof ref === 'function') {
         ref(targetRef.current);
       } else {
-        // @ts-expect-error
         ref.current = targetRef.current;
       }
     });

packages/react-native-ui-lib/src/typings/module.d.ts

@@ -3,11 +3,20 @@ declare namespace globalThis {
   var _UILIB_TESTING: boolean;
 }
 
+declare global {
+  // eslint-disable-next-line no-var
+  var _UILIB_TESTING: boolean;
+}
+
 // This support importing png files, typing wise
 declare module '*.png';
 
-declare namespace JSX {
-  interface IntrinsicAttributes {
-    fsTagName?: string;
+import 'react';
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicAttributes {
+      fsTagName?: string;
+    }
   }
 }

yarn.lock

@@ -2929,13 +2929,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/hoist-non-react-statics@npm:^3.3.1":
-  version: 3.3.5
-  resolution: "@types/hoist-non-react-statics@npm:3.3.5"
+"@types/hoist-non-react-statics@npm:^3.3.7":
+  version: 3.3.7
+  resolution: "@types/hoist-non-react-statics@npm:3.3.7"
   dependencies:
-    "@types/react": "npm:*"
     hoist-non-react-statics: "npm:^3.3.0"
-  checksum: 10c0/2a3b64bf3d9817d7830afa60ee314493c475fb09570a64e7737084cd482d2177ebdddf888ce837350bac51741278b077683facc9541f052d4bbe8487b4e3e618
+  peerDependencies:
+    "@types/react": "*"
+  checksum: 10c0/ed8f4e88338f7d021d0f956adf6089d2a12b2e254a03c05292324f2e986d2376eb9efdb8a4f04596823e8fca88c9d06361d20dab4a2a00dc935fb36ac911de55
   languageName: node
   linkType: hard
 
@@ -9560,7 +9561,7 @@ __metadata:
     "@react-native/typescript-config": "npm:0.78.3"
     "@shopify/flash-list": "npm:1.7.6"
     "@testing-library/react-native": "npm:^11.5.1"
-    "@types/hoist-non-react-statics": "npm:^3.3.1"
+    "@types/hoist-non-react-statics": "npm:^3.3.7"
     "@types/jest": "npm:^29.5.13"
     "@types/lodash": "npm:^4.0.0"
     "@types/react": "npm:19.0.0"
@@ -9610,7 +9611,7 @@ __metadata:
     "@react-native/typescript-config": "npm:0.78.3"
     "@shopify/flash-list": "npm:1.7.6"
     "@testing-library/react-native": "npm:^11.5.1"
-    "@types/hoist-non-react-statics": "npm:^3.3.1"
+    "@types/hoist-non-react-statics": "npm:^3.3.7"
     "@types/jest": "npm:^29.5.13"
     "@types/lodash": "npm:^4.0.0"
     "@types/react": "npm:19.0.0"