Fix TS errors

Author: ethanshar

src/commons/asBaseComponent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropsWithoutRef} from 'react';
 import hoistStatics from 'hoist-non-react-statics';
 import * as Modifiers from './modifiers';
 import {Scheme, SchemeChangeListener, ThemeManager} from '../style';
@@ -23,7 +23,7 @@ const colorScheme = Scheme.getSchemeType();
 
 function asBaseComponent<PROPS, STATICS = {}, RefInterface = any>(WrappedComponent: React.ComponentType<any>,
   options: AsBaseComponentOptions = {}) {
-  class BaseComponent extends UIComponent<PROPS & ForwardRefInjectedProps<RefInterface>> {
+  class BaseComponent extends UIComponent<PropsWithoutRef<PROPS> & ForwardRefInjectedProps<RefInterface>> {
     static displayName: string | undefined;
     static propTypes: any;
     static defaultProps: any;

src/commons/forwardRef.tsx

@@ -1,4 +1,4 @@
-import React, {ComponentType, ForwardedRef} from 'react';
+import React, {ComponentType, ForwardedRef, PropsWithoutRef} from 'react';
 import hoistStatics from 'hoist-non-react-statics';
 
 export interface ForwardRefInjectedProps<T = any> {
@@ -8,8 +8,8 @@ export interface ForwardRefInjectedProps<T = any> {
   forwardedRef: ForwardedRef<T>;
 }
 
-export default function forwardRef<P, STATICS = {}, RefInterface = any>(WrappedComponent: ComponentType<P & ForwardRefInjectedProps<RefInterface>>) {
-  function forwardRef(props: P, ref: ForwardedRef<RefInterface>) {
+export default function forwardRef<P, STATICS = {}, RefInterface = any>(WrappedComponent: ComponentType<PropsWithoutRef<P> & ForwardRefInjectedProps<RefInterface>>) {
+  function forwardRef(props: PropsWithoutRef<P>, ref: ForwardedRef<RefInterface>) {
     return <WrappedComponent {...props} forwardedRef={ref}/>;
   }
 

src/commons/withScrollEnabler.tsx

@@ -73,6 +73,7 @@ function withScrollEnabler<PROPS, STATICS = {}>(WrappedComponent: React.Componen
   ScrollEnabler.propTypes = WrappedComponent.propTypes;
   //@ts-ignore
   ScrollEnabler.defaultProps = WrappedComponent.defaultProps;
+  // @ts-expect-error
   return forwardRef(ScrollEnabler) as any;
 }
 

src/commons/withScrollReached.tsx

@@ -96,6 +96,7 @@ function withScrollReached<PROPS, STATICS = {}>(WrappedComponent: React.Componen
   ScrollReachedDetector.propTypes = WrappedComponent.propTypes;
   //@ts-ignore
   ScrollReachedDetector.defaultProps = WrappedComponent.defaultProps;
+  // @ts-expect-error
   return forwardRef<PROPS & PropTypes>(ScrollReachedDetector) as any;
 }
 

src/components/actionSheet/index.tsx

@@ -255,7 +255,6 @@ class ActionSheet extends Component<ActionSheetProps> {
     }
 
     return (
-      // @ts-expect-error height might be null here
       <IncubatorDialog
         bottom
         centerH

src/components/button/index.tsx

@@ -420,6 +420,8 @@ const modifiersOptions = {
   typography: true,
   color: true
 };
+
+// @ts-expect-error class components don't work well with forwardRef HOC
 export default asBaseComponent<ButtonProps, ComponentStatics<typeof Button>, {}>(forwardRef(Button), {
   modifiersOptions
 });

src/components/card/index.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {PureComponent} from 'react';
-import {StyleSheet, Animated, StyleProp, ViewStyle} from 'react-native';
+import {StyleSheet, Animated, StyleProp, ViewStyle, type DimensionValue} from 'react-native';
 import {Colors, BorderRadiuses} from '../../style';
 // import {PureBaseComponent} from '../../commons';
 import {Constants, asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps, MarginModifiers} from '../../commons/new';
@@ -42,11 +42,11 @@ export type CardProps = ViewProps &
     /**
      * card custom width
      */
-    width?: number | string;
+    width?: DimensionValue;
     /**
      * card custom height
      */
-    height?: number | string;
+    height?: DimensionValue;
     /**
      * should inner card flow direction be horizontal
      */

src/components/dateTimePicker/index.tsx

@@ -8,7 +8,7 @@ import React, {
   forwardRef,
   ForwardedRef
 } from 'react';
-import {StyleProp, StyleSheet, ViewStyle} from 'react-native';
+import {DimensionValue, StyleProp, StyleSheet, ViewStyle} from 'react-native';
 import {DateTimePickerPackage as RNDateTimePicker} from '../../optionalDependencies';
 import {useDidUpdate} from '../../hooks';
 import {Colors} from '../../style';
@@ -170,7 +170,7 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
 
   const _dialogProps = useMemo(() => {
     return {
-      width: '100%',
+      width: '100%' as DimensionValue,
       height: null,
       bottom: true,
       centerH: true,

src/components/dialog/index.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {StyleSheet, StyleProp, ViewStyle, ModalPropsIOS, AccessibilityProps} from 'react-native';
+import {StyleSheet, StyleProp, ViewStyle, ModalPropsIOS, AccessibilityProps, type DimensionValue} from 'react-native';
 import {Colors} from '../../style';
 import {AlignmentModifiers, extractAlignmentsValues} from '../../commons/modifiers';
 import {Constants, asBaseComponent} from '../../commons/new';
@@ -42,11 +42,11 @@ export interface DialogProps extends AlignmentModifiers, RNPartialProps {
   /**
    * The dialog width (default: 90%)
    */
-  width?: string | number;
+  width?: DimensionValue;
   /**
    * The dialog height (default: undefined)
    */
-  height?: string | number | null;
+  height?: DimensionValue | null;
   /**
    * The direction of the allowed pan (default is DOWN).
    * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###).

src/components/fader/index.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {useMemo} from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, StyleProp, ImageStyle} from 'react-native';
 import View from '../view';
 import Image, {ImageProps} from '../image';
 import {Colors} from 'style';
@@ -47,7 +47,7 @@ function Fader(props: FaderProps) {
   } = props;
 
   const styles = useMemo(() => {
-    let containerStyle, imageStyle, imageSource;
+    let containerStyle, imageStyle: StyleProp<ImageStyle>, imageSource;
     switch (position) {
       case FaderPosition.START:
         containerStyle = {...staticStyles.containerLeft, width: size};

src/components/gridListItem/index.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {StyleProp, StyleSheet, ViewStyle} from 'react-native';
+import {type DimensionValue, StyleProp, StyleSheet, ViewStyle} from 'react-native';
 import memoize from 'memoize-one';
 import * as Modifiers from '../../commons/modifiers';
 import {Spacings} from 'style';
@@ -274,6 +274,6 @@ const styles = StyleSheet.create({
 export default GridListItem;
 
 interface ImageSize {
-  width?: number | string;
-  height?: number | string;
+  width?: DimensionValue;
+  height?: DimensionValue;
 }

src/components/picker/index.tsx

@@ -3,7 +3,7 @@
 // TODO: consider deprecating renderCustomModal prop
 import _ from 'lodash';
 import React, {useMemo, useState, useRef, useCallback, useEffect} from 'react';
-import {LayoutChangeEvent} from 'react-native';
+import {DimensionValue, LayoutChangeEvent} from 'react-native';
 import {useThemeProps} from 'hooks';
 import {Constants} from '../../commons/new';
 import ExpandableOverlay, {ExpandableOverlayProps, ExpandableOverlayMethods} from '../../incubator/expandableOverlay';
@@ -33,7 +33,7 @@ import {
 
 const DIALOG_PROPS = {
   bottom: true,
-  width: '100%',
+  width: '100%' as DimensionValue,
   height: 250
 };
 

src/components/slider/Thumb.tsx

@@ -126,6 +126,7 @@ const Thumb = forwardRef((props: ThumbProps, ref: any) => {
 
   return (
     <Animated.View
+    // @ts-expect-error
       ref={thumbRef}
       {...others}
       hitSlop={thumbHitSlop}

src/components/slider/index.tsx

@@ -45,9 +45,9 @@ type Measurements = {
   height: number;
 };
 
-type ThumbStyle = {style?: StyleProp<ViewStyle>; left?: StyleProp<number>};
+type ThumbStyle = {style?: StyleProp<ViewStyle>; left?: number};
 
-type MinTrackStyle = {style?: StyleProp<ViewStyle>; width?: StyleProp<number>; left?: StyleProp<number>};
+type MinTrackStyle = {style?: StyleProp<ViewStyle>; width?: number; left?: number};
 
 type MeasuredVariableName = 'containerSize' | 'trackSize' | 'thumbSize';
 

src/components/text/index.tsx

@@ -225,4 +225,6 @@ const modifiersOptions = {
   backgroundColor: true,
   flex: true
 };
+
+// @ts-expect-error class components don't work well with forwardRef HOC
 export default asBaseComponent<TextProps>(forwardRef<PropsTypes>(Text), {modifiersOptions});

src/components/view/index.tsx

@@ -1,6 +1,6 @@
 import {useModifiers, useThemeProps} from 'hooks';
 import React, {useEffect, useMemo, useState} from 'react';
-import {View as RNView, SafeAreaView, Animated, ViewProps as RNViewProps, StyleProp, ViewStyle} from 'react-native';
+import {View as RNView, SafeAreaView, Animated, ViewProps as RNViewProps, type StyleProp, type ViewStyle, type DimensionValue} from 'react-native';
 import type {AnimateProps as RNReanimatedProps} from 'react-native-reanimated';
 import {Constants, ContainerModifiers} from '../../commons/new';
 import type {RecorderProps} from '../../typings/recorderTypes';
@@ -30,11 +30,11 @@ export interface ViewProps extends Omit<RNViewProps, 'style'>, ReanimatedProps,
   /**
    * TODO: probably isn't needed
    */
-  width?: string | number;
+  width?: DimensionValue;
   /**
    * TODO: probably isn't needed
    */
-  height?: string | number;
+  height?: DimensionValue;
   /**
    * Experimental: Pass time in ms to delay render
    */

src/hooks/useCombinedRefs/index.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const useCombinedRefs = (...refs: React.Ref<any>[]) => {
+const useCombinedRefs = <T>(...refs: React.Ref<any>[]) => {
   const targetRef = React.useRef();
 
   React.useEffect(() => {
@@ -17,7 +17,7 @@ const useCombinedRefs = (...refs: React.Ref<any>[]) => {
     });
   }, [refs]);
 
-  return targetRef;
+  return targetRef as T;
 };
 
 export default useCombinedRefs;

src/incubator/Dialog/types.ts

@@ -1,5 +1,5 @@
 import {PropsWithChildren, ReactElement} from 'react';
-import {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {type DimensionValue, type StyleProp, type TextStyle, type ViewStyle} from 'react-native';
 import {AlignmentModifiers} from '../../commons/modifiers';
 import {DialogProps as DialogPropsOld} from '../../components/dialog';
 import {ButtonProps} from '../../components/button';
@@ -101,11 +101,11 @@ export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSa
   /**
    * The dialog width.
    */
-  width?: string | number;
+  width?: DimensionValue;
   /**
    * The dialog height.
    */
-  height?: string | number;
+  height?: DimensionValue;
 
   /**
    * Callback that is called after the dialog's dismiss (after the animation has ended).

src/incubator/expandableOverlay/index.tsx

@@ -106,7 +106,6 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
   const renderDialog = () => {
     const Dialog = migrateDialog ? DialogNew : DialogOld;
     return (
-      // @ts-expect-error
       <Dialog testID={`${testID}.overlay`} {...dialogProps} visible={visible} onDismiss={closeExpandable}>
         {expandableContent}
       </Dialog>