diff --git a/src/components/WheelPicker/Item.tsx b/src/components/WheelPicker/Item.tsx
index ecb128465e..3d461782e5 100644
--- a/src/components/WheelPicker/Item.tsx
+++ b/src/components/WheelPicker/Item.tsx
@@ -73,6 +73,7 @@ const WheelPickerItem = memo(({
     return [animatedColorStyle, style, fakeLabel ? textWithLabelPaddingStyle : styles.textPadding];
   }, [style, fakeLabel, animatedColorStyle, textWithLabelPaddingStyle]);
 
+  const _fakeLabelStyle = useMemo(() => StyleSheet.flatten([fakeLabelStyle, styles.hidden]), [fakeLabelStyle]);
   return (
     <AnimatedTouchableOpacity
       activeOpacity={1}
@@ -88,22 +89,11 @@ const WheelPickerItem = memo(({
       testID={testID}
       row
     >
-      <AnimatedText
-        text60R
-        testID={`${testID}.text`}
-        numberOfLines={1}
-        style={textStyle}
-        recorderTag={'unmask'}
-      >
+      <AnimatedText text60R testID={`${testID}.text`} numberOfLines={1} style={textStyle} recorderTag={'unmask'}>
         {label}
       </AnimatedText>
       {fakeLabel && (
-        <Text
-          text80M
-          $textDefaultLight
-          {...fakeLabelProps}
-          style={fakeLabelStyle}
-        >
+        <Text text80M $textDefaultLight {...fakeLabelProps} style={_fakeLabelStyle}>
           {fakeLabel}
         </Text>
       )}
@@ -122,5 +112,8 @@ const styles = StyleSheet.create({
   },
   disableRTL: {
     flexDirection: 'row-reverse'
+  },
+  hidden: {
+    opacity: 0
   }
 });
diff --git a/src/components/colorPicker/index.tsx b/src/components/colorPicker/index.tsx
index 785ccde138..81f59c3ee1 100644
--- a/src/components/colorPicker/index.tsx
+++ b/src/components/colorPicker/index.tsx
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {useCallback, useState} from 'react';
 import {StyleSheet} from 'react-native';
 import {asBaseComponent} from '../../commons/new';
 import Assets from '../../assets';
@@ -58,77 +58,65 @@ const ACCESSIBILITY_LABELS = {
  * @notes: This is a screen width component
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPicker/ColorPicker.gif?raw=true
  */
-class ColorPicker extends PureComponent<Props> {
-  static displayName = 'ColorPicker';
+const ColorPicker = (props: Props) => {
+  const {
+    accessibilityLabels = ACCESSIBILITY_LABELS,
+    backgroundColor = Colors.$backgroundDefault,
+    initialColor,
+    colors,
+    value,
+    testID,
+    onValueChange,
+    animatedIndex
+  } = props;
+  const [show, setShow] = useState(false);
 
-  static defaultProps = {
-    accessibilityLabels: ACCESSIBILITY_LABELS,
-    backgroundColor: Colors.$backgroundDefault
-  };
-
-  state = {
-    show: false
-  };
+  const showDialog = useCallback(() => setShow(true), []);
 
-  get animatedIndex() {
-    const {animatedIndex, colors} = this.props;
-    if (animatedIndex === undefined) {
-      return colors.length - 1;
-    }
-    return animatedIndex;
-  }
+  const hideDialog = useCallback(() => setShow(false), []);
 
-  showDialog = () => {
-    this.setState({show: true});
-  };
-
-  hideDialog = () => {
-    this.setState({show: false});
-  };
-
-  render() {
-    const {initialColor, colors, value, testID, accessibilityLabels, backgroundColor, onValueChange} = this.props;
-    const {show} = this.state;
-    return (
-      <View row testID={testID} style={{backgroundColor}}>
-        <ColorPalette
-          value={value}
-          colors={colors}
-          style={styles.palette}
-          usePagination={false}
-          animatedIndex={this.animatedIndex}
-          onValueChange={onValueChange}
-          testID={`${testID}-palette`}
-          backgroundColor={backgroundColor}
-        />
-        <View style={[styles.buttonContainer, {backgroundColor}]}>
-          <Button
-            color={Colors.$textDefault}
-            outlineColor={Colors.$textDefault}
-            style={styles.button}
-            round
-            outline
-            iconSource={Assets.icons.plusSmall}
-            onPress={this.showDialog}
-            testID={`${testID}-button`}
-            accessibilityLabel={accessibilityLabels?.addButton}
-          />
-        </View>
-        <ColorPickerDialog
-          {...this.props}
-          key={initialColor}
-          visible={show}
-          onDismiss={this.hideDialog}
-          accessibilityLabels={{
-            dismissButton: accessibilityLabels?.dismissButton,
-            doneButton: accessibilityLabels?.doneButton,
-            input: accessibilityLabels?.input
-          }}
+  return (
+    <View row testID={testID} style={{backgroundColor}}>
+      <ColorPalette
+        value={value}
+        colors={colors}
+        style={styles.palette}
+        usePagination={false}
+        animatedIndex={animatedIndex ?? colors.length - 1}
+        onValueChange={onValueChange}
+        testID={`${testID}-palette`}
+        backgroundColor={backgroundColor}
+      />
+      <View style={[styles.buttonContainer, {backgroundColor}]}>
+        <Button
+          color={Colors.$textDefault}
+          outlineColor={Colors.$textDefault}
+          style={styles.button}
+          round
+          outline
+          iconSource={Assets.icons.plusSmall}
+          onPress={showDialog}
+          testID={`${testID}-button`}
+          accessibilityLabel={accessibilityLabels?.addButton}
         />
       </View>
-    );
-  }
-}
+      <ColorPickerDialog
+        {...props}
+        key={initialColor}
+        visible={show}
+        onDismiss={hideDialog}
+        accessibilityLabels={{
+          dismissButton: accessibilityLabels?.dismissButton,
+          doneButton: accessibilityLabels?.doneButton,
+          input: accessibilityLabels?.input
+        }}
+        migrate
+      />
+    </View>
+  );
+};
+
+ColorPicker.displayName = 'ColorPicker';
 
 export default asBaseComponent<Props>(ColorPicker);
 
diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx
index da8ed3289d..3f375f3dfc 100644
--- a/src/components/image/index.tsx
+++ b/src/components/image/index.tsx
@@ -207,6 +207,7 @@ class Image extends PureComponent<Props, State> {
   renderImage = (useImageInsideContainer: boolean) => {
     const {error} = this.state;
     const source = error ? this.getVerifiedSource(this.props.errorSource) : this.getImageSource();
+
     const {
       tintColor,
       style,
diff --git a/src/components/numberInput/Presenter.ts b/src/components/numberInput/Presenter.ts
index 2139e96f8c..35ce807f25 100644
--- a/src/components/numberInput/Presenter.ts
+++ b/src/components/numberInput/Presenter.ts
@@ -50,7 +50,7 @@ function factor(options: Options): number {
 }
 
 export function getInitialNumber(propsInitialNumber = 0, options: Options) {
-  return propsInitialNumber * factor(options);
+  return Number((propsInitialNumber * factor(options)).toFixed(0));
 }
 
 export function parseInput(text: string, options: Options, initialNumber?: number): NumberInputData {
diff --git a/src/components/numberInput/__tests__/Presenter.spec.ts b/src/components/numberInput/__tests__/Presenter.spec.ts
index 854a456202..4f721ea5a4 100644
--- a/src/components/numberInput/__tests__/Presenter.spec.ts
+++ b/src/components/numberInput/__tests__/Presenter.spec.ts
@@ -39,6 +39,10 @@ describe('NumberInput', () => {
     it('should return 10 for 1 if fractionDigits is 1', () => {
       expect(getInitialNumber(1, {...EN_OPTIONS, fractionDigits: 1})).toEqual(10);
     });
+
+    it('Handle wrong result with some X.XX numbers', () => {
+      expect(getInitialNumber(8.97, {...EN_OPTIONS})).toEqual(897);
+    });
   });
 
   describe('getInitialData', () => {
diff --git a/src/components/slider/GradientSlider.tsx b/src/components/slider/GradientSlider.tsx
index 0c306156b5..d5fe287550 100644
--- a/src/components/slider/GradientSlider.tsx
+++ b/src/components/slider/GradientSlider.tsx
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import tinycolor from 'tinycolor2';
-import React, {Component} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 import {Colors} from '../../style';
 import {asBaseComponent, forwardRef, ForwardRefInjectedProps} from '../../commons/new';
@@ -19,7 +19,10 @@ export enum GradientSliderTypes {
   SATURATION = 'saturation'
 }
 
-export type GradientSliderProps = Omit<SliderProps, 'onValueChange'> & {
+export type GradientSliderProps = Omit<
+  SliderProps,
+  'onValueChange' | 'value' | 'minimumValue' | 'maximumValue' | 'step' | 'thumbHitSlop' | 'useGap'
+> & {
   /**
    * The gradient color
    */
@@ -48,196 +51,166 @@ export type GradientSliderProps = Omit<SliderProps, 'onValueChange'> & {
    * If true the Slider will be disabled and will appear in disabled color
    */
   disabled?: boolean;
-};
+} & Partial<Pick<SliderProps, 'value' | 'minimumValue' | 'maximumValue' | 'step' | 'thumbHitSlop' | 'useGap'>>; // Fixes typing errors with the old slider.
 
 type GradientSliderComponentProps = {
   /**
    * Context of the slider group
    */
   sliderContext: SliderContextProps;
-} & GradientSliderProps &
-  typeof defaultProps;
+} & GradientSliderProps;
 
 type Props = GradientSliderComponentProps & ForwardRefInjectedProps;
 
-interface GradientSliderState {
-  color: tinycolor.ColorFormats.HSLA;
-  initialColor: tinycolor.ColorFormats.HSLA;
-  prevColor: string | undefined;
-}
-
-const defaultProps = {
-  type: GradientSliderTypes.DEFAULT,
-  gradientSteps: 120,
-  color: Colors.$backgroundPrimaryHeavy
-};
-
 /**
  * @description: A Gradient Slider component
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SliderScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/GradientSlider/GradientSlider.gif?raw=true
  */
-class GradientSlider extends Component<Props, GradientSliderState> {
-  static displayName = 'GradientSlider';
-
-  static defaultProps = defaultProps;
-
-  static types = GradientSliderTypes;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      prevColor: props.color,
-      initialColor: Colors.getHSL(props.color),
-      color: Colors.getHSL(props.color)
-    };
-  }
-
-  static getDerivedStateFromProps(nextProps: Props, prevState: GradientSliderState) {
-    if (prevState.prevColor !== nextProps.color) {
-      return {
-        color: Colors.getHSL(nextProps.color),
-        prevColor: Colors.getHSL(nextProps.color)
-      };
-    }
-    return null;
-  }
-
-  slider = React.createRef();
-
-  reset = () => {
-    this.updateColor(this.state.initialColor);
-  };
-
-  getColor() {
-    const {color} = this.state;
-    const {value} = this.props.sliderContext;
-
-    return value || color;
-  }
-
-  getStepColor = (i: number) => {
-    const color = this.getColor();
-    return tinycolor({...color, a: i}).toHslString();
-  };
-
-  renderDefaultGradient = () => {
-    const color = this.getColor();
-    const {gradientSteps} = this.props;
+const GradientSlider = (props: Props) => {
+  const {
+    type = GradientSliderTypes.DEFAULT,
+    gradientSteps = 120,
+    color: propsColors = Colors.$backgroundPrimaryHeavy,
+    sliderContext,
+    onValueChange: _onValueChange,
+    migrate,
+    containerStyle,
+    disabled,
+    accessible,
+    forwardedRef,
+    ...others
+  } = props;
+
+  const [initialColor] = useState(Colors.getHSL(propsColors));
+  const [color, setColor] = useState(Colors.getHSL(propsColors));
+
+  useEffect(() => {
+    setColor(Colors.getHSL(propsColors));
+  }, [propsColors]);
+
+  const getColor = useCallback(() => {
+    return color || sliderContext.value;
+  }, [color, sliderContext.value]);
+
+  const renderDefaultGradient = useCallback(() => {
+    const color = getColor();
 
     return <Gradient color={color} numberOfSteps={gradientSteps}/>;
-  };
-
-  renderHueGradient = () => {
-    const {gradientSteps} = this.props;
+  }, [getColor, gradientSteps]);
 
+  const renderHueGradient = useCallback(() => {
     return <Gradient type={Gradient.types.HUE} numberOfSteps={gradientSteps}/>;
-  };
-
-  renderLightnessGradient = () => {
-    const color = this.getColor();
-    const {gradientSteps} = this.props;
+  }, [gradientSteps]);
 
+  const renderLightnessGradient = useCallback(() => {
+    const color = getColor();
     return <Gradient type={Gradient.types.LIGHTNESS} color={color} numberOfSteps={gradientSteps}/>;
-  };
-
-  renderSaturationGradient = () => {
-    const color = this.getColor();
-    const {gradientSteps} = this.props;
+  }, [getColor, gradientSteps]);
 
+  const renderSaturationGradient = useCallback(() => {
+    const color = getColor();
     return <Gradient type={Gradient.types.SATURATION} color={color} numberOfSteps={gradientSteps}/>;
-  };
+  }, [getColor, gradientSteps]);
 
-  onValueChange = (value: string, alpha: number) => {
+  const onValueChange = useCallback((value: string, alpha: number) => {
     // alpha returns for type.DEFAULT
-    this.props.onValueChange?.(value, alpha);
-  };
+    _onValueChange?.(value, alpha);
+  },
+  [_onValueChange]);
 
-  updateColor(color: tinycolor.ColorFormats.HSLA) {
-    if (!_.isEmpty(this.props.sliderContext)) {
-      this.props.sliderContext.setValue?.(color);
+  const updateColor = useCallback((color: tinycolor.ColorFormats.HSLA) => {
+    if (!_.isEmpty(sliderContext)) {
+      sliderContext.setValue?.(color);
     } else {
-      this.setState({color});
+      setColor(color);
       const hex = Colors.getHexString(color);
-      this.onValueChange(hex, color.a);
+      onValueChange(hex, color.a);
     }
+  },
+  [sliderContext, onValueChange]);
+
+  const reset = useCallback(() => {
+    updateColor(initialColor);
+  }, [initialColor, updateColor]);
+
+  const updateAlpha = useCallback((a: number) => {
+    const color = getColor();
+    updateColor({...color, a});
+  },
+  [getColor, updateColor]);
+
+  const updateHue = useCallback((h: number) => {
+    const color = getColor();
+    updateColor({...color, h});
+  },
+  [getColor, updateColor]);
+
+  const updateLightness = useCallback((l: number) => {
+    const color = getColor();
+    updateColor({...color, l});
+  },
+  [getColor, updateColor]);
+
+  const updateSaturation = useCallback((s: number) => {
+    const color = getColor();
+    updateColor({...color, s});
+  },
+  [getColor, updateColor]);
+
+  const _color = getColor();
+  const thumbTintColor = Colors.getHexString(_color);
+  let step = 0.01;
+  let maximumValue = 1;
+  let value = color.a;
+  let renderTrack = renderDefaultGradient;
+  let sliderOnValueChange = updateAlpha;
+
+  switch (type) {
+    case GradientSliderTypes.HUE:
+      step = 1;
+      maximumValue = 359;
+      value = initialColor.h;
+      renderTrack = renderHueGradient;
+      sliderOnValueChange = updateHue;
+      break;
+    case GradientSliderTypes.LIGHTNESS:
+      value = initialColor.l;
+      renderTrack = renderLightnessGradient;
+      sliderOnValueChange = updateLightness;
+      break;
+    case GradientSliderTypes.SATURATION:
+      value = initialColor.s;
+      renderTrack = renderSaturationGradient;
+      sliderOnValueChange = updateSaturation;
+      break;
+    default:
+      break;
   }
+  const SliderComponent = migrate ? NewSlider : Slider;
+
+  return (
+    <SliderComponent
+      {...others}
+      //@ts-expect-error
+      ref={forwardedRef}
+      onReset={reset}
+      renderTrack={renderTrack}
+      step={step}
+      maximumValue={maximumValue}
+      value={value}
+      thumbTintColor={thumbTintColor}
+      onValueChange={sliderOnValueChange}
+      containerStyle={containerStyle}
+      disabled={disabled}
+      accessible={accessible}
+      useRange={false}
+    />
+  );
+};
 
-  updateAlpha = (a: number) => {
-    const color = this.getColor();
-    this.updateColor({...color, a});
-  };
-
-  updateHue = (h: number) => {
-    const color = this.getColor();
-    this.updateColor({...color, h});
-  };
-
-  updateLightness = (l: number) => {
-    const color = this.getColor();
-    this.updateColor({...color, l});
-  };
-
-  updateSaturation = (s: number) => {
-    const color = this.getColor();
-    this.updateColor({...color, s});
-  };
-
-  render() {
-    const {type, containerStyle, disabled, accessible, forwardedRef, migrate, ...others} = this.props;
-    const initialColor = this.state.initialColor;
-    const color = this.getColor();
-    const thumbTintColor = Colors.getHexString(color);
-    let step = 0.01;
-    let maximumValue = 1;
-    let value = color.a;
-    let renderTrack = this.renderDefaultGradient;
-    let onValueChange = this.updateAlpha;
-
-    switch (type) {
-      case GradientSliderTypes.HUE:
-        step = 1;
-        maximumValue = 359;
-        value = initialColor.h;
-        renderTrack = this.renderHueGradient;
-        onValueChange = this.updateHue;
-        break;
-      case GradientSliderTypes.LIGHTNESS:
-        value = initialColor.l;
-        renderTrack = this.renderLightnessGradient;
-        onValueChange = this.updateLightness;
-        break;
-      case GradientSliderTypes.SATURATION:
-        value = initialColor.s;
-        renderTrack = this.renderSaturationGradient;
-        onValueChange = this.updateSaturation;
-        break;
-      default:
-        break;
-    }
-
-    const SliderComponent = migrate ? NewSlider : Slider;
-
-    return (
-      <SliderComponent
-        {...others}
-        //@ts-expect-error
-        ref={forwardedRef}
-        onReset={this.reset}
-        renderTrack={renderTrack}
-        step={step}
-        maximumValue={maximumValue}
-        value={value}
-        thumbTintColor={thumbTintColor}
-        onValueChange={onValueChange}
-        containerStyle={containerStyle}
-        disabled={disabled}
-        accessible={accessible}
-        useRange={false}
-      />
-    );
-  }
-}
+GradientSlider.displayName = 'GradientSlider';
+GradientSlider.types = GradientSliderTypes;
 
-export default asBaseComponent<GradientSliderComponentProps, typeof GradientSlider>(forwardRef(asSliderGroupChild(GradientSlider)));
+// eslint-disable-next-line max-len
+export default asBaseComponent<GradientSliderProps, typeof GradientSlider>(forwardRef(asSliderGroupChild(forwardRef(GradientSlider))));
diff --git a/src/components/textField/Input.tsx b/src/components/textField/Input.tsx
index d0afc5b082..ca49c70287 100644
--- a/src/components/textField/Input.tsx
+++ b/src/components/textField/Input.tsx
@@ -1,5 +1,6 @@
 import React, {useContext, useMemo} from 'react';
-import {TextInput as RNTextInput, StyleSheet, Platform} from 'react-native';
+import {StyleSheet, Platform} from 'react-native';
+import {TextInput as RNTextInput} from './textInput';
 import {Constants, ForwardRefInjectedProps} from '../../commons/new';
 import {InputProps} from './types';
 import {getColorByState} from './Presenter';
diff --git a/src/components/textField/textInput/index.tsx b/src/components/textField/textInput/index.tsx
new file mode 100644
index 0000000000..890f40cb3f
--- /dev/null
+++ b/src/components/textField/textInput/index.tsx
@@ -0,0 +1 @@
+export {TextInput} from 'react-native';
diff --git a/src/components/textField/textInput/index.web.tsx b/src/components/textField/textInput/index.web.tsx
new file mode 100644
index 0000000000..d6dd4f6fc8
--- /dev/null
+++ b/src/components/textField/textInput/index.web.tsx
@@ -0,0 +1,43 @@
+import React, {type BaseSyntheticEvent, useCallback} from 'react';
+import {TextInput as RNTextInput, type TextInputChangeEventData, type TextInputProps, type LayoutChangeEvent} from 'react-native';
+
+const adjustInputHeight = (element: BaseSyntheticEvent<TextInputProps, TextInputProps>['target']) => {
+  element.style.height = 0;
+  const newHeight = element.offsetHeight - element.clientHeight + element.scrollHeight;
+  element.style.height = `${newHeight}px`;
+};
+
+// we need this wrapper of TextInput on web because of multiline bug in react-native-web
+// https://github.com/necolas/react-native-web/issues/795
+export const TextInput = (props: TextInputProps) => {
+  const {multiline, onChange, onLayout, ...other} = props;
+
+  const _onLayout = useCallback((event: LayoutChangeEvent) => {
+    const element = event?.target;
+
+    if (element && multiline) {
+      adjustInputHeight(element);
+    }
+
+    onLayout?.(event);
+  }, [multiline, onLayout]);
+
+  const _onChange = useCallback((event: BaseSyntheticEvent<TextInputChangeEventData>) => {
+    const element = event?.target || event?.nativeEvent?.target;
+    
+    if (element && multiline) {
+      adjustInputHeight(element);
+    }
+
+    onChange?.(event);
+  }, [multiline, onChange]);
+
+  return (
+    <RNTextInput
+      {...other}
+      multiline={multiline}
+      onChange={_onChange}
+      onLayout={_onLayout}
+    />
+  );
+};
diff --git a/src/components/textField/types.ts b/src/components/textField/types.ts
index b9f14641a7..fb142a87c2 100644
--- a/src/components/textField/types.ts
+++ b/src/components/textField/types.ts
@@ -142,7 +142,6 @@ export interface CharCounterProps {
 
 export interface InputProps
   extends Omit<TextInputProps, 'placeholderTextColor'>,
-    Omit<React.ComponentPropsWithRef<typeof TextInput>, 'placeholderTextColor'>,
     MandatoryIndication,
     RecorderProps {
   /**
diff --git a/src/hooks/useCombinedRefs/index.ts b/src/hooks/useCombinedRefs/index.ts
index ec74b2dd23..ebc7d2390d 100644
--- a/src/hooks/useCombinedRefs/index.ts
+++ b/src/hooks/useCombinedRefs/index.ts
@@ -8,7 +8,6 @@ const useCombinedRefs = (...refs: React.Ref<any>[]) => {
       if (!ref) {
         return;
       }
-
       if (typeof ref === 'function') {
         ref(targetRef.current);
       } else {
@@ -16,7 +15,7 @@ const useCombinedRefs = (...refs: React.Ref<any>[]) => {
         ref.current = targetRef.current;
       }
     });
-  }, [refs]);
+  }, refs);
 
   return targetRef;
 };
diff --git a/src/incubator/hooks/useHiddenLocation.web.ts b/src/incubator/hooks/useHiddenLocation.web.ts
new file mode 100644
index 0000000000..4ce447ef46
--- /dev/null
+++ b/src/incubator/hooks/useHiddenLocation.web.ts
@@ -0,0 +1,60 @@
+import {isEqual} from 'lodash';
+import {useCallback, useRef, useState, RefCallback} from 'react';
+import {View, LayoutChangeEvent, LayoutRectangle} from 'react-native';
+import {Constants} from '../../commons/new';
+import {PanningDirectionsEnum} from '../panView';
+
+type HiddenLocationRecord = Record<PanningDirectionsEnum, number>;
+
+export interface HiddenLocation extends HiddenLocationRecord {
+  wasMeasured: boolean;
+}
+
+// Adding this for headless tests that are not triggering onLayout
+const wasMeasuredDefaultValue = global._UILIB_TESTING ?? false;
+
+export default function useHiddenLocation<T extends View>() {
+  const getHiddenLocation = ({
+    wasMeasured = wasMeasuredDefaultValue
+  }) => {
+    return {
+      up: -Constants.screenHeight,
+      down: Constants.screenHeight,
+      left: -Constants.windowWidth,
+      right: Constants.windowWidth,
+      wasMeasured
+    };
+  };
+
+  const [hiddenLocation, setHiddenLocation] = useState<HiddenLocation>(getHiddenLocation({}));
+  const ref = useRef<T>();
+  const layoutData = useRef<LayoutRectangle>();
+  const wasMeasured = useRef(wasMeasuredDefaultValue);
+
+  const measure = useCallback(() => {
+    if (ref.current) {
+      wasMeasured.current = true;
+      setHiddenLocation(getHiddenLocation({
+        wasMeasured: true
+      }));
+    }
+  }, []);
+
+  const setRef: RefCallback<T> = useCallback((node: T) => {
+    if (node) {
+      ref.current = node;
+      measure();
+    }
+  },
+  [measure]);
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    if (!isEqual(layoutData.current, event.nativeEvent.layout)) {
+      layoutData.current = event.nativeEvent.layout;
+      measure();
+    }
+  },
+  [measure]);
+
+  return {setRef, onLayout, hiddenLocation};
+}
diff --git a/src/utils/imageUtils.ts b/src/utils/imageUtils.ts
index de46ade608..4d6896358d 100644
--- a/src/utils/imageUtils.ts
+++ b/src/utils/imageUtils.ts
@@ -1,6 +1,7 @@
 import get from 'lodash/get';
 import {ImageProps} from 'react-native';
 import Assets from '../assets';
+import {Constants} from '../commons/new';
 
 export function isSvgUri(source?: ImageProps['source']) {
   // @ts-expect-error
@@ -8,7 +9,7 @@ export function isSvgUri(source?: ImageProps['source']) {
 }
 
 export function isSvg(source?: ImageProps['source']) {
-  return typeof source === 'string' || typeof source === 'function' || isSvgUri(source);
+  return typeof source === 'function' || isSvgUri(source) || (Constants.isWeb && isSvgData(source));
 }
 
 export function isBase64ImageContent(data: string) {
@@ -21,3 +22,7 @@ export function getAsset(assetName = '', assetGroup = '') {
   return get(Assets, `${assetGroup}.${assetName}`);
 }
 
+function isSvgData(source?: ImageProps['source']) {
+  const sourceString = (source as string);
+  return typeof source === 'string' && (sourceString.includes('</svg>') || sourceString.includes('data:image/svg'));
+}
diff --git a/webDemo/src/App.tsx b/webDemo/src/App.tsx
index 2f70a47784..df31575323 100644
--- a/webDemo/src/App.tsx
+++ b/webDemo/src/App.tsx
@@ -216,6 +216,7 @@ const itemsToRender: ItemToRender[] = [
           <Incubator.TextField
             text70
             migrate
+            multiline
             defaultValue={defaultValue}
             containerStyle={{marginBottom: 10}}
             placeholder="Enter your email..."