Merge branch 'master' into release

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}

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
   "main": "components/index.js",

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/Button.driver.new.ts

@@ -0,0 +1,26 @@
+import {ButtonProps} from './ButtonTypes';
+import {useComponentDriver, ComponentProps, usePressableDriver, TextDriver, ImageDriver} from '../../testkit';
+
+export const ButtonDriver = (props: ComponentProps) => {
+  const driver = usePressableDriver<ButtonProps>(useComponentDriver(props));
+
+  const labelDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.label`
+  });
+
+  const iconDriver = ImageDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.icon`
+  });
+
+  const getLabel = () => {
+    return labelDriver;
+  };
+
+  const getIcon = () => {
+    return iconDriver;
+  };
+
+  return {getLabel, getIcon, ...driver};
+};