Ref Typings (#2885)

* Changed forwardRef typings

* Removed test component

* Added typings to forwardRef to support ref typing interface

* Added typings to forwardRef and asBaseComponents

* Changed static to object by default. "Fixed" static properties typings

* Changed injected ref typing

* Fixed button typing errors

* Moved ButtonStatis to types file

* Added component statics extraction type

* Added usage of components statics extraction type

* Added component statics usage to scroll bar

* Fixed Slider interface typings and screen

* Fixed TextField ref typings

* Added fadedScrollView ref interface

* Fixed icon statics typings

* Fixed gradient slider statics

* Fixed FadedScrollView ref typing in tabController

* Last TS fixes

* Fixed lint errors

* Removed empty ref interfaces

* TS fix

* Fixed imports and formatting

---------

Co-authored-by: Ethan Sharabi <[email protected]>

Author: nitzanyiz

demo/src/screens/componentScreens/SliderScreen.tsx

@@ -264,7 +264,6 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
             color={color}
             containerStyle={styles.gradientSliderContainer}
             onValueChange={this.onGradientValueChange}
-            // @ts-expect-error
             ref={this.gradientSlider}
           />
           <View style={styles.box}>

demo/src/screens/componentScreens/TextFieldScreen.tsx

@@ -59,9 +59,7 @@ export default class TextFieldScreen extends Component {
           <Text h3 marginV-s4>
             Default
           </Text>
-          {/* @ts-expect-error */}
           <TextField ref={this.input} label="Name" placeholder="Enter full name"/>
-
           <Text h3 marginV-s4>
             Static vs Floating Placeholder
           </Text>
@@ -89,7 +87,6 @@ export default class TextFieldScreen extends Component {
           </Text>
 
           <TextField
-            // @ts-expect-error
             ref={this.input2}
             placeholder="Enter search term"
             text70
@@ -99,7 +96,6 @@ export default class TextFieldScreen extends Component {
           />
 
           <TextField
-            // @ts-expect-error
             ref={this.input2}
             placeholder="Enter URL"
             floatingPlaceholder
@@ -114,7 +110,6 @@ export default class TextFieldScreen extends Component {
           />
 
           <TextField
-            // @ts-expect-error
             ref={this.input2}
             placeholder="Enter weight"
             text70
@@ -166,7 +161,6 @@ export default class TextFieldScreen extends Component {
 
           <View row top marginT-s4>
             <TextField
-              // @ts-expect-error
               ref={this.inputWithValidation}
               placeholder="Enter full name"
               validate="required"

demo/src/screens/componentScreens/TextScreen.tsx

@@ -124,7 +124,6 @@ class TextScreen extends Component {
             <Text
               text70
               animated
-              // @ts-expect-error
               style={{transform: [{scale: this.animatedValue.interpolate({inputRange: [0, 1], outputRange: [1, 2]})}]}}
               onPress={this.animate}
             >

demo/src/screens/incubatorScreens/IncubatorSliderScreen.tsx

@@ -23,10 +23,10 @@ const IncubatorSliderScreen = () => {
   const [color, setColor] = useState(COLOR);
   const [alpha, setAlpha] = useState(1);
 
-  const slider = useRef<typeof Incubator.Slider>();
-  const customSlider = useRef<typeof Incubator.Slider>();
-  const negativeSlider = useRef<typeof Incubator.Slider>();
-  const rangeSlider = useRef<typeof Incubator.Slider>();
+  const slider = useRef<Incubator.SliderRef>(null);
+  const customSlider = useRef<Incubator.SliderRef>(null);
+  const negativeSlider = useRef<Incubator.SliderRef>(null);
+  const rangeSlider = useRef<Incubator.SliderRef>(null);
 
   const resetSliders = useCallback(() => {
     slider.current?.reset();
@@ -92,7 +92,6 @@ const IncubatorSliderScreen = () => {
         </Text>
         {renderValuesBox(sliderValue)}
         <Incubator.Slider
-          // @ts-expect-error TODO: need to properly support SliderMethods type to use for ref
           ref={slider}
           onValueChange={onValueChange}
           containerStyle={styles.container}
@@ -124,7 +123,6 @@ const IncubatorSliderScreen = () => {
         </Text>
         {renderValuesBox(customSliderValue)}
         <Incubator.Slider
-          // @ts-expect-error
           ref={customSlider}
           onValueChange={onCustomValueChange}
           value={20}
@@ -152,7 +150,6 @@ const IncubatorSliderScreen = () => {
         </Text>
         {renderValuesBox(negativeSliderValue)}
         <Incubator.Slider
-          // @ts-expect-error
           ref={negativeSlider}
           onValueChange={onNegativeValueChange}
           value={-30}
@@ -175,7 +172,6 @@ const IncubatorSliderScreen = () => {
         <View marginH-20>
           {renderValuesBox(sliderMinValue, sliderMaxValue)}
           <Incubator.Slider
-            // @ts-expect-error
             ref={rangeSlider}
             useRange
             onRangeChange={onRangeChange}

src/commons/asBaseComponent.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import hoistStatics from 'hoist-non-react-statics';
 import * as Modifiers from './modifiers';
 import {Scheme, SchemeChangeListener, ThemeManager} from '../style';
-import forwardRef from './forwardRef';
+import forwardRef, {ForwardRefInjectedProps} from './forwardRef';
 import UIComponent from './UIComponent';
 
 export interface BaseComponentInjectedProps {
@@ -21,9 +21,9 @@ export interface AsBaseComponentOptions {
 const EMPTY_MODIFIERS = {};
 const colorScheme = Scheme.getSchemeType();
 
-function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentType<any>,
-  options: AsBaseComponentOptions = {}): React.ComponentClass<PROPS> & STATICS {
-  class BaseComponent extends UIComponent {
+function asBaseComponent<PROPS, STATICS = {}, RefInterface = any>(WrappedComponent: React.ComponentType<any>,
+  options: AsBaseComponentOptions = {}) {
+  class BaseComponent extends UIComponent<PROPS & ForwardRefInjectedProps<RefInterface>> {
     static displayName: string | undefined;
     static propTypes: any;
     static defaultProps: any;
@@ -85,8 +85,7 @@ function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentT
   if (ThemeContext) {
     BaseComponent.contextType = ThemeContext;
   }
-
-  return forwardRef(BaseComponent) as any;
+  return forwardRef<PROPS, STATICS, RefInterface>(BaseComponent);
 }
 
 export default asBaseComponent;

src/commons/forwardRef.tsx

@@ -1,26 +1,27 @@
-import React from 'react';
+import React, {ComponentType, ForwardedRef} from 'react';
 import hoistStatics from 'hoist-non-react-statics';
 
-export interface ForwardRefInjectedProps {
+export interface ForwardRefInjectedProps<T = any> {
   /**
    * The forwarded ref of the containing element
    */
-  forwardedRef: any;
+  forwardedRef: ForwardedRef<T>;
 }
 
-export default function forwardRef<P = any, STATICS = {}>(WrappedComponent: React.ComponentType<P>): React.ComponentType<P> & STATICS {
-  function forwardRef(props: P, ref: any) {
+export default function forwardRef<P, STATICS = {}, RefInterface = any>(WrappedComponent: ComponentType<P & ForwardRefInjectedProps<RefInterface>>) {
+  function forwardRef(props: P, ref: ForwardedRef<RefInterface>) {
     return <WrappedComponent {...props} forwardedRef={ref}/>;
   }
 
-  const ForwardedComponent = React.forwardRef(forwardRef);
+  const ForwardedComponent = React.forwardRef<RefInterface, P>(forwardRef);
 
   hoistStatics(ForwardedComponent, WrappedComponent);
+  //@ts-ignore
   ForwardedComponent.displayName = WrappedComponent.displayName;
   //@ts-ignore
   ForwardedComponent.propTypes = WrappedComponent.propTypes;
   //@ts-ignore
   ForwardedComponent.defaultProps = WrappedComponent.defaultProps;
 
-  return ForwardedComponent as any;
+  return ForwardedComponent as typeof ForwardedComponent & STATICS;
 }

src/components/button/index.tsx

@@ -4,7 +4,7 @@ import {Platform, StyleSheet, LayoutAnimation, LayoutChangeEvent, ImageStyle, Te
 import {asBaseComponent, forwardRef, Constants} from '../../commons/new';
 import {Colors, Typography, BorderRadiuses} from 'style';
 import TouchableOpacity from '../touchableOpacity';
-import type {Dictionary} from '../../typings/common';
+import type {Dictionary, ComponentStatics} from '../../typings/common';
 import Text from '../text';
 import Image from '../image';
 import Icon from '../icon';
@@ -21,7 +21,6 @@ import {PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE} from './ButtonCo
 
 export {ButtonSize, ButtonAnimationDirection, ButtonProps};
 
-
 class Button extends PureComponent<Props, ButtonState> {
   static displayName = 'Button';
 
@@ -429,5 +428,6 @@ const modifiersOptions = {
   typography: true,
   color: true
 };
-
-export default asBaseComponent<ButtonProps, typeof Button>(forwardRef<Props>(Button), {modifiersOptions});
+export default asBaseComponent<ButtonProps, ComponentStatics<typeof Button>, {}>(forwardRef(Button), {
+  modifiersOptions
+});

src/components/fadedScrollView/index.tsx

@@ -6,11 +6,12 @@ import {
   NativeScrollEvent,
   LayoutChangeEvent
 } from 'react-native';
+import {ScrollView as GestureScrollView} from 'react-native-gesture-handler';
 import Fader, {FaderProps} from '../fader';
 import useScrollEnabler from '../../hooks/useScrollEnabler';
 import useScrollReached from '../../hooks/useScrollReached';
 import {forwardRef, ForwardRefInjectedProps} from '../../commons/new';
-import {ScrollView as GestureScrollView} from 'react-native-gesture-handler';
+import {ComponentStatics} from '../../typings/common';
 
 export type FadedScrollViewProps = ScrollViewProps & {
   /**
@@ -37,7 +38,7 @@ export type FadedScrollViewProps = ScrollViewProps & {
 };
 
 type Props = FadedScrollViewProps & ForwardRefInjectedProps;
-interface Statics {
+export interface FadedScrollViewRef {
   scrollTo(
     y?: number | {x?: number | undefined; y?: number | undefined; animated?: boolean | undefined},
     x?: number,
@@ -139,5 +140,4 @@ const FadedScrollView = (props: Props) => {
 };
 
 FadedScrollView.displayName = 'IGNORE';
-// @ts-expect-error
-export default forwardRef<FadedScrollViewProps, Statics>(FadedScrollView);
+export default forwardRef<FadedScrollViewProps, ComponentStatics<FadedScrollViewProps>, FadedScrollViewRef>(FadedScrollView);

src/components/icon/index.tsx

@@ -2,6 +2,7 @@ import isUndefined from 'lodash/isUndefined';
 import React, {useMemo, forwardRef} from 'react';
 import {Image, ImageProps, StyleSheet} from 'react-native';
 import {asBaseComponent, BaseComponentInjectedProps, MarginModifiers, Constants} from '../../commons/new';
+import {ComponentStatics} from '../../typings/common';
 import {getAsset, isSvg, isBase64ImageContent} from '../../utils/imageUtils';
 import {RecorderProps} from '../../typings/recorderTypes';
 import SvgImage from '../svgImage';
@@ -89,7 +90,8 @@ Icon.displayName = 'Icon';
 Icon.defaultProps = {
   assetGroup: 'icons'
 };
-export default asBaseComponent<IconProps, typeof Icon>(Icon, {modifiersOptions: {margins: true}});
+
+export default asBaseComponent<IconProps, ComponentStatics<typeof Icon>>(Icon, {modifiersOptions: {margins: true}});
 
 const styles = StyleSheet.create({
   rtlFlipped: {

src/components/pageControl/index.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {PureComponent} from 'react';
 import {StyleSheet, LayoutAnimation, StyleProp, ViewStyle} from 'react-native';
-import {asBaseComponent, forwardRef} from '../../commons/new';
+import {asBaseComponent} from '../../commons/new';
 import {Colors} from '../../style';
 import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
 import View from '../view';
@@ -239,7 +239,8 @@ class PageControl extends PureComponent<PageControlProps, State> {
   }
 }
 
-export default asBaseComponent<PageControlProps>(forwardRef(PageControl));
+// @ts-expect-error
+export default asBaseComponent<PageControlProps>(PageControl);
 
 const styles = StyleSheet.create({
   container: {

src/components/scrollBar/index.tsx

@@ -11,6 +11,7 @@ import {
 import {ScrollView, FlatList} from 'react-native-gesture-handler';
 import {Colors} from '../../style';
 import {Constants, asBaseComponent, forwardRef, ForwardRefInjectedProps} from '../../commons/new';
+import {ComponentStatics} from '../../typings/common';
 import View from '../view';
 import Image from '../image';
 
@@ -276,4 +277,4 @@ const Item = ({children, index, onLayout}: any) => {
 
 Item.displayName = 'IGNORE';
 ScrollBar.Item = Item;
-export default asBaseComponent<ScrollBarProps, typeof ScrollBar>(forwardRef(ScrollBar));
+export default asBaseComponent<ScrollBarProps, ComponentStatics<typeof ScrollBar>>(forwardRef(ScrollBar));

src/components/slider/GradientSlider.tsx

@@ -4,6 +4,7 @@ import React, {useCallback, useEffect, useState} from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 import {Colors} from '../../style';
 import {asBaseComponent, forwardRef, ForwardRefInjectedProps} from '../../commons/new';
+import {ComponentStatics} from '../../typings/common';
 import Slider, {SliderProps} from './index';
 import {Slider as NewSlider} from '../../incubator';
 import {SliderContextProps} from './context/SliderContext';
@@ -192,7 +193,6 @@ const GradientSlider = (props: Props) => {
   return (
     <SliderComponent
       {...others}
-      //@ts-expect-error
       ref={forwardedRef}
       onReset={reset}
       renderTrack={renderTrack}
@@ -213,4 +213,5 @@ GradientSlider.displayName = 'GradientSlider';
 GradientSlider.types = GradientSliderTypes;
 
 // eslint-disable-next-line max-len
-export default asBaseComponent<GradientSliderProps, typeof GradientSlider>(forwardRef(asSliderGroupChild(forwardRef(GradientSlider))));
+// @ts-expect-error
+export default asBaseComponent<GradientSliderProps, ComponentStatics<typeof GradientSlider>>(forwardRef(asSliderGroupChild(forwardRef(GradientSlider))));

src/components/tabController/TabBar.tsx

@@ -13,7 +13,7 @@ import {
 } from '../../commons/new';
 import View from '../view';
 import {Colors, Spacings, Typography} from '../../style';
-import FadedScrollView from '../fadedScrollView';
+import FadedScrollView, {FadedScrollViewRef} from '../fadedScrollView';
 import {FaderProps} from '../fader';
 import useScrollToItem from './useScrollToItem';
 import {useDidUpdate} from 'hooks';
@@ -161,7 +161,7 @@ const TabBar = (props: Props) => {
     testID
   } = props;
 
-  const tabBar = useRef<typeof FadedScrollView>();
+  const tabBar = useRef<FadedScrollViewRef>(null);
   const [key, setKey] = useState<string>(generateKey(Constants.orientation, labelColor, selectedLabelColor));
   const context = useContext(TabBarContext);
   const {items: contextItems, currentPage, targetPage, containerWidth: contextContainerWidth} = context;
@@ -295,7 +295,6 @@ const TabBar = (props: Props) => {
   return (
     <View style={_containerStyle} key={key} bg-$backgroundElevated>
       <FadedScrollView
-        // @ts-expect-error
         ref={tabBar}
         horizontal
         showsHorizontalScrollIndicator={false}

src/components/text/index.tsx

@@ -47,7 +47,7 @@ export interface HighlightStringProps {
 
 export type HighlightString = string | HighlightStringProps;
 
-export type TextProps = RNTextProps &
+export type TextProps = Omit<RNTextProps, 'style'> &
   TypographyModifiers &
   ColorsModifiers &
   MarginModifiers &

src/components/textField/index.tsx

@@ -235,7 +235,7 @@ export {
   ValidationMessagePositionType as TextFieldValidationMessagePositionType,
   MandatoryIndication as TextFieldMandatoryIndication
 };
-export default asBaseComponent<TextFieldProps, StaticMembers>(forwardRef(TextField as any), {
+export default asBaseComponent<TextFieldProps, StaticMembers, TextFieldRef>(forwardRef(TextField as any), {
   modifiersOptions: {
     margins: true,
     paddings: true,

src/incubator/Slider/index.tsx

@@ -15,7 +15,7 @@ import {
 } from './SliderPresenter';
 import Thumb from './Thumb';
 import Track from './Track';
-
+import {ComponentStatics} from '../../typings/common';
 export interface SliderProps extends AccessibilityProps {
   /**
    * Initial value
@@ -131,8 +131,8 @@ export interface SliderProps extends AccessibilityProps {
   migrate?: boolean;
 }
 
-type Props = SliderProps & ForwardRefInjectedProps;
-interface Statics {
+type Props = SliderProps & ForwardRefInjectedProps<SliderRef>;
+export interface SliderRef {
   reset: () => void;
 }
 
@@ -398,8 +398,7 @@ const Slider = React.memo((props: Props) => {
   );
 });
 
-// @ts-expect-error
-export default forwardRef<SliderProps, Statics>(Slider);
+export default forwardRef<SliderProps, ComponentStatics<typeof Slider>, SliderRef>(Slider);
 
 const styles = StyleSheet.create({
   container: {

src/incubator/index.ts

@@ -13,7 +13,7 @@ export {
 export {default as Toast, ToastProps, ToastPresets} from './toast';
 export {default as TouchableOpacity, TouchableOpacityProps} from './TouchableOpacity';
 export {default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold} from './panView';
-export {default as Slider} from './Slider';
+export {default as Slider, SliderRef} from './Slider';
 export {default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods} from './Dialog';
 // TODO: delete exports after fully removing from private
 export {default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps} from '../components/chipsInput';

src/incubator/toast/index.tsx

@@ -164,7 +164,6 @@ const Toast = (props: PropsWithChildren<ToastProps>) => {
       <View accessible={Constants.isIOS} style={styles.messageContainer}>
         <Text
           testID={`${testID}-message`}
-          // @ts-expect-error
           ref={viewRef}
           style={[styles.message, {textAlign}, messageStyle]}
           accessibilityLabel={toastPreset.accessibilityMessage}

src/typings/common.d.ts

@@ -8,3 +8,5 @@ export type ExtendTypeWith<T extends Constructor<any>, OtherObject extends objec
   ConstructorParameters<T>
 >;
 export type Dictionary<TYPE> = {[key: string]: TYPE};
+
+export type ComponentStatics<T> = {[Key in keyof T]: T[Key]}