diff --git a/README.md b/README.md
index c7fef3aab4..5829ebe3e3 100644
--- a/README.md
+++ b/README.md
@@ -15,8 +15,12 @@
 [![NPM Downloads](https://img.shields.io/npm/dm/react-native-ui-lib.svg?style=flat)](https://www.npmjs.com/package/react-native-ui-lib)
 <a href="https://twitter.com/rnuilib"><img src="https://img.shields.io/twitter/follow/rnuilib.svg?style=flat&colorA=1DA1F2&colorB=20303C&label=Follow%20us%20on%20Twitter" alt="Follow on Twitter"></a>
 
-Check out our [Docs](https://wix.github.io/react-native-ui-lib/). <br>
-Our [Discord Channel](https://discord.gg/2eW4g6Z)
+
+## Links
+- [Docs](https://wix.github.io/react-native-ui-lib/)
+- [Figma library](https://www.figma.com/community/file/1379775092983284111/rnui-library)
+- [Discord Channel](https://discord.gg/2eW4g6Z)
+
 
 Download our Expo demo app <br>
 <img height="120" src="https://qr.expo.dev/expo-go?owner=vn.chemgio&slug=rnuilib&releaseChannel=default&host=exp.host"> <br>
@@ -130,4 +134,4 @@ class MyScreen extends Component {
 
 ## Contributing
  See [Contribution Guide](https://github.com/wix/react-native-ui-lib/blob/master/CONTRIBUTING.md)
- 
\ No newline at end of file
+ 
diff --git a/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap b/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap
index 893ce7a663..7eac3e92e9 100644
--- a/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap
+++ b/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap
@@ -1899,6 +1899,8 @@ exports[`TextField Screen renders screen 1`] = `
               }
             >
               <Image
+                accessibilityRole="image"
+                accessible={false}
                 source={
                   {
                     "testUri": "../../../demo/src/assets/icons/info.png",
@@ -2695,6 +2697,7 @@ exports[`TextField Screen renders screen 1`] = `
                 ],
               ]
             }
+            testID="undefined.clearButton.container"
           >
             <View
               accessibilityLabel="clear"
@@ -2753,8 +2756,6 @@ exports[`TextField Screen renders screen 1`] = `
               <Image
                 accessibilityRole="image"
                 accessible={false}
-                assetGroup="icons"
-                onError={[Function]}
                 source={
                   {
                     "testUri": "../../../src/assets/icons/xFlat.png",
@@ -2762,16 +2763,6 @@ exports[`TextField Screen renders screen 1`] = `
                 }
                 style={
                   [
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    false,
                     [
                       {
                         "tintColor": "#5A48F5",
@@ -2780,7 +2771,12 @@ exports[`TextField Screen renders screen 1`] = `
                         "tintColor": "#A6ACB1",
                       },
                     ],
-                    false,
+                    undefined,
+                    undefined,
+                    undefined,
+                    {
+                      "tintColor": "#5A48F5",
+                    },
                   ]
                 }
                 testID="undefined.clearButton.icon"
@@ -2788,6 +2784,8 @@ exports[`TextField Screen renders screen 1`] = `
             </View>
           </View>
           <Image
+            accessibilityRole="image"
+            accessible={false}
             source={
               {
                 "testUri": "../../../demo/src/assets/icons/search.png",
@@ -3427,8 +3425,6 @@ exports[`TextField Screen renders screen 1`] = `
             <Image
               accessibilityRole="image"
               accessible={false}
-              assetGroup="icons"
-              onError={[Function]}
               source={
                 {
                   "testUri": "../../../demo/src/assets/icons/search.png",
@@ -3436,23 +3432,18 @@ exports[`TextField Screen renders screen 1`] = `
               }
               style={
                 [
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  false,
                   [
                     {
                       "tintColor": "#20303C",
                     },
                     undefined,
                   ],
-                  false,
+                  undefined,
+                  undefined,
+                  undefined,
+                  {
+                    "tintColor": "#20303C",
+                  },
                 ]
               }
               testID="undefined.icon"
@@ -5398,6 +5389,8 @@ exports[`TextField Screen renders screen 1`] = `
             }
           >
             <Image
+              accessibilityRole="image"
+              accessible={false}
               marginL-s1={true}
               source={
                 {
diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index e321478911..7b0c03172f 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -82,6 +82,7 @@ const dialogOptions = [
   {label: 'Option 7', value: 6},
   {label: 'Option 8', value: 6}
 ];
+
 export default class PickerScreen extends Component {
   picker = React.createRef<PickerMethods>();
   state = {
@@ -99,7 +100,7 @@ export default class PickerScreen extends Component {
     contact: 0
   };
 
-  renderDialog: PickerProps['renderCustomModal'] = (modalProps: RenderCustomModalProps) => {
+  renderDialog: PickerProps['renderOverlay'] = (modalProps: RenderCustomModalProps) => {
     const {visible, children, toggleModal, onDone} = modalProps;
     return (
       <Incubator.Dialog
@@ -128,6 +129,7 @@ export default class PickerScreen extends Component {
           <Text text40 $textDefault>
             Picker
           </Text>
+          
           <Picker
             placeholder="Favorite Language"
             floatingPlaceholder
@@ -170,7 +172,7 @@ export default class PickerScreen extends Component {
             onChange={items => this.setState({customModalValues: items})}
             mode={Picker.modes.MULTI}
             trailingAccessory={dropdownIcon}
-            renderCustomModal={this.renderDialog}
+            renderOverlay={this.renderDialog}
             items={options}
           />
 
@@ -183,7 +185,7 @@ export default class PickerScreen extends Component {
             onChange={item => this.setState({option: item})}
             topBarProps={{title: 'Languages'}}
             useDialog
-            renderCustomDialogHeader={({onDone, onCancel}) => (
+            renderHeader={({onDone, onCancel}) => (
               <View padding-s5 row spread>
                 <Button link label="Cancel" onPress={onCancel}/>
                 <Button link label="Done" onPress={onDone}/>
@@ -194,13 +196,14 @@ export default class PickerScreen extends Component {
             searchPlaceholder={'Search a language'}
             items={dialogOptions}
           />
+          
           <Text marginB-10 text70 $textDefault>
             Custom Picker:
           </Text>
           <Picker
             value={this.state.filter}
             onChange={filter => this.setState({filter})}
-            renderPicker={(_value?: any, label?: string) => {
+            renderInput={(_value?: any, label?: string) => {
               return (
                 <View row>
                   <Icon
@@ -216,6 +219,7 @@ export default class PickerScreen extends Component {
             }}
             items={filters}
           />
+
           <Text marginT-20 marginB-10 text70 $textDefault>
             Custom Picker Items:
           </Text>
@@ -225,7 +229,7 @@ export default class PickerScreen extends Component {
             onChange={contact => {
               this.setState({contact});
             }}
-            renderPicker={(contactValue?: number) => {
+            renderInput={(contactValue?: number) => {
               const contact = contacts[contactValue!] ?? undefined;
               return (
                 <View row>
@@ -252,6 +256,7 @@ export default class PickerScreen extends Component {
             style={{alignSelf: 'flex-start'}}
             onPress={() => this.picker.current?.openExpandable?.()}
           />
+          
           <Text text60 marginT-s5>
             Different Field Types
           </Text>
diff --git a/src/assets/emojis/index.js b/src/assets/emojis/index.ts
similarity index 99%
rename from src/assets/emojis/index.js
rename to src/assets/emojis/index.ts
index b6b18705f1..c70ea21923 100644
--- a/src/assets/emojis/index.js
+++ b/src/assets/emojis/index.ts
@@ -1342,5 +1342,5 @@ export const emojis = {
   "woman-woman-girl-girl": "👩‍👩‍👧‍👧",
   "woman-heart-woman": "👩‍❤️‍👩",
   "woman-kiss-woman": "👩‍❤️‍💋‍👩"
-}
+} as const;
 
diff --git a/src/components/button/Button.driver.ts b/src/components/button/Button.driver.ts
index 7b475a6472..eb609483f3 100644
--- a/src/components/button/Button.driver.ts
+++ b/src/components/button/Button.driver.ts
@@ -1,4 +1,4 @@
-import {ButtonProps} from './ButtonTypes';
+import {ButtonProps} from './types';
 import {ImageDriver} from '../image/Image.driver';
 import {ComponentDriver, ComponentDriverArgs} from '../../testkit/Component.driver';
 import {TextDriver} from '../text/Text.driver';
diff --git a/src/components/button/ButtonConstants.ts b/src/components/button/ButtonConstants.ts
index 9ce3d7e208..f5a7bf516e 100644
--- a/src/components/button/ButtonConstants.ts
+++ b/src/components/button/ButtonConstants.ts
@@ -1,4 +1,4 @@
-import {ButtonSize} from './ButtonTypes';
+import {ButtonSize} from './types';
 
 
 export const PADDINGS = {
diff --git a/src/components/button/__tests__/__snapshots__/index.spec.js.snap b/src/components/button/__tests__/__snapshots__/index.spec.js.snap
index 0fdba425eb..780cae86c5 100644
--- a/src/components/button/__tests__/__snapshots__/index.spec.js.snap
+++ b/src/components/button/__tests__/__snapshots__/index.spec.js.snap
@@ -1121,21 +1121,9 @@ exports[`Button container size should have no padding of button is an icon butto
   <Image
     accessibilityRole="image"
     accessible={false}
-    assetGroup="icons"
-    onError={[Function]}
     source={14}
     style={
       [
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        false,
         [
           {
             "marginRight": 8,
@@ -1143,7 +1131,12 @@ exports[`Button container size should have no padding of button is an icon butto
           },
           undefined,
         ],
-        false,
+        undefined,
+        undefined,
+        undefined,
+        {
+          "tintColor": "#FFFFFF",
+        },
       ]
     }
     testID="undefined.icon"
@@ -2254,28 +2247,21 @@ exports[`Button icon should apply color on icon 1`] = `
   <Image
     accessibilityRole="image"
     accessible={false}
-    assetGroup="icons"
-    onError={[Function]}
     source={12}
     style={
       [
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        false,
         [
           {
             "tintColor": "green",
           },
           undefined,
         ],
-        false,
+        undefined,
+        undefined,
+        undefined,
+        {
+          "tintColor": "green",
+        },
       ]
     }
     testID="undefined.icon"
@@ -2331,28 +2317,21 @@ exports[`Button icon should apply color on icon 2`] = `
   <Image
     accessibilityRole="image"
     accessible={false}
-    assetGroup="icons"
-    onError={[Function]}
     source={12}
     style={
       [
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        false,
         [
           {
             "tintColor": "#FC3D2F",
           },
           undefined,
         ],
-        false,
+        undefined,
+        undefined,
+        undefined,
+        {
+          "tintColor": "#FC3D2F",
+        },
       ]
     }
     testID="undefined.icon"
@@ -2408,21 +2387,9 @@ exports[`Button icon should include custom iconStyle provided as a prop 1`] = `
   <Image
     accessibilityRole="image"
     accessible={false}
-    assetGroup="icons"
-    onError={[Function]}
     source={12}
     style={
       [
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        false,
         [
           {
             "tintColor": "#FFFFFF",
@@ -2432,7 +2399,12 @@ exports[`Button icon should include custom iconStyle provided as a prop 1`] = `
             "tintColor": "red",
           },
         ],
-        false,
+        undefined,
+        undefined,
+        undefined,
+        {
+          "tintColor": "#FFFFFF",
+        },
       ]
     }
     testID="undefined.icon"
@@ -2490,28 +2462,21 @@ exports[`Button icon should return icon style according to different variations
   <Image
     accessibilityRole="image"
     accessible={false}
-    assetGroup="icons"
-    onError={[Function]}
     source={12}
     style={
       [
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        false,
         [
           {
             "tintColor": "#5A48F5",
           },
           undefined,
         ],
-        false,
+        undefined,
+        undefined,
+        undefined,
+        {
+          "tintColor": "#5A48F5",
+        },
       ]
     }
     testID="undefined.icon"
@@ -2567,28 +2532,21 @@ exports[`Button icon should return icon style according to different variations
   <Image
     accessibilityRole="image"
     accessible={false}
-    assetGroup="icons"
-    onError={[Function]}
     source={12}
     style={
       [
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        false,
         [
           {
             "tintColor": "#5A48F5",
           },
           undefined,
         ],
-        false,
+        undefined,
+        undefined,
+        undefined,
+        {
+          "tintColor": "#5A48F5",
+        },
       ]
     }
     testID="undefined.icon"
@@ -2644,28 +2602,21 @@ exports[`Button icon should return icon style according to different variations
   <Image
     accessibilityRole="image"
     accessible={false}
-    assetGroup="icons"
-    onError={[Function]}
     source={12}
     style={
       [
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        false,
         [
           {
             "tintColor": "#FFFFFF",
           },
           undefined,
         ],
-        false,
+        undefined,
+        undefined,
+        undefined,
+        {
+          "tintColor": "#FFFFFF",
+        },
       ]
     }
     testID="undefined.icon"
@@ -3895,28 +3846,21 @@ exports[`Button labelColor should return undefined color if this is an icon butt
   <Image
     accessibilityRole="image"
     accessible={false}
-    assetGroup="icons"
-    onError={[Function]}
     source={12}
     style={
       [
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        false,
         [
           {
             "tintColor": "#FFFFFF",
           },
           undefined,
         ],
-        false,
+        undefined,
+        undefined,
+        undefined,
+        {
+          "tintColor": "#FFFFFF",
+        },
       ]
     }
     testID="undefined.icon"
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
index 6ddfc006b1..e501603404 100644
--- a/src/components/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -1,12 +1,11 @@
 import _ from 'lodash';
 import React, {PureComponent} from 'react';
-import {Platform, StyleSheet, LayoutAnimation, LayoutChangeEvent, ImageStyle, TextStyle} from 'react-native';
+import {Platform, StyleSheet, LayoutAnimation, LayoutChangeEvent, ImageStyle, TextStyle, StyleProp} from 'react-native';
 import {asBaseComponent, forwardRef, Constants} from '../../commons/new';
 import {Colors, Typography, BorderRadiuses} from 'style';
 import TouchableOpacity from '../touchableOpacity';
 import type {Dictionary, ComponentStatics} from '../../typings/common';
 import Text from '../text';
-import Image from '../image';
 import Icon from '../icon';
 import {
   ButtonSize,
@@ -16,7 +15,7 @@ import {
   Props,
   DEFAULT_PROPS,
   ButtonSizeProp
-} from './ButtonTypes';
+} from './types';
 import {PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE} from './ButtonConstants';
 
 export {ButtonSize, ButtonAnimationDirection, ButtonProps};
@@ -249,7 +248,7 @@ class Button extends PureComponent<Props, ButtonState> {
     }
   }
 
-  getIconStyle() {
+  getIconStyle(): [ImageStyle, StyleProp<ImageStyle>] {
     const {disabled, iconStyle: propsIconStyle, iconOnRight, size: propsSize, link} = this.props;
     const size = propsSize || DEFAULT_SIZE;
     const iconStyle: ImageStyle = {
@@ -303,26 +302,29 @@ class Button extends PureComponent<Props, ButtonState> {
       if (typeof iconSource === 'function') {
         return iconSource(iconStyle);
       } else {
-        if (Constants.isWeb) {
-          return (
-            <Icon
-              style={iconStyle}
-              tintColor={Colors.$iconDefault}
-              source={iconSource}
-              testID={`${testID}.icon`}
-              {...iconProps}
-            />
-          );
-        }
+        // if (Constants.isWeb) {
         return (
-          <Image
+          <Icon
+            style={iconStyle}
             source={iconSource}
             supportRTL={supportRTL}
-            style={iconStyle}
             testID={`${testID}.icon`}
+            // Note Passing tintColor as prop is required for Web
+            // @ts-expect-error RN ImageStyle conflicts with ImageProps in tintColor type
+            tintColor={iconStyle[0]?.tintColor}
             {...iconProps}
           />
         );
+        // }
+        // return (
+        //   <Image
+        //     source={iconSource}
+        //     supportRTL={supportRTL}
+        //     style={iconStyle}
+        //     testID={`${testID}.icon`}
+        //     {...iconProps}
+        //   />
+        // );
       }
     }
     return null;
diff --git a/src/components/button/ButtonTypes.tsx b/src/components/button/types.ts
similarity index 73%
rename from src/components/button/ButtonTypes.tsx
rename to src/components/button/types.ts
index 25ee406e04..59a4402117 100644
--- a/src/components/button/ButtonTypes.tsx
+++ b/src/components/button/types.ts
@@ -1,4 +1,3 @@
-import {PureComponent} from 'react';
 import {ImageStyle, TextStyle, StyleProp} from 'react-native';
 import {
   BaseComponentInjectedProps,
@@ -166,22 +165,3 @@ export type Props = ButtonProps & BaseComponentInjectedProps & ForwardRefInjecte
 export const DEFAULT_PROPS = {
   iconOnRight: false
 };
-
-/**
- * @description: Basic button component
- * @extends: TouchableOpacity
- * @modifiers: margin, background
- * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Sizes.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Typographies.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Outlines.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Corners.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Custom.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Inspirations.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Round.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Full.png?raw=true
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Animated.gif?raw=true
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx
- */
-// @ts-ignore
-class FakeButtonForDocs extends PureComponent<ButtonProps> { // eslint-disable-line
-  static displayName = 'Button';
-
-  static defaultProps = DEFAULT_PROPS;
-
-  render() {
-    return null;
-  }
-}
diff --git a/src/components/carousel/types.tsx b/src/components/carousel/types.ts
similarity index 93%
rename from src/components/carousel/types.tsx
rename to src/components/carousel/types.ts
index ae05c87152..d813ca86a3 100644
--- a/src/components/carousel/types.tsx
+++ b/src/components/carousel/types.ts
@@ -1,4 +1,3 @@
-import React from 'react';
 import {ScrollViewProps, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, Animated} from 'react-native';
 // @ts-expect-error No typings available for 'deprecated-react-native-prop-types'
 import {PointPropType} from 'deprecated-react-native-prop-types';
@@ -109,12 +108,3 @@ export interface CarouselState {
   initialOffset: PointPropType;
   prevProps: CarouselProps;
 }
-
-// @ts-ignore
-class CarouselTypesForDocs extends React.Component<CarouselProps> { // eslint-disable-line
-  static displayName = 'Carousel';
-
-  render() {
-    return null;
-  }
-}
diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx
index 90c4f457a4..9a14373fe0 100644
--- a/src/components/checkbox/index.tsx
+++ b/src/components/checkbox/index.tsx
@@ -17,6 +17,7 @@ import TouchableOpacity from '../touchableOpacity';
 import Text, {TextProps} from '../text';
 import View from '../view';
 import Icon from '../icon';
+import Constants from '../../commons/Constants';
 
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
@@ -287,7 +288,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     const {label, labelStyle, containerStyle, labelProps, testID} = this.props;
     
     return label ? (
-      <View row centerV style={containerStyle}>
+      <View row centerV style={containerStyle} collapsable={!Constants.isAndroid}>
         {this.renderCheckbox()}
         <Text flexS style={[this.styles.checkboxLabel, this.getLabelStyle(), labelStyle]} recorderTag={'unmask'} {...labelProps} onPress={this.onPress} testID={`${testID}.label`}>
           {label}
diff --git a/src/components/colorPicker/ColorPickerDialog.tsx b/src/components/colorPicker/ColorPickerDialog.tsx
index 926498459a..ed2dc0f103 100644
--- a/src/components/colorPicker/ColorPickerDialog.tsx
+++ b/src/components/colorPicker/ColorPickerDialog.tsx
@@ -6,9 +6,9 @@ import {Colors} from '../../style';
 import {ModalProps} from '../../components/modal';
 import Dialog, {DialogProps} from '../../incubator/Dialog';
 import {getColorValue, getValidColorString, getTextColor, BORDER_RADIUS, HSLColor} from './ColorPickerPresenter';
-import Header from './ColorPickerDialogHeader';
-import Preview from './ColorPickerPreview';
-import Sliders from './ColorPickerDialogSliders';
+import ColorPickerDialogHeader from './ColorPickerDialogHeader';
+import ColorPickerPreview from './ColorPickerPreview';
+import ColorPickerDialogSliders from './ColorPickerDialogSliders';
 
 export interface ColorPickerDialogProps extends DialogProps {
   /**
@@ -165,7 +165,7 @@ const ColorPickerDialog = (props: ColorPickerDialogProps) => {
       modalProps={MODAL_PROPS}
       {...dialogProps}
     >
-      <Header
+      <ColorPickerDialogHeader
         accessibilityLabels={accessibilityLabels}
         valid={valid}
         onDonePressed={onDonePressed}
@@ -173,7 +173,7 @@ const ColorPickerDialog = (props: ColorPickerDialogProps) => {
         doneButtonColor={doneButtonColor}
         onDismiss={onDismiss}
       />
-      <Preview
+      <ColorPickerPreview
         color={color}
         text={text}
         valid={valid}
@@ -183,7 +183,12 @@ const ColorPickerDialog = (props: ColorPickerDialogProps) => {
         onFocus={onFocus}
         onChangeText={onChangeText}
       />
-      <Sliders keyboardHeight={keyboardHeight} color={color} onSliderValueChange={updateColor} migrate={migrate}/>
+      <ColorPickerDialogSliders
+        keyboardHeight={keyboardHeight}
+        color={color}
+        onSliderValueChange={updateColor}
+        migrate={migrate}
+      />
     </Dialog>
   );
 };
diff --git a/src/components/colorPicker/ColorPickerDialogHeader.tsx b/src/components/colorPicker/ColorPickerDialogHeader.tsx
index 3b0a550e0c..6f8b0e5d47 100644
--- a/src/components/colorPicker/ColorPickerDialogHeader.tsx
+++ b/src/components/colorPicker/ColorPickerDialogHeader.tsx
@@ -15,7 +15,7 @@ type HeaderProps = Pick<ColorPickerDialogProps, 'doneButtonColor' | 'accessibili
   onDonePressed: () => void;
 };
 
-const Header = (props: HeaderProps) => {
+const ColorPickerDialogHeader = (props: HeaderProps) => {
   const {onDismiss, accessibilityLabels, testID, doneButtonColor, valid, onDonePressed} = props;
 
   return (
@@ -41,7 +41,7 @@ const Header = (props: HeaderProps) => {
   );
 };
 
-export default Header;
+export default ColorPickerDialogHeader;
 
 const styles = StyleSheet.create({
   header: {
diff --git a/src/components/colorPicker/ColorPickerDialogSliders.tsx b/src/components/colorPicker/ColorPickerDialogSliders.tsx
index 335d89c691..19f87cb416 100644
--- a/src/components/colorPicker/ColorPickerDialogSliders.tsx
+++ b/src/components/colorPicker/ColorPickerDialogSliders.tsx
@@ -11,7 +11,7 @@ type SlidersProps = Pick<ColorPickerDialogProps, 'migrate'> & {
   onSliderValueChange: (value: HSLColor) => void;
 };
 
-const Sliders = (props: SlidersProps) => {
+const ColorPickerDialogSliders = (props: SlidersProps) => {
   const {keyboardHeight, color, migrate, onSliderValueChange} = props;
   const colorValue = color.a === 0 ? Colors.getHSL(Colors.$backgroundInverted) : color;
   
@@ -29,7 +29,7 @@ const Sliders = (props: SlidersProps) => {
   );
 };
 
-export default Sliders;
+export default ColorPickerDialogSliders;
 
 const styles = StyleSheet.create({
   sliderGroup: {
diff --git a/src/components/colorPicker/ColorPickerPreview.tsx b/src/components/colorPicker/ColorPickerPreview.tsx
index e67f19e32f..1d800ca2ea 100644
--- a/src/components/colorPicker/ColorPickerPreview.tsx
+++ b/src/components/colorPicker/ColorPickerPreview.tsx
@@ -16,7 +16,7 @@ type PreviewProps = Pick<ColorPickerDialogProps, 'accessibilityLabels' | 'previe
   onChangeText: (value: string) => void;
   onFocus: () => void;
 };
-const Preview = (props: PreviewProps) => {
+const ColorPickerPreview = (props: PreviewProps) => {
   const {color, text, onChangeText, previewInputStyle, onFocus, accessibilityLabels, testID} = props;
   const textInput = useRef<TextInput>(null);
 
@@ -77,7 +77,7 @@ const Preview = (props: PreviewProps) => {
   );
 };
 
-export default Preview;
+export default ColorPickerPreview;
 
 const styles = StyleSheet.create({
   header: {
diff --git a/src/components/connectionStatusBar/Types.tsx b/src/components/connectionStatusBar/Types.tsx
deleted file mode 100644
index 8ea24a15b0..0000000000
--- a/src/components/connectionStatusBar/Types.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {PureComponent} from 'react';
-
-export type ConnectionStatusBarProps = {
-  /**
-   * Text to show as the status
-   */
-  label?: string;
-  /**
-   * Handler to get connection change events propagation
-   */
-  onConnectionChange?: (isConnected: boolean, isInitial: boolean) => void;
-  /**
-   * Text to show as the status
-   */
-  allowDismiss?: boolean;
-  /**
-   * Use absolute position for the component
-   */
-  useAbsolutePosition?: boolean;
-};
-
-export type ConnectionStatusBarState = {
-  /* Current connection type  */
-  type?: string;
-  isConnected: boolean;
-  isCancelled: boolean;
-};
-
-export const DEFAULT_PROPS = {
-  label: 'No internet. Check your connection.',
-  allowDismiss: false,
-  useAbsolutePosition: true
-};
-
-/**
- * @description: Top bar to show a "no internet" connection status. Note: Run on real device for best results
- * @image: https://user-images.githubusercontent.com/33805983/34683190-f3b1904c-f4a9-11e7-9d46-9a340bd35448.png, https://user-images.githubusercontent.com/33805983/34484206-edc6c6e4-efcb-11e7-88b2-cd394c19dd5e.png
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ConnectionStatusBarScreen.tsx
- * @notes: The component requires installing the '@react-native-community/netinfo' native library
- */
-// @ts-ignore
-class FakeConnectionStatusBarForDocs extends PureComponent<ConnectionStatusBarProps, ConnectionStatusBarState> { // eslint-disable-line
-  static displayName = 'ConnectionStatusBar';
-
-  static defaultProps = DEFAULT_PROPS;
-
-  render() {
-    return null;
-  }
-}
diff --git a/src/components/connectionStatusBar/index.tsx b/src/components/connectionStatusBar/index.tsx
index f24cd7180c..903481ce50 100644
--- a/src/components/connectionStatusBar/index.tsx
+++ b/src/components/connectionStatusBar/index.tsx
@@ -6,7 +6,7 @@ import {Colors, Typography} from '../../style';
 import TouchableOpacity from '../touchableOpacity';
 import View from '../view';
 import {Constants, asBaseComponent} from '../../commons/new';
-import {ConnectionStatusBarProps, ConnectionStatusBarState, DEFAULT_PROPS} from './Types';
+import {ConnectionStatusBarProps, ConnectionStatusBarState, DEFAULT_PROPS} from './types';
 export {ConnectionStatusBarProps};
 
 /**
diff --git a/src/components/connectionStatusBar/types.ts b/src/components/connectionStatusBar/types.ts
new file mode 100644
index 0000000000..ff1e865cb7
--- /dev/null
+++ b/src/components/connectionStatusBar/types.ts
@@ -0,0 +1,31 @@
+export type ConnectionStatusBarProps = {
+  /**
+   * Text to show as the status
+   */
+  label?: string;
+  /**
+   * Handler to get connection change events propagation
+   */
+  onConnectionChange?: (isConnected: boolean, isInitial: boolean) => void;
+  /**
+   * Text to show as the status
+   */
+  allowDismiss?: boolean;
+  /**
+   * Use absolute position for the component
+   */
+  useAbsolutePosition?: boolean;
+};
+
+export type ConnectionStatusBarState = {
+  /* Current connection type  */
+  type?: string;
+  isConnected: boolean;
+  isCancelled: boolean;
+};
+
+export const DEFAULT_PROPS = {
+  label: 'No internet. Check your connection.',
+  allowDismiss: false,
+  useAbsolutePosition: true
+};
diff --git a/src/components/dateTimePicker/dateTimePicker.api.json b/src/components/dateTimePicker/dateTimePicker.api.json
index e026fd8900..0d34319d20 100644
--- a/src/components/dateTimePicker/dateTimePicker.api.json
+++ b/src/components/dateTimePicker/dateTimePicker.api.json
@@ -66,7 +66,17 @@
       "name": "display",
       "type": "string",
       "description": "Defines the visual display of the picker. The default value is 'spinner' on iOS and 'default' on Android. The list of all possible values are default, spinner, calendar or clock on Android and default, spinner, compact or inline for iOS. Full list can be found here: https://github.com/react-native-datetimepicker/datetimepicker#display-optional"
+    },
+    {
+      "name": "confirmButtonProps",
+      "type": "ButtonProps",
+      "description": "Confirm button props"
+    },
+    {
+      "name": "cancelButtonProps",
+      "type": "ButtonProps",
+      "description": "Cancel button props"
     }
   ],
   "snippet": ["<DateTimePicker title={'Select time'$1} placeholder={'Placeholder'$2} mode={'time'$3}/>"]
-}
\ No newline at end of file
+}
diff --git a/src/components/dateTimePicker/index.tsx b/src/components/dateTimePicker/index.tsx
index 9db96d630f..b87a259724 100644
--- a/src/components/dateTimePicker/index.tsx
+++ b/src/components/dateTimePicker/index.tsx
@@ -18,7 +18,7 @@ import TextField, {TextFieldProps, TextFieldMethods} from '../textField';
 import type {DialogMigrationProps} from '../../incubator/Dialog';
 import {DialogProps} from '../dialog';
 import View from '../view';
-import Button from '../button';
+import Button, {ButtonProps} from '../button';
 import ExpandableOverlay, {ExpandableOverlayMethods, RenderCustomOverlayProps} from '../../incubator/expandableOverlay';
 import useOldApi, {OldApiProps} from './useOldApi';
 
@@ -93,6 +93,14 @@ export type DateTimePickerProps = OldApiProps &
      * Allows changing the visual display of the picker
      */
     display?: string;
+    /**
+     * Confirm button props
+     */
+    confirmButtonProps?: ButtonProps;
+    /**
+     * Cancel button props
+     */
+    cancelButtonProps?: ButtonProps;
   };
 
 type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
@@ -131,6 +139,8 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
     headerStyle,
     testID,
     display = Constants.isIOS ? 'spinner' : undefined,
+    confirmButtonProps,
+    cancelButtonProps,
     ...others
   } = props;
 
@@ -231,10 +241,17 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
           link
           iconSource={Assets.icons.x}
           iconStyle={{tintColor: Colors.$iconDefault}}
-          onPress={toggleExpandableOverlay}
           testID={`${testID}.cancel`}
+          {...cancelButtonProps}
+          onPress={toggleExpandableOverlay}
+        />
+        <Button
+          link
+          iconSource={Assets.icons.check}
+          testID={`${testID}.done`}
+          {...confirmButtonProps}
+          onPress={onDonePressed}
         />
-        <Button link iconSource={Assets.icons.check} onPress={onDonePressed} testID={`${testID}.done`}/>
       </View>
     );
   };
diff --git a/src/components/icon/index.tsx b/src/components/icon/index.tsx
index 3c09e1ce42..5f862a2af4 100644
--- a/src/components/icon/index.tsx
+++ b/src/components/icon/index.tsx
@@ -88,6 +88,8 @@ const Icon = forwardRef((props: Props, ref: any) => {
 
   const renderImage = () => (
     <Image
+      accessible={false}
+      accessibilityRole={'image'}
       fsTagName={recorderTag}
       {...others}
       ref={ref}
diff --git a/src/components/listItem/types.tsx b/src/components/listItem/types.ts
similarity index 100%
rename from src/components/listItem/types.tsx
rename to src/components/listItem/types.ts
diff --git a/src/components/loaderScreen/types.tsx b/src/components/loaderScreen/types.ts
similarity index 61%
rename from src/components/loaderScreen/types.tsx
rename to src/components/loaderScreen/types.ts
index e1d2276ca8..45c3a5e366 100644
--- a/src/components/loaderScreen/types.tsx
+++ b/src/components/loaderScreen/types.ts
@@ -1,4 +1,3 @@
-import {PureComponent} from 'react';
 import {ActivityIndicatorProps, TextStyle, ViewStyle} from 'react-native';
 
 export type LoaderScreenProps = ActivityIndicatorProps & {
@@ -31,17 +30,3 @@ export type LoaderScreenProps = ActivityIndicatorProps & {
      */
     containerStyle?: ViewStyle;
 };
-
-
-/**
- * @description: Component that shows a full screen with an activity indicator
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/LoadingScreen.tsx
- */
-// @ts-ignore
-class FakeLoaderScreenForDocs extends PureComponent<LoaderScreenProps> { // eslint-disable-line
-  static displayName = 'LoaderScreen';
-
-  render() {
-    return null;
-  }
-}
diff --git a/src/components/picker/Picker.driver.new.ts b/src/components/picker/Picker.driver.new.ts
index aeb60411cc..221fa393f8 100644
--- a/src/components/picker/Picker.driver.new.ts
+++ b/src/components/picker/Picker.driver.new.ts
@@ -42,16 +42,16 @@ export const PickerDriver = (props: ComponentProps) => {
     doneButtonDriver.press();
   };
 
-  const isOpen = (useDialog?: boolean): boolean => {
-    if (useDialog) {
-      return dialogDriver.getModal().isVisible();
+  const isOpen = (): boolean => {
+    if (dialogDriver.exists()) {
+      return dialogDriver.isVisible();
     }
     return modalDriver.exists() && modalDriver.isVisible();
   };
 
-  const dismissDialog = (useDialog?: boolean): void => {
-    if (useDialog) {
-      dialogDriver.getModal().pressOnBackground();
+  const dismissDialog = (): void => {
+    if (dialogDriver.isVisible()) {
+      dialogDriver.pressOnBackground();
     }
   };
 
diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index b19a57435d..a8f8ee7d43 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -28,13 +28,14 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     searchPlaceholder = 'Search...',
     onSearchChange,
     renderCustomSearch,
-    renderCustomDialogHeader,
+    renderHeader,
     useSafeArea,
     useDialog,
     mode,
     testID
   } = props;
   const context = useContext(PickerContext);
+
   const [wheelPickerValue, setWheelPickerValue] = useState<PickerSingleValue>(context.value ?? items?.[0].value);
   // TODO: Might not need this memoized style, instead we can move it to a stylesheet
   const wrapperContainerStyle = useMemo(() => {
@@ -109,7 +110,6 @@ const PickerItemsList = (props: PickerItemsListProps) => {
 
   const renderCancel = () => {
     const {cancelButtonProps, cancelLabel, onCancel} = topBarProps ?? {};
-
     return (
       <>
         {cancelLabel ? (
@@ -123,12 +123,13 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
-  const renderWheel = () => {
-    const {cancelButtonProps, cancelLabel, doneLabel, title, titleStyle, containerStyle, useSafeArea} =
+  const renderPickerHeader = () => {
+    const {cancelButtonProps, cancelLabel, doneLabel, title, titleStyle, containerStyle, onDone, onCancel} =
       topBarProps ?? {};
-
-    return (
-      <View useSafeArea={useSafeArea}>
+    if (renderHeader) {
+      return renderHeader?.({onDone, onCancel});
+    } else if (useWheelPicker) {
+      return (
         <View row spread padding-page style={containerStyle}>
           {(cancelButtonProps || cancelLabel) && renderCancel()}
           <Text style={titleStyle}>{title}</Text>
@@ -136,6 +137,15 @@ const PickerItemsList = (props: PickerItemsListProps) => {
             {doneLabel ?? 'Select'}
           </Text>
         </View>
+      );
+    } else if (!useDialog || mode === PickerModes.MULTI) {
+      return <Modal.TopBar testID={`${props.testID}.topBar`} {...topBarProps}/>;
+    }
+  };
+
+  const renderWheel = () => {
+    return (
+      <View useSafeArea={useSafeArea}>
         <WheelPicker
           flatListProps={listProps}
           initialValue={context.value as PickerSingleValue}
@@ -146,25 +156,21 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
-  const renderPickerHeader = () => {
-    if (renderCustomDialogHeader) {
-      return renderCustomDialogHeader?.({onDone: topBarProps?.onDone, onCancel: topBarProps?.onCancel});
-    } else if (!useDialog || mode === PickerModes.MULTI) {
-      return <Modal.TopBar testID={`${props.testID}.topBar`} {...topBarProps}/>;
-    }
+  const renderContent = () => {
+    return useWheelPicker ? (
+      renderWheel()
+    ) : (
+      <>
+        {renderSearchInput()}
+        {renderList()}
+      </>
+    );
   };
 
   return (
     <View bg-$backgroundDefault style={wrapperContainerStyle} useSafeArea={useSafeArea}>
-      {!useWheelPicker && (
-        <>
-          {renderPickerHeader()}
-          {renderSearchInput()}
-          {renderList()}
-        </>
-      )}
-
-      {useWheelPicker && renderWheel()}
+      {renderPickerHeader()}
+      {renderContent()}
     </View>
   );
 };
diff --git a/src/components/picker/__tests__/index.spec.tsx b/src/components/picker/__tests__/index.spec.tsx
index 16ec487c05..f134228bf8 100644
--- a/src/components/picker/__tests__/index.spec.tsx
+++ b/src/components/picker/__tests__/index.spec.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {act, render, waitFor} from '@testing-library/react-native';
+import {act, render, waitFor, screen} from '@testing-library/react-native';
 import Picker from '../index';
 import {PickerDriver} from '../Picker.driver.new';
 const countries = [
@@ -27,7 +27,9 @@ const getDriver = (props?: any) => {
   return PickerDriver({renderTree: render(<TestCase {...props}/>), testID});
 };
 
+const onPress = jest.fn();
 const onDismiss = jest.fn();
+const onShow = jest.fn();
 
 describe('Picker', () => {
   beforeEach(() => {
@@ -35,22 +37,9 @@ describe('Picker', () => {
   });
 
   describe('Modal', () => {
-    describe('Test value', () => {
-      it('Get correct value of a single item', () => {
-        const driver = getDriver({value: countries[2].value});
-        expect(driver.getValue()).toEqual(countries[2].label);
-      });
-
-      it('Get correct value of multiple selected items', () => {
-        const driver = getDriver({value: [countries[2].value, countries[4].value]});
-        expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
-      });
-    });
-
     describe('Test open', () => {
       it('Should open when enabled', () => {
         const driver = getDriver();
-
         expect(driver.isOpen()).toBeFalsy();
         driver.open();
         expect(driver.isOpen()).toBeTruthy();
@@ -58,7 +47,6 @@ describe('Picker', () => {
 
       it('Should not open when disabled', () => {
         const driver = getDriver({editable: false});
-
         expect(driver.isOpen()).toBeFalsy();
         driver.open();
         expect(driver.isOpen()).toBeFalsy();
@@ -67,19 +55,28 @@ describe('Picker', () => {
 
     it('Test close', () => {
       const driver = getDriver();
-
-      expect(driver.isOpen()).toBeFalsy();
       driver.open();
       expect(driver.isOpen()).toBeTruthy();
       driver.cancel();
       expect(driver.isOpen()).toBeFalsy();
     });
 
+    describe('Test value', () => {
+      it('Get correct value of a single item', () => {
+        const driver = getDriver({value: countries[2].value});
+        expect(driver.getValue()).toEqual(countries[2].label);
+      });
+
+      it('Get correct value of multiple selected items', () => {
+        const driver = getDriver({value: [countries[2].value, countries[4].value]});
+        expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
+      });
+    });
+
     describe('Test selection', () => {
       it('Should select a single item', () => {
         const driver = getDriver();
         expect(driver.getValue()).toEqual('');
-        expect(driver.isOpen()).toBeFalsy();
         driver.open();
         expect(driver.isOpen()).toBeTruthy();
         driver.selectItem(countries[2].label);
@@ -90,7 +87,6 @@ describe('Picker', () => {
       it('Should select multiple items', () => {
         const driver = getDriver({mode: 'MULTI'});
         expect(driver.getValue()).toEqual('');
-        expect(driver.isOpen()).toBeFalsy();
         driver.open();
         expect(driver.isOpen()).toBeTruthy();
         driver.selectItem(countries[2].label);
@@ -100,29 +96,73 @@ describe('Picker', () => {
       });
     });
 
-    it('Test onDismiss', () => {
-      const driver = getDriver({
-        pickerModalProps: {
-          onDismiss
-        }
+    it('Test onPress', () => {
+      const driver = getDriver({onPress});
+      driver.open();
+      expect(onPress).toHaveBeenCalled();
+    });
+
+    describe('Test pickerModalProps', () => {
+      it('Test onDismiss', () => {
+        const driver = getDriver({
+          pickerModalProps: {
+            onDismiss
+          }
+        });
+        driver.open();
+        expect(driver.isOpen()).toBeTruthy();
+        driver.cancel();
+        expect(driver.isOpen()).toBeFalsy();
+        expect(onDismiss).toHaveBeenCalledTimes(2); // TODO: this should be 1
       });
 
-      expect(driver.isOpen()).toBeFalsy();
-      driver.open();
-      expect(driver.isOpen()).toBeTruthy();
-      driver.cancel();
-      expect(driver.isOpen()).toBeFalsy();
-      expect(onDismiss).toHaveBeenCalledTimes(2); // TODO: this should be 1
+      // TODO: this test is not passing yet
+      // The onShow function get's called when the Modal is fully opened, tried to use act and waitFor to wait for fully open but it didn't work
+      it.skip('Test onShow passed via pickerModalProps', async () => {
+        const driver = getDriver({
+          pickerModalProps: {
+            onShow
+          }
+        });
+        expect(driver.isOpen()).toBeFalsy();
+        jest.useFakeTimers();
+        expect(driver.isOpen()).toBeTruthy();
+        expect(onShow).toHaveBeenCalled();
+      });
+
+      describe('Test Modal TopBar', () => {
+        const modalProps = {mode: 'MULTI', topBarProps: {cancelLabel: 'Cancel'}};
+        it('should close and select items when pressing on done button', () => {
+          const driver = getDriver(modalProps);
+          driver.open();
+          expect(driver.isOpen()).toBeTruthy();
+          driver.selectItem(countries[2].label);
+          driver.selectItem(countries[4].label);
+          driver.done();
+          expect(driver.isOpen()).toBeFalsy();
+          expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
+        });
+
+        it('should close without selecting items when pressing on cancel button', () => {
+          const driver = getDriver(modalProps);
+          driver.open();
+          expect(driver.isOpen()).toBeTruthy();
+          driver.selectItem(countries[2].label);
+          driver.selectItem(countries[4].label);
+          driver.cancel();
+          expect(driver.getValue()).toEqual(``);
+          expect(driver.isOpen()).toBeFalsy();
+        });
+      });
     });
   });
 
-  // TODO: this is a work in progress, the tests are not passing yet
-  describe.skip('Dialog', () => {
+  describe('Dialog', () => {
+    const dialogProps = {useDialog: true, customPickerProps: {migrateDialog: true}};
     describe('Test value', () => {
       it('Get correct value of a single item', () => {
         const driver = getDriver({
-          useDialog: true,
-          customPickerProps: {migrateDialog: true},
+          ...dialogProps,
           value: countries[2].value
         });
         expect(driver.getValue()).toEqual(countries[2].label);
@@ -130,92 +170,125 @@ describe('Picker', () => {
 
       it('Get correct value of multiple selected items', () => {
         const driver = getDriver({
-          useDialog: true,
-          customPickerProps: {migrateDialog: true},
+          ...dialogProps,
           value: [countries[2].value, countries[4].value]
         });
         expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
       });
     });
 
-    describe('Test open', () => {
+    describe('Test open/close', () => {
       it('Should open when enabled', async () => {
-        const driver = getDriver({useDialog: true, customPickerProps: {migrateDialog: true}});
-
+        const driver = getDriver(dialogProps);
         expect(driver.isOpen()).toBeFalsy();
-        // driver.open();
-        // expect(driver.isOpen()).toBeTruthy();
         jest.useFakeTimers();
         act(() => driver.open());
         jest.runAllTimers();
-        // advanceAnimationByTime(10000);
-        // await new Promise(r => setTimeout(r, 1000));
         await waitFor(() => expect(driver.isOpen()).toBeTruthy());
       });
 
       it('Should not open when disabled', () => {
-        const driver = getDriver({useDialog: true, customPickerProps: {migrateDialog: true}, editable: false});
-
+        const driver = getDriver({...dialogProps, editable: false});
         expect(driver.isOpen()).toBeFalsy();
         driver.open();
         expect(driver.isOpen()).toBeFalsy();
       });
-    });
-
-    it('Test close', () => {
-      const driver = getDriver({useDialog: true, customPickerProps: {migrateDialog: true}});
 
-      expect(driver.isOpen()).toBeFalsy();
-      driver.open();
-      expect(driver.isOpen()).toBeTruthy();
-      driver.cancel();
-      expect(driver.isOpen()).toBeFalsy();
+      it('Test close', async () => {
+        const driver = getDriver(dialogProps);
+        expect(driver.isOpen()).toBeFalsy();
+        act(() => driver.open());
+        await waitFor(() => expect(driver.isOpen()).toBeTruthy());
+        act(() => driver.dismissDialog());
+        await waitFor(() => expect(driver.dismissDialog()).toBeFalsy());
+      });
     });
 
     describe('Test selection', () => {
-      it('Should select a single item', () => {
-        const driver = getDriver({useDialog: true, customPickerProps: {migrateDialog: true}});
-        expect(driver.getValue()).toEqual(undefined);
-        expect(driver.isOpen()).toBeFalsy();
-        driver.open();
-        expect(driver.isOpen()).toBeTruthy();
+      it('Should select a single item', async () => {
+        const driver = getDriver(dialogProps);
+        expect(driver.getValue()).toEqual('');
+        act(() => driver.open());
+        await waitFor(() => expect(driver.isOpen()).toBeTruthy());
         driver.selectItem(countries[2].label);
-        expect(driver.isOpen()).toBeFalsy();
+        act(() => driver.dismissDialog());
+        await waitFor(() => expect(driver.isOpen()).toBeFalsy());
         expect(driver.getValue()).toEqual(countries[2].label);
       });
 
-      it('Should select multiple items', () => {
-        const driver = getDriver({useDialog: true, customPickerProps: {migrateDialog: true}, mode: 'MULTI'});
-        expect(driver.getValue()).toEqual(undefined);
+      it('Should select multiple items', async () => {
+        const driver = getDriver({...dialogProps, mode: 'MULTI'});
+        expect(driver.getValue()).toEqual('');
         expect(driver.isOpen()).toBeFalsy();
-        driver.open();
-        expect(driver.isOpen()).toBeTruthy();
+        act(() => driver.open());
+        await waitFor(() => expect(driver.isOpen()).toBeTruthy());
         driver.selectItem(countries[2].label);
         driver.selectItem(countries[4].label);
         driver.done();
+        await waitFor(() => expect(driver.isOpen()).toBeFalsy());
         expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
       });
     });
 
-    it('Test onDismiss', () => {
+    it('Test onDismiss', async () => {
       const driver = getDriver({
-        useDialog: true,
-        customPickerProps: {migrateDialog: true},
-        pickerModalProps: {
-          onDismiss
+        ...dialogProps,
+        customPickerProps: {
+          dialogProps: {
+            onDismiss
+          }
         }
       });
-
       expect(driver.isOpen()).toBeFalsy();
-      driver.open();
-      expect(driver.isOpen()).toBeTruthy();
-      driver.cancel();
-      expect(driver.isOpen()).toBeFalsy();
-      expect(onDismiss).toHaveBeenCalledTimes(2); // TODO: this should be 1
+      act(() => driver.open());
+      await waitFor(() => expect(driver.isOpen()).toBeTruthy());
+      act(() => driver.dismissDialog());
+      await waitFor(() => expect(driver.dismissDialog()).toBeFalsy());
+      expect(onDismiss).toHaveBeenCalledTimes(1);
     });
   });
 
-  // TODO: add tests for WheelPicker as well
+  // TODO: add tests for WheelPicker
+  // Note: the picker dialog should be opened and then the wheel picker should be rendered, this is the main issue with testing it for now
   // describe.skip('WheelPicker', () => {
   // });
+
+  //TODO: add more tests for different props
+  describe('Picker field types', () => {
+    describe('Test filter field type', () => {
+      const placeholderText = 'Select a Filter';
+      it('should render a filter picker', () => {
+        const driver = getDriver({fieldType: 'filter', placeholder: placeholderText});
+        expect(driver.isOpen()).toBeFalsy();
+        const label = screen.getByTestId(`${testID}.filter.type.label`);
+        expect(label).toBeTruthy();
+        expect(label.props.children).toEqual(placeholderText);
+      });
+    });
+    describe('Test settings field type', () => {
+      const labelText = 'Settings';
+      const placeholderText = 'Select a setting';
+      it('should render a settings picker with label', async () => {
+        const driver = getDriver({fieldType: 'settings', label: labelText, placeholder: placeholderText});
+        expect(driver.isOpen()).toBeFalsy();
+        const label = screen.getByTestId(`${testID}.settings.type.label`);
+        const placeholder = screen.getByTestId(`${testID}.settings.type.placeholder`);
+        expect(label).toBeTruthy();
+        expect(placeholder).toBeTruthy();
+        expect(label.props.children).toEqual(labelText);
+        expect(placeholder.props.children).toEqual(labelText);
+      });
+
+      it('should render a settings picker with placeholder', async () => {
+        const driver = getDriver({fieldType: 'settings', placeholder: placeholderText});
+        expect(driver.isOpen()).toBeFalsy();
+        const label = screen.getByTestId(`${testID}.settings.type.label`);
+        const placeholder = screen.getByTestId(`${testID}.settings.type.placeholder`);
+        expect(label).toBeTruthy();
+        expect(placeholder).toBeTruthy();
+        expect(label.props.children).toEqual(undefined);
+        expect(placeholder.props.children).toEqual(placeholderText);
+      });
+    });
+  });
 });
diff --git a/src/components/picker/helpers/__tests__/usePickerLabel.spec.ts b/src/components/picker/helpers/__tests__/usePickerLabel.spec.ts
new file mode 100644
index 0000000000..c2db686de5
--- /dev/null
+++ b/src/components/picker/helpers/__tests__/usePickerLabel.spec.ts
@@ -0,0 +1,75 @@
+import {renderHook} from '@testing-library/react-hooks';
+import usePickerLabel from '../usePickerLabel';
+
+const colors = [
+  {value: 'red', label: 'Red'},
+  {
+    value: 'green',
+    label: 'Green',
+    listItemProps: {subtitle: 'Subtitle'}
+  },
+  {
+    value: 'blue',
+    label: 'Blue',
+    listItemProps: {
+      subtitleLines: 2,
+      subtitle: 'Subtitle with\n2 lines of text'
+    }
+  },
+  {value: 'purple', label: 'Purple', disabled: true},
+  {value: 'yellow', label: 'Yellow'},
+  {value: 'grey', label: 'Grey'}
+];
+
+describe('usePickerLabel hook tests', () => {
+  const makeSUT = ({
+    value,
+    items,
+    getLabel
+    // getItemLabel,
+    // accessibilityLabel,
+    // accessibilityHint,
+    // placeholder
+  }) => {
+    return renderHook(() =>
+      usePickerLabel({
+        value,
+        items,
+        getLabel
+        // getItemLabel,
+        // accessibilityLabel,
+        // accessibilityHint,
+        // placeholder
+      }));
+  };
+
+  it('expect label to equal an empty string when value is undefined', () => {
+    const sut = makeSUT({items: colors, value: undefined, getLabel: undefined});
+    expect(sut.result.current.label).toEqual('');
+  });
+
+  it('expect label to equal an empty string when value is null', () => {
+    const sut = makeSUT({items: colors, value: null, getLabel: undefined});
+    expect(sut.result.current.label).toEqual('');
+  });
+
+  it('expect label to equal returned string when getLabel passed', () => {
+    const sut = makeSUT({items: colors, value: null, getLabel: () => 'Some label'});
+    expect(sut.result.current.label).toEqual('Some label');
+  });
+
+  it('expect label to equal array of values when value is array', () => {
+    const sut = makeSUT({items: colors, value: ['red', 'green'], getLabel: undefined});
+    expect(sut.result.current.label).toEqual('Red, Green');
+  });
+
+  it('expect label to equal selected item label when value equals item value', () => {
+    const sut = makeSUT({items: colors, value: 'red', getLabel: undefined});
+    expect(sut.result.current.label).toEqual('Red');
+  });
+
+  it('expect label to equal empty string when no items passed', () => {
+    const sut = makeSUT({items: undefined, value: 'Some string', getLabel: undefined});
+    expect(sut.result.current.label).toEqual('');
+  });
+});
diff --git a/src/components/picker/helpers/useFieldType.tsx b/src/components/picker/helpers/useFieldType.tsx
index d09bf52f32..9b2bd215fe 100644
--- a/src/components/picker/helpers/useFieldType.tsx
+++ b/src/components/picker/helpers/useFieldType.tsx
@@ -8,13 +8,13 @@ import {Typography} from '../../../style';
 
 type UseFieldTypeProps = Pick<
   PickerProps,
-  'fieldType' | 'preset' | 'trailingAccessory' | 'label' | 'placeholder' | 'style' | 'labelStyle'
+  'fieldType' | 'preset' | 'trailingAccessory' | 'label' | 'placeholder' | 'style' | 'labelStyle' | 'testID'
 >;
 
 const dropdown = require('../assets/dropdown.png');
 
 const useFieldType = (props: UseFieldTypeProps) => {
-  const {fieldType, preset, trailingAccessory, label, placeholder, style, labelStyle} = props;
+  const {fieldType, preset, trailingAccessory, label, placeholder, style, labelStyle, testID} = props;
 
   const propsByFieldType = useMemo(() => {
     if (fieldType === PickerFieldTypes.filter) {
@@ -35,17 +35,17 @@ const useFieldType = (props: UseFieldTypeProps) => {
   const pickerInnerInput = useMemo(() => {
     if (fieldType === PickerFieldTypes.filter) {
       return (
-        <Text text70 numberOfLines={1} style={style}>
+        <Text text70 numberOfLines={1} style={style} testID={`${testID}.filter.type.label`}>
           {_.isEmpty(label) ? placeholder : label}
         </Text>
       );
     } else if (fieldType === PickerFieldTypes.settings) {
       return (
         <View flexG row spread>
-          <Text text70 style={labelStyle}>
+          <Text text70 style={labelStyle} testID={`${testID}.settings.type.label`}>
             {label}
           </Text>
-          <Text text70 $textPrimary style={style}>
+          <Text text70 $textPrimary style={style} testID={`${testID}.settings.type.placeholder`}>
             {_.isEmpty(label) ? placeholder : label}
           </Text>
         </View>
diff --git a/src/components/picker/helpers/useNewPickerProps.tsx b/src/components/picker/helpers/useNewPickerProps.tsx
new file mode 100644
index 0000000000..583170e183
--- /dev/null
+++ b/src/components/picker/helpers/useNewPickerProps.tsx
@@ -0,0 +1,36 @@
+import {PickerProps} from '../types';
+import {ExpandableOverlayProps} from '../../../incubator/expandableOverlay';
+import {Constants} from '../../../commons/new';
+
+const useNewPickerProps = (props: PickerProps) => {
+  const {
+    renderCustomDialogHeader,
+    renderPicker,
+    renderCustomModal,
+    onShow,
+    pickerModalProps,
+    customPickerProps,
+    topBarProps,
+    enableModalBlur,
+    renderInput,
+    renderHeader,
+    renderOverlay
+  } = props;
+
+  const modalProps: ExpandableOverlayProps['modalProps'] = {
+    animationType: 'slide',
+    transparent: Constants.isIOS && enableModalBlur,
+    enableModalBlur: Constants.isIOS && enableModalBlur,
+    onRequestClose: topBarProps?.onCancel
+  };
+
+  const newProps: PickerProps = {
+    renderHeader: renderCustomDialogHeader || renderHeader,
+    renderInput: renderPicker || renderInput,
+    renderOverlay: renderCustomModal || renderOverlay,
+    customPickerProps: {modalProps: {onShow, ...modalProps, ...pickerModalProps}, ...customPickerProps}
+  };
+  return newProps;
+};
+
+export default useNewPickerProps;
diff --git a/src/components/picker/helpers/usePickerLabel.tsx b/src/components/picker/helpers/usePickerLabel.tsx
index 0ac82c0979..12224e1a08 100644
--- a/src/components/picker/helpers/usePickerLabel.tsx
+++ b/src/components/picker/helpers/usePickerLabel.tsx
@@ -1,5 +1,5 @@
-import {useCallback, useMemo} from 'react';
 import _ from 'lodash';
+import {useCallback, useMemo} from 'react';
 import {PickerProps, PickerValue} from '../types';
 
 interface UsePickerLabelProps
@@ -15,12 +15,10 @@ const usePickerLabel = (props: UsePickerLabelProps) => {
 
   const getLabelsFromArray = useCallback((value: PickerValue) => {
     const itemsByValue = _.keyBy(items, 'value');
-
     return _.flow(arr =>
       _.map(arr, item => (_.isPlainObject(item) ? getItemLabel?.(item) || item?.label : itemsByValue[item]?.label)),
     arr => _.join(arr, ', '))(value);
-  },
-  [getItemLabel, items]);
+  }, [getItemLabel, items]);
 
   const _getLabel = useCallback((value: PickerValue) => {
     if (_.isFunction(getLabel) && !_.isUndefined(getLabel(value))) {
@@ -31,17 +29,9 @@ const usePickerLabel = (props: UsePickerLabelProps) => {
       return getLabelsFromArray(value);
     }
 
-    // TODO: Remove
-    // if (typeof value === 'object') {
-    //   return value?.label;
-    // }
-
-    // otherwise, extract from picker items
     const selectedItem = _.find(items, {value});
-
     return _.get(selectedItem, 'label');
-  },
-  [getLabelsFromArray, items]);
+  }, [getLabel, getLabelsFromArray, items]);
 
   const accessibilityInfo = useMemo(() => {
     const label = _getLabel(value);
@@ -51,7 +41,7 @@ const usePickerLabel = (props: UsePickerLabelProps) => {
       accessibilityHint:
         accessibilityHint ?? (label ? 'Double tap to edit' : `Goes to ${placeholder}. Suggestions will be provided`)
     };
-  }, [value, accessibilityLabel, accessibilityHint]);
+  }, [value, placeholder, accessibilityLabel, accessibilityHint, _getLabel]);
 
   return {
     getLabelsFromArray,
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index 74a715dd93..d9f4adce55 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -18,6 +18,7 @@ import usePickerLabel from './helpers/usePickerLabel';
 import usePickerSearch from './helpers/usePickerSearch';
 import useImperativePickerHandle from './helpers/useImperativePickerHandle';
 import useFieldType from './helpers/useFieldType';
+import useNewPickerProps from './helpers/useNewPickerProps';
 // import usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
 import {extractPickerItems} from './PickerPresenter';
 import {
@@ -55,22 +56,15 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     searchStyle,
     searchPlaceholder,
     renderCustomSearch,
-    renderCustomDialogHeader,
     useWheelPicker,
     useDialog,
-    renderPicker,
-    customPickerProps,
     containerStyle,
     labelStyle,
     testID,
     onChange,
     onPress,
-    onShow,
     onSearchChange,
-    renderCustomModal,
-    enableModalBlur,
     topBarProps,
-    pickerModalProps,
     listProps,
     value,
     getLabel,
@@ -87,6 +81,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     ...others
   } = themeProps;
   const {preset} = others;
+  const {renderHeader, renderInput, renderOverlay, customPickerProps} = useNewPickerProps(themeProps);
 
   const [selectedItemPosition, setSelectedItemPosition] = useState<number>(0);
   const [items, setItems] = useState<PickerItemProps[]>(propItems || extractPickerItems(themeProps));
@@ -119,6 +114,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     mode
   });
 
+  const {placeholder, style, trailingAccessory, label: propsLabel} = themeProps;
+
   const {label, accessibilityInfo} = usePickerLabel({
     value,
     items,
@@ -126,10 +123,9 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     getLabel,
     accessibilityLabel,
     accessibilityHint,
-    placeholder: themeProps.placeholder
+    placeholder
   });
 
-  const {placeholder, style, trailingAccessory} = themeProps;
   const {propsByFieldType, pickerInnerInput} = useFieldType({
     fieldType,
     preset,
@@ -137,7 +133,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     style,
     placeholder,
     labelStyle,
-    label
+    label: label || propsLabel,
+    testID
   });
 
   const onSelectedItemLayout = useCallback((event: LayoutChangeEvent) => {
@@ -173,15 +170,6 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     onDoneSelecting
   ]);
 
-  const modalProps: ExpandableOverlayProps['modalProps'] = {
-    animationType: 'slide',
-    transparent: Constants.isIOS && enableModalBlur,
-    enableModalBlur: Constants.isIOS && enableModalBlur,
-    onRequestClose: topBarProps?.onCancel,
-    onShow,
-    ...pickerModalProps
-  };
-
   const renderPickerItem = useCallback((item: PickerItemProps, index: number): React.ReactElement => {
     return <PickerItem key={`${index}-${item.value}`} {...item}/>;
   }, []);
@@ -191,12 +179,12 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
   },
   [renderPickerItem]);
 
-  const _renderCustomModal: ExpandableOverlayProps['renderCustomOverlay'] = ({
+  const _renderOverlay: ExpandableOverlayProps['renderCustomOverlay'] = ({
     visible,
     closeExpandable,
     toggleExpandable
   }) => {
-    if (renderCustomModal) {
+    if (renderOverlay) {
       const modalProps = {
         visible,
         closeModal: closeExpandable,
@@ -208,10 +196,44 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         onCancel: cancelSelect
       };
 
-      return renderCustomModal(modalProps);
+      return renderOverlay(modalProps);
     }
   };
 
+  const renderTextField = useCallback(() => {
+    return renderInput ? (
+      // @ts-expect-error - hopefully will be solved after the picker migration ends
+      renderInput(value, label)
+    ) : (
+      <TextField
+        // @ts-expect-error
+        ref={pickerRef}
+        {...others}
+        {...propsByFieldType}
+        testID={`${testID}.input`}
+        // @ts-expect-error
+        containerStyle={[containerStyle, propsByFieldType?.containerStyle]}
+        labelStyle={[propsByFieldType?.labelStyle, labelStyle]}
+        {...accessibilityInfo}
+        importantForAccessibility={'no-hide-descendants'}
+        value={label}
+        selection={Constants.isAndroid ? {start: 0} : undefined}
+      >
+        {pickerInnerInput}
+      </TextField>
+    );
+  }, [
+    renderInput,
+    pickerRef,
+    propsByFieldType,
+    containerStyle,
+    labelStyle,
+    accessibilityInfo,
+    label,
+    pickerInnerInput,
+    testID
+  ]);
+
   const expandableModalContent = useMemo(() => {
     const useItems = useWheelPicker || propItems;
     return (
@@ -231,7 +253,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         searchPlaceholder={searchPlaceholder}
         onSearchChange={_onSearchChange}
         renderCustomSearch={renderCustomSearch}
-        renderCustomDialogHeader={renderCustomDialogHeader}
+        renderHeader={renderHeader}
         listProps={listProps}
         useSafeArea={useSafeArea}
       >
@@ -252,7 +274,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     searchPlaceholder,
     _onSearchChange,
     renderCustomSearch,
-    renderCustomDialogHeader,
+    renderHeader,
     listProps,
     filteredChildren,
     useSafeArea,
@@ -261,43 +283,20 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
   ]);
 
   return (
-    //TODO : fix the ExpandableOverlay ts error
     <PickerContext.Provider value={contextValue}>
       {
-        /* @ts-expect-error */
         <ExpandableOverlay
           ref={pickerExpandable}
           useDialog={useDialog || useWheelPicker}
-          modalProps={modalProps}
-          dialogProps={customPickerProps?.dialogProps || DIALOG_PROPS}
+          dialogProps={DIALOG_PROPS}
           expandableContent={expandableModalContent}
-          renderCustomOverlay={renderCustomModal ? _renderCustomModal : undefined}
+          renderCustomOverlay={renderOverlay ? _renderOverlay : undefined}
           onPress={onPress}
           testID={testID}
           {...customPickerProps}
           disabled={themeProps.editable === false}
         >
-          {renderPicker ? (
-            // @ts-expect-error - hopefully will be solved after the picker migration ends
-            renderPicker(value, label)
-          ) : (
-            <TextField
-              // @ts-expect-error
-              ref={pickerRef}
-              {...others}
-              {...propsByFieldType}
-              testID={`${testID}.input`}
-              // @ts-expect-error
-              containerStyle={[containerStyle, propsByFieldType?.containerStyle]}
-              labelStyle={[propsByFieldType?.labelStyle, labelStyle]}
-              {...accessibilityInfo}
-              importantForAccessibility={'no-hide-descendants'}
-              value={label}
-              selection={Constants.isAndroid ? {start: 0} : undefined}
-            >
-              {pickerInnerInput}
-            </TextField>
-          )}
+          {renderTextField()}
         </ExpandableOverlay>
       }
     </PickerContext.Provider>
diff --git a/src/components/picker/types.tsx b/src/components/picker/types.ts
similarity index 63%
rename from src/components/picker/types.tsx
rename to src/components/picker/types.ts
index 1e7e70f5cf..5012a03ef7 100644
--- a/src/components/picker/types.tsx
+++ b/src/components/picker/types.ts
@@ -1,10 +1,8 @@
-import React, {PropsWithChildren, ReactNode} from 'react';
+import {PropsWithChildren, ReactNode} from 'react';
 import {FlatListProps, StyleProp, ViewStyle, TextStyle} from 'react-native';
 import {ExpandableOverlayProps, ExpandableOverlayMethods} from '../../incubator/expandableOverlay';
 import {ModalTopBarProps} from '../modal/TopBar';
-// TODO: Replace with new TextField Props after migration to new TextField has completed
-// import {TextFieldProps} from '../../../typings/components/Inputs';
-import {TextFieldMethods, TextFieldProps as NewTextFieldProps} from '../textField';
+import {TextFieldMethods, TextFieldProps} from '../textField';
 import {TouchableOpacityProps} from '../touchableOpacity';
 
 // Note: enum values are uppercase due to legacy
@@ -48,85 +46,62 @@ export interface PickerSearchStyle {
   selectionColor?: string;
 }
 
-export type PickerBaseProps = Omit<NewTextFieldProps, 'value' | 'onChange'> & {
-  /* ...TextField.propTypes, */
-  /**
-   * Use dialog instead of modal picker
-   */
-  useDialog?: boolean;
+type PickerPropsDeprecation = {
   /**
    * @deprecated
    * Temporary prop required for migration to Picker's new API
    */
   migrate?: boolean;
   /**
-   * Pass for different field type UI (form, filter or settings)
-   */
-  fieldType?: PickerFieldTypes | `${PickerFieldTypes}`;
-  /**
-   * Picker current value in the shape of {value: ..., label: ...}, for custom shape use 'getItemValue' prop
+   * @deprecated
+   * A function that extract the unique value out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
    */
-  value?: PickerValue;
+  getItemValue?: (value: PickerValue) => any;
   /**
-   * Callback for when picker value change
+   * @deprecated
+   * A function that extract the label out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
    */
-  onChange?: (value: PickerValue) => void;
+  getItemLabel?: (value: PickerValue) => string;
   /**
-   * SINGLE mode or MULTI mode
+   * @deprecated
+   * Callback for modal onShow event
+   * Instead pass onShow via customPickerProps.modalProps.onShow
    */
-  mode?: PickerModes | `${PickerModes}`;
+  onShow?: () => void;
   /**
-   * Limit the number of selected items
+   * @deprecated
+   * instead pass items
    */
-  selectionLimit?: number;
+  children?: ReactNode | undefined;
   /**
-   * Adds blur effect to picker modal (iOS only)
+   * @deprecated
+   * Render a custom header for Picker's dialog
+   * instead use renderHeader
    */
-  enableModalBlur?: boolean;
+  renderCustomDialogHeader?: (callbacks: {onDone?: () => void; onCancel?: () => void}) => React.ReactElement;
   /**
-   * Render custom picker - input will be value (see above)
+   * @deprecated
+   * Render custom picker input (the value will be passed)
    * Example:
    * renderPicker = (selectedItem) => {...}
+   * instead use renderInput
    */
   renderPicker?: RenderPicker;
-  /**
-   * Render custom picker item
-   */
-  renderItem?: (
-    value: PickerValue,
-    itemProps: PickerItemProps & {isSelected: boolean; isItemDisabled: boolean},
-    label?: string
-  ) => React.ReactElement;
-  /**
-   * Render custom picker modal (e.g ({visible, children, toggleModal}) => {...})
-   */
-  renderCustomModal?: (modalProps: RenderCustomModalProps) => React.ReactElement;
-  /**
-   * Custom picker props (when using renderPicker, will apply on the button wrapper)
-   */
-  customPickerProps?: ExpandableOverlayProps;
-  /**
-   * Add onPress callback for when pressing the picker
-   */
-  onPress?: () => void;
   /**
    * @deprecated
-   * A function that extract the unique value out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
+   * Render custom picker overlay (e.g ({visible, children, toggleModal}) => {...})
+   * instead use renderOverlay
    */
-  getItemValue?: (value: PickerValue) => any;
+  renderCustomModal?: (modalProps: RenderCustomModalProps) => React.ReactElement;
   /**
    * @deprecated
-   * A function that extract the label out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
-   */
-  getItemLabel?: (value: PickerValue) => string;
-  /**
-   * A function that returns the label to show for the selected Picker value
-   */
-  getLabel?: (value: PickerValue) => string;
-  /**
-   * The picker modal top bar props
+   * Pass props to the picker modal
+   * instead pass modalProps via customPickerProps.modalProps
    */
-  topBarProps?: ModalTopBarProps;
+  pickerModalProps?: ExpandableOverlayProps['modalProps'];
+};
+
+type PickerSearchProps = {
   /**
    * Show search input to filter picker items by label
    */
@@ -147,49 +122,111 @@ export type PickerBaseProps = Omit<NewTextFieldProps, 'value' | 'onChange'> & {
    * Render custom search input (only when passing showSearch)
    */
   renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement;
+};
+
+type PickerListProps = PickerSearchProps & {
   /**
-   * Render a custom header for Picker's dialog
-   */
-  renderCustomDialogHeader?: (callbacks: {onDone?: () => void, onCancel?: ()=> void}) => React.ReactElement;
-  /**
-   * Use wheel picker instead of a list picker
+   * Render a custom header for Picker's Overlay
    */
-  useWheelPicker?: boolean;
+  renderHeader?: (callbacks: {onDone?: () => void; onCancel?: () => void}) => React.ReactElement;
   /**
-   * Pass props to the list component that wraps the picker options (allows to control FlatList behavior)
+   * Pass props to the list component that wraps the picker items (allows to control FlatList behavior)
    */
   listProps?: Partial<FlatListProps<any>>;
   /**
-   * Pass props to the picker modal
-   */
-  pickerModalProps?: object;
-  /**
-   * Custom container style
-   */
-  containerStyle?: StyleProp<ViewStyle>;
-  /**
-   * @deprecated
-   * Callback for modal onShow event
+   * The picker modal top bar props
    */
-  onShow?: () => void;
+  topBarProps?: ModalTopBarProps;
   /**
    * Add safe area in the Picker modal view
    */
   useSafeArea?: boolean;
+};
+
+type PickerExpandableOverlayProps = {
   /**
-   * Data source for Picker
+   * Custom picker overlay props
    */
-  items?: PickerItemProps[];
+  customPickerProps?: ExpandableOverlayProps;
   /**
-   * Component test id
+   * Render custom picker overlay (e.g ({visible, children, toggleModal}) => {...})
    */
-  testID?: string;
+  renderOverlay?: (modalProps: RenderCustomModalProps) => React.ReactElement;
   /**
-   * @deprecated
+   * Add blur effect to picker modal (iOS only)
    */
-  children?: ReactNode | undefined;
+  enableModalBlur?: boolean;
 };
 
+export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
+  PickerPropsDeprecation &
+  PickerExpandableOverlayProps &
+  PickerListProps & {
+    /* ...TextField.propTypes, */
+    /**
+     * Use dialog instead of modal picker
+     */
+    useDialog?: boolean;
+    /**
+     * Use wheel picker instead of a list picker
+     */
+    useWheelPicker?: boolean;
+    /**
+     * Picker value
+     */
+    value?: PickerValue;
+    /**
+     * Callback for when picker value change
+     */
+    onChange?: (value: PickerValue) => void;
+    /**
+     * SINGLE or MULTI selection mode
+     */
+    mode?: PickerModes | `${PickerModes}`;
+    /**
+     * Limit the number of selected items
+     */
+    selectionLimit?: number;
+    /**
+     * Pass for different field type UI (form, filter or settings)
+     */
+    fieldType?: PickerFieldTypes | `${PickerFieldTypes}`;
+    /**
+     * Render custom picker input (the value will be passed)
+     * Example:
+     * renderInput = (selectedItem) => {...}
+     */
+    renderInput?: RenderPicker;
+    /**
+     * Render custom picker item
+     */
+    renderItem?: (
+      value: PickerValue,
+      itemProps: PickerItemProps & {isSelected: boolean; isItemDisabled: boolean},
+      label?: string
+    ) => React.ReactElement;
+    /**
+     * Add onPress callback for when pressing the picker
+     */
+    onPress?: () => void;
+    /**
+     * A function that returns the label to show for the selected Picker value
+     */
+    getLabel?: (value: PickerValue) => string;
+    /**
+     * Custom picker input container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Data source for Picker
+     */
+    items?: PickerItemProps[];
+    /**
+     * Component test id
+     */
+    testID?: string;
+  };
+
 export type PickerPropsWithSingle = PickerBaseProps & {
   mode?: PickerModes.SINGLE;
   value?: PickerSingleValue;
@@ -265,19 +302,20 @@ export type PickerItemsListProps = Pick<
   PropsWithChildren<PickerProps>,
   | 'topBarProps'
   | 'listProps'
-  | 'children'
+  | 'renderHeader'
+  | 'useSafeArea'
   | 'showSearch'
   | 'searchStyle'
   | 'searchPlaceholder'
   | 'onSearchChange'
   | 'renderCustomSearch'
-  | 'renderCustomDialogHeader'
-  | 'useSafeArea'
+  | 'children'
   | 'useWheelPicker'
   | 'useDialog'
   | 'mode'
   | 'testID'
 > & {
+  //TODO: after finish Picker props migration, items should be taken from PickerProps
   items?: {value: any; label: any}[];
 };
 
diff --git a/src/components/sectionsWheelPicker/__tests__/index.spec.tsx b/src/components/sectionsWheelPicker/__tests__/index.spec.tsx
index 3d504f704e..9486ea736c 100644
--- a/src/components/sectionsWheelPicker/__tests__/index.spec.tsx
+++ b/src/components/sectionsWheelPicker/__tests__/index.spec.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import SectionsWheelPicker from '../index';
 import {render} from '@testing-library/react-native';
 import {SectionsWheelPickerDriver} from '../SectionsWheelPicker.driver';
-import {sections, labels} from '../mockSections';
+import {sections, labels} from './mockSections';
 
 const testID = 'sectionsWheel';
 const onChange = jest.fn();
diff --git a/src/components/sectionsWheelPicker/mockSections.ts b/src/components/sectionsWheelPicker/__tests__/mockSections.ts
similarity index 100%
rename from src/components/sectionsWheelPicker/mockSections.ts
rename to src/components/sectionsWheelPicker/__tests__/mockSections.ts
diff --git a/src/components/stateScreen/types.tsx b/src/components/stateScreen/types.ts
similarity index 55%
rename from src/components/stateScreen/types.tsx
rename to src/components/stateScreen/types.ts
index 8a78fcd7f9..ea8f695d0c 100644
--- a/src/components/stateScreen/types.tsx
+++ b/src/components/stateScreen/types.ts
@@ -1,4 +1,3 @@
-import {PureComponent} from 'react';
 import {ImageURISource} from 'react-native';
 
 export type StateScreenProps = {
@@ -29,17 +28,3 @@ export type StateScreenProps = {
   testId?: string;
   testID?: string;
 };
-
-/**
- * @description: Component that shows a full screen for a certain state, like an empty state
- * @image: https://user-images.githubusercontent.com/33805983/34672894-f262ab84-f488-11e7-83f0-4ee0f0ac34ba.png
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/EmptyStateScreen.tsx
- */
-// @ts-ignore
-class FakeStateScreenForDocs extends PureComponent<StateScreenProps> { // eslint-disable-line
-  static displayName = 'StateScreen';
-
-  render() {
-    return null;
-  }
-}
diff --git a/src/components/textField/ClearButton.tsx b/src/components/textField/ClearButton.tsx
index 9fe9054d9b..749c6c01da 100644
--- a/src/components/textField/ClearButton.tsx
+++ b/src/components/textField/ClearButton.tsx
@@ -50,7 +50,7 @@ const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onCl
 
   return (
     //@ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
-    <View reanimated style={style}>
+    <View reanimated style={style} testID={`${testID}.container`}>
       <Button
         link
         iconSource={Assets.icons.xFlat}
diff --git a/src/components/textField/TextField.driver.new.ts b/src/components/textField/TextField.driver.new.ts
index 4dc630d2d7..43e2b2da17 100644
--- a/src/components/textField/TextField.driver.new.ts
+++ b/src/components/textField/TextField.driver.new.ts
@@ -1,8 +1,12 @@
 import _ from 'lodash';
+import {StyleSheet} from 'react-native';
 import {fireEvent} from '@testing-library/react-native';
 import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
-import {TextDriver} from '../text/Text.driver.new';
 import {usePressableDriver} from '../../testkit/new/usePressable.driver';
+import {TextDriver} from '../text/Text.driver.new';
+import {ImageDriver} from '../image/Image.driver.new';
+import {ButtonDriver} from '../button/Button.driver.new';
+import {ViewDriver} from '../view/View.driver.new';
 
 export const TextFieldDriver = (props: ComponentProps) => {
   const driver = usePressableDriver(useComponentDriver(props));
@@ -23,6 +27,22 @@ export const TextFieldDriver = (props: ComponentProps) => {
     renderTree: props.renderTree,
     testID: `${props.testID}.charCounter`
   });
+  const helperTextDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.helperText`
+  });
+  const validationIconDriver = ImageDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.validationMessage.icon`
+  });
+  const clearButtonDriver = ButtonDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.clearButton`
+  });
+  const clearButtonContainerDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.clearButton.container`
+  });
 
   const getValue = (): string | undefined => {
     return driver.getElement().props.value ?? driver.getElement().props.defaultValue;
@@ -79,6 +99,24 @@ export const TextFieldDriver = (props: ComponentProps) => {
     return charCounterDriver;
   };
 
+  const getHelperText = () => {
+    return helperTextDriver;
+  };
+
+  const getValidationIcon = () => {
+    return validationIconDriver;
+  };
+
+  const getClearButton = () => {
+    const visible = (): boolean => {
+      const transform = StyleSheet.flatten(clearButtonContainerDriver.getStyle()).transform;
+      const translate = StyleSheet.flatten(transform);
+      const translateY = translate.translateY;
+      return translateY === 0;
+    };
+    return {...clearButtonDriver, visible};
+  };
+
   return {
     ...driver,
     getValue,
@@ -89,6 +127,9 @@ export const TextFieldDriver = (props: ComponentProps) => {
     getPlaceholder,
     getLabel,
     getValidationMessage,
-    getCharCounter
+    getCharCounter,
+    getHelperText,
+    getValidationIcon,
+    getClearButton
   };
 };
diff --git a/src/components/textField/__tests__/index.driver.spec.tsx b/src/components/textField/__tests__/index.driver.spec.tsx
index e56aac54a9..15414b1e2b 100644
--- a/src/components/textField/__tests__/index.driver.spec.tsx
+++ b/src/components/textField/__tests__/index.driver.spec.tsx
@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import {render} from '@testing-library/react-native';
 import Constants from '../../../commons/Constants';
+import Assets from '../../../assets';
 import View from '../../../components/view';
 import {TextFieldDriver} from '../TextField.driver.new';
 import TextField from '../index';
@@ -10,6 +11,7 @@ const TEXT_FIELD_TEST_ID = 'text_field_test_id';
 const placeholder = 'Placeholder';
 const label = 'Label';
 const hint = 'Hint';
+const helperText = 'Helper Text';
 
 function TestCase(textFieldProps?: TextFieldProps) {
   const [value, setValue] = useState(textFieldProps?.value);
@@ -29,424 +31,562 @@ describe('TextField', () => {
     jest.clearAllMocks();
   });
 
-  describe('sanity', () => {
-    it('should render textField', () => {
-      const renderTree = render(<TestCase/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-  
-      expect(textFieldDriver.exists()).toBe(true);
-    });
-  
-    it('should render textField with correct content', () => {
-      const renderTree = render(<TestCase value={'aa'}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-  
-      expect(textFieldDriver.getValue()).toEqual('aa');
-    });
-  
-    it('should change the text correctly', () => {
-      const renderTree = render(<TestCase value={'aa'}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-  
-      expect(textFieldDriver.getValue()).toEqual('aa');
-  
-      textFieldDriver.changeText('bb');
-      expect(textFieldDriver.getValue()).toEqual('bb');
-    });
-  });
+  describe.each(['outline', 'underline', undefined])('on %s preset', preset => {
+    const defaultProps = {preset};
 
-  describe('editable', () => {
-    it('should be editable', () => {
-      const renderTree = render(<TestCase/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+    describe('sanity', () => {
+      it('should render textField', () => {
+        const renderTree = render(<TestCase {...defaultProps}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      expect(textFieldDriver.isEnabled()).toBe(true);
-    });
+        expect(textFieldDriver.exists()).toBe(true);
+      });
 
-    it('should render textField that is not editable', () => {
-      const renderTree = render(<TestCase editable={false}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+      it('should render textField with correct content', () => {
+        const renderTree = render(<TestCase {...defaultProps} value={'aa'}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      expect(textFieldDriver.isEnabled()).toBe(false);
-    });
-  });
+        expect(textFieldDriver.getValue()).toEqual('aa');
+      });
+
+      it('should change the text correctly', () => {
+        const renderTree = render(<TestCase {...defaultProps} value={'aa'}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-  describe('readonly', () => {
-    it('should render textField that is not readonly', () => {
-      const renderTree = render(<TestCase/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+        expect(textFieldDriver.getValue()).toEqual('aa');
 
-      expect(textFieldDriver.isEnabled()).toBe(true);
+        textFieldDriver.changeText('bb');
+        expect(textFieldDriver.getValue()).toEqual('bb');
+      });
     });
 
-    it('should be readonly', () => {
-      const renderTree = render(<TestCase readonly/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+    describe('editable', () => {
+      it('should be editable', () => {
+        const renderTree = render(<TestCase {...defaultProps}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      expect(textFieldDriver.isEnabled()).toBe(false);
-    });
-  });
+        expect(textFieldDriver.isEnabled()).toBe(true);
+      });
 
-  describe('placeholder', () => {
-    it('should render placeholder with correct text', () => {
-      const renderTree = render(<TestCase placeholder={'mock placeholder'}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+      it('should render textField that is not editable', () => {
+        const renderTree = render(<TestCase {...defaultProps} editable={false}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      expect(textFieldDriver.getPlaceholder().exists()).toBe(true);
-      expect(textFieldDriver.getPlaceholder().getText()).toEqual('mock placeholder');
+        expect(textFieldDriver.isEnabled()).toBe(false);
+      });
     });
 
-    it('should not render placeholder', () => {
-      const renderTree = render(<TestCase/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+    describe('readonly', () => {
+      it('should render textField that is not readonly', () => {
+        const renderTree = render(<TestCase {...defaultProps}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      expect(textFieldDriver.getPlaceholder().exists()).toBe(false);
-    });
+        expect(textFieldDriver.isEnabled()).toBe(true);
+      });
 
-    it('should not render placeholder after user changing the input text (no floating prop)', () => {
-      const renderTree = render(<TestCase placeholder={'mock placeholder'}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      expect(textFieldDriver.getPlaceholder().exists()).toBe(true);
+      it('should be readonly', () => {
+        const renderTree = render(<TestCase {...defaultProps} readonly/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      textFieldDriver.changeText('mock input value');
-      expect(textFieldDriver.getPlaceholder().exists()).toBe(false);
+        expect(textFieldDriver.isEnabled()).toBe(false);
+      });
     });
 
-    it('should render placeholder (floating) after user changing text if floatingPlaceholder prop sent', () => {
-      const renderTree = render(<TestCase placeholder={'mock placeholder'} floatingPlaceholder/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      expect(textFieldDriver.getPlaceholder().exists()).toBe(true);
+    describe('placeholder', () => {
+      it('should render placeholder with correct text', () => {
+        const renderTree = render(<TestCase {...defaultProps} placeholder={'mock placeholder'}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      textFieldDriver.changeText('mock input value');
-      expect(textFieldDriver.getPlaceholder().exists()).toBe(true);
-      expect(textFieldDriver.getPlaceholder().getText()).toEqual('mock placeholder');
-    });
-  });
+        expect(textFieldDriver.getPlaceholder().exists()).toBe(true);
+        expect(textFieldDriver.getPlaceholder().getText()).toEqual('mock placeholder');
+      });
 
-  describe('label', () => {
-    it('should not render label if prop is not passed', () => {
-      const renderTree = render(<TestCase/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+      it('should not render placeholder', () => {
+        const renderTree = render(<TestCase {...defaultProps}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      expect(textFieldDriver.getLabel().exists()).toBe(false);
-    });
+        expect(textFieldDriver.getPlaceholder().exists()).toBe(false);
+      });
 
-    it('should render a label', () => {
-      const renderTree = render(<TestCase label={'mock label'}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      expect(textFieldDriver.getLabel().exists()).toBe(true);
-      expect(textFieldDriver.getLabel().getText()).toEqual('mock label');
-    });
+      it('should not render placeholder after user changing the input text (no floating prop)', () => {
+        const renderTree = render(<TestCase {...defaultProps} placeholder={'mock placeholder'}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-    it('should not render label if floatingPlaceholder prop is passed', () => {
-      const renderTree = render(<TestCase label={'mock label'} floatingPlaceholder/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      expect(textFieldDriver.getLabel().exists()).toBe(false);
-    });
-  });
+        expect(textFieldDriver.getPlaceholder().exists()).toBe(true);
 
-  describe('validation message', () => {
-    it('should not render validationMessage if enableErrors prop not passed', () => {
-      const renderTree = render(<TestCase value={''} validationMessage={'mock message'} validateOnStart/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+        textFieldDriver.changeText('mock input value');
+        expect(textFieldDriver.getPlaceholder().exists()).toBe(false);
+      });
 
-      expect(textFieldDriver.getValidationMessage().exists()).toBe(false);
-    });
+      it('should render placeholder (floating) after user changing text if floatingPlaceholder prop sent', () => {
+        const renderTree = render(<TestCase {...defaultProps} placeholder={'mock placeholder'} floatingPlaceholder/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-    it('should render validationMessage on start if input required and validateOnStart passed', () => {
-      const renderTree = render(<TestCase value={''} validationMessage={'mock message'} enableErrors validateOnStart/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+        expect(textFieldDriver.getPlaceholder().exists()).toBe(true);
 
-      expect(textFieldDriver.getValidationMessage().exists()).toBe(true);
-      expect(textFieldDriver.getValidationMessage().getText()).toEqual('mock message');
+        textFieldDriver.changeText('mock input value');
+        expect(textFieldDriver.getPlaceholder().exists()).toBe(true);
+        expect(textFieldDriver.getPlaceholder().getText()).toEqual('mock placeholder');
+      });
     });
 
-    it('should render validationMessage when input is requires after changing the input to empty string', () => {
-      const renderTree = render(<TestCase value={''} validate={'required'} validationMessage={'mock message'} enableErrors validateOnChange/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+    describe('label', () => {
+      it('should not render label if prop is not passed', () => {
+        const renderTree = render(<TestCase {...defaultProps}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      expect(textFieldDriver.getValidationMessage().exists()).toBe(false);
-      expect(textFieldDriver.getValidationMessage().getText()).toEqual('');
+        expect(textFieldDriver.getLabel().exists()).toBe(false);
+      });
 
-      textFieldDriver.changeText('');
-      expect(textFieldDriver.getValidationMessage().exists()).toBe(true);
-      expect(textFieldDriver.getValidationMessage().getText()).toEqual('mock message');
-    });
+      it('should render a label', () => {
+        const renderTree = render(<TestCase {...defaultProps} label={'mock label'}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-    it('should display validation error message when validation fail after blur', () => {
-      const renderTree = render(<TestCase validate={'email'} validationMessage={'email is invalid'} enableErrors validateOnBlur/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      textFieldDriver.changeText('invalidEmail');
-      textFieldDriver.blur();
-      
-      expect(textFieldDriver.getValidationMessage().getText()).toEqual('email is invalid');
-    });
+        expect(textFieldDriver.getLabel().exists()).toBe(true);
+        expect(textFieldDriver.getLabel().getText()).toEqual('mock label');
+      });
 
-    it('should remove validation error message after entering a valid input', () => {
-      const renderTree = render(<TestCase value={'invalid'} validate={'email'} validationMessage={'email is invalid'} enableErrors validateOnStart validateOnChange/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      expect(textFieldDriver.getValidationMessage().getText()).toEqual('email is invalid');
-      
-      textFieldDriver.changeText('mail@mail.com');
-      expect(textFieldDriver.getValidationMessage().exists()).toEqual(false);
-    });
-  });
+      it('should not render label if floatingPlaceholder prop is passed', () => {
+        const renderTree = render(<TestCase {...defaultProps} label={'mock label'} floatingPlaceholder/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-  describe('validateOnBlur', () => {
-    it('validate is called with undefined when defaultValue is not passed', () => {
-      const renderTree = render(<TestCase validateOnBlur validationMessage={'Not valid'} validate={[validate]}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      textFieldDriver.focus();
-      textFieldDriver.blur();
-      
-      expect(validate).toHaveBeenCalledTimes(1);
-      expect(validate).toHaveBeenCalledWith(undefined);
+        expect(textFieldDriver.getLabel().exists()).toBe(false);
+      });
     });
 
-    it('validate is called with defaultValue when defaultValue is passed', () => {
-      const defaultValue = '1';
-      const renderTree = render(<TestCase validateOnBlur validationMessage={'Not valid'} validate={[validate]} defaultValue={defaultValue}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      textFieldDriver.focus();
-      textFieldDriver.blur();
-      
-      expect(validate).toHaveBeenCalledTimes(1);
-      expect(validate).toHaveBeenCalledWith(defaultValue);
-    });
-  });
+    describe('validation message', () => {
+      it('should not render validationMessage if enableErrors is undefined', () => {
+        const renderTree = render(<TestCase {...defaultProps} value={''} validationMessage={'mock message'} validateOnStart enableErrors={undefined}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-  describe('defaultValue', () => {
-    const props = {
-      testID: TEXT_FIELD_TEST_ID,
-      placeholder: 'Placeholder',
-      defaultValue: 'someDefaultValue',
-      value: 'someValue'
-    };
-
-    it('value should equal defaultValue on first render when value not passed', () => {
-      const renderTree = render(<TestCase {...props} value={undefined}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      expect(textFieldDriver.getValue()).toEqual('someDefaultValue');
-    });
+        expect(textFieldDriver.getValidationMessage().exists()).toBe(false);
+      });
 
-    it('value should equal value on first render when passed', () => {
-      const renderTree = render(<TestCase {...props} defaultValue={undefined}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      expect(textFieldDriver.getValue()).toEqual('someValue');
-    });
+      it('should not render validationMessage if enableErrors is not passed (passed by the preset)', () => {
+        const renderTree = render(<TestCase {...defaultProps} value={''} validationMessage={'mock message'} validateOnStart/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-    it.each`
-      platform    | isWeb
-      ${'web'}    | ${true}
-      ${'native'} | ${false}
-    `('on $platform should reset defaultValue when prop changed after first render', args => {
-      Constants.isWeb = args.isWeb;
+        expect(textFieldDriver.getValidationMessage().exists()).toBe(!!defaultProps?.preset);
+      });
 
-      const renderTree = render(<TestCase {...props} value={undefined}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+      it('should render validationMessage on start if input required and validateOnStart passed', () => {
+        const renderTree = render(<TestCase {...defaultProps} value={''} validationMessage={'mock message'} enableErrors validateOnStart/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      renderTree.rerender(<TestCase {...props} value={undefined} defaultValue={'someUpdatedDefaultValue'}/>);
+        expect(textFieldDriver.getValidationMessage().exists()).toBe(true);
+        expect(textFieldDriver.getValidationMessage().getText()).toEqual('mock message');
+      });
 
-      expect(textFieldDriver.getValue()).toEqual('someUpdatedDefaultValue');
-    });
-  });
+      it('should render validationMessage when input is requires after changing the input to empty string', () => {
+        const renderTree = render(<TestCase {...defaultProps} value={''} validate={'required'} validationMessage={'mock message'} enableErrors validateOnChange/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-  describe('char counter', () => {
-    it('should render char counter', () => {
-      const renderTree = render(<TestCase maxLength={10} showCharCounter/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+        expect(textFieldDriver.getValidationMessage().exists()).toBe(false);
+        expect(textFieldDriver.getValidationMessage().getText()).toEqual('');
 
-      expect(textFieldDriver.getCharCounter().exists()).toBe(true);
-    });
+        textFieldDriver.changeText('');
+        expect(textFieldDriver.getValidationMessage().exists()).toBe(true);
+        expect(textFieldDriver.getValidationMessage().getText()).toEqual('mock message');
+      });
 
-    it('should not render counter if maxLength prop not supplied', () => {
-      const renderTree = render(<TestCase showCharCounter/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+      it('should display validation error message when validation fail after blur', () => {
+        const renderTree = render(<TestCase {...defaultProps} validate={'email'} validationMessage={'email is invalid'} enableErrors validateOnBlur/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      expect(textFieldDriver.getCharCounter().exists()).toBe(false);
-    });
+        textFieldDriver.changeText('invalidEmail');
+        textFieldDriver.blur();
 
-    it('should not render counter if showCharCounter prop not supplied', () => {
-      const renderTree = render(<TestCase maxLength={10}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      expect(textFieldDriver.getCharCounter().exists()).toBe(false);
+        expect(textFieldDriver.getValidationMessage().getText()).toEqual('email is invalid');
+      });
+
+      it('should remove validation error message after entering a valid input', () => {
+        const renderTree = render(
+          <TestCase
+            {...defaultProps}
+            value={'invalid'}
+            validate={'email'}
+            validationMessage={'email is invalid'}
+            enableErrors
+            validateOnStart
+            validateOnChange
+          />
+        );
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getValidationMessage().getText()).toEqual('email is invalid');
+
+        textFieldDriver.changeText('mail@mail.com');
+        expect(textFieldDriver.getValidationMessage().exists()).toEqual(false);
+      });
     });
 
-    it('should render char counter with "0/10" if value not supplied', () => {
-      const renderTree = render(<TestCase maxLength={10} showCharCounter/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+    describe('validateOnBlur', () => {
+      it('validate is called with undefined when defaultValue is not passed', () => {
+        const renderTree = render(<TestCase {...defaultProps} validateOnBlur validationMessage={'Not valid'} validate={[validate]}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      expect(textFieldDriver.getCharCounter().getText()).toEqual('0/10');
-    });
+        textFieldDriver.focus();
+        textFieldDriver.blur();
+
+        expect(validate).toHaveBeenCalledTimes(1);
+        expect(validate).toHaveBeenCalledWith(undefined);
+      });
+
+      it('validate is called with defaultValue when defaultValue is passed', () => {
+        const defaultValue = '1';
+        const renderTree = render(<TestCase {...defaultProps} validateOnBlur validationMessage={'Not valid'} validate={[validate]} defaultValue={defaultValue}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-    it('should render char counter with correct content', () => {
-      const renderTree = render(<TestCase value={'abc'} maxLength={10} showCharCounter/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+        textFieldDriver.focus();
+        textFieldDriver.blur();
 
-      expect(textFieldDriver.getCharCounter().getText()).toEqual('3/10');
+        expect(validate).toHaveBeenCalledTimes(1);
+        expect(validate).toHaveBeenCalledWith(defaultValue);
+      });
     });
 
-    it('should update char counter after changing the text', () => {
-      const renderTree = render(<TestCase value={'ab'} maxLength={10} showCharCounter/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+    describe('validationIcon', () => {
+      it('should display validationIcon', () => {
+        const renderTree = render(
+          <TestCase
+            {...defaultProps}
+            enableErrors
+            validateOnStart
+            validate={'required'}
+            validationMessage={'This field is required'}
+            validationIcon={{source: Assets.icons.check}}
+          />
+        );
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getValidationMessage().exists()).toBe(true);
+        expect(textFieldDriver.getValidationIcon().exists()).toBe(true);
+      });
 
-      expect(textFieldDriver.getCharCounter().getText()).toEqual('2/10');
+      it('should not display validationIcon', () => {
+        const renderTree = render(<TestCase {...defaultProps} enableErrors validateOnStart validate={'required'} validationMessage={'This field is required'}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-      textFieldDriver.changeText('abcd');
-      expect(textFieldDriver.getCharCounter().getText()).toEqual('4/10');
+        expect(textFieldDriver.getValidationMessage().exists()).toBe(true);
+        expect(textFieldDriver.getValidationIcon().exists()).toBe(false);
+      });
     });
-  });
 
-  describe('hint', () => {
-    it('should hint text replace placeholder when input is focused', () => {
-      const renderTree = render(<TestCase hint={hint} placeholder={placeholder}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      expect(textFieldDriver.getPlaceholder().getText()).toEqual(placeholder);
-      
-      textFieldDriver.focus();
-      expect(textFieldDriver.getPlaceholder().getText()).toEqual(hint);
+    describe('defaultValue', () => {
+      const props = {
+        ...defaultProps,
+        testID: TEXT_FIELD_TEST_ID,
+        placeholder: 'Placeholder',
+        defaultValue: 'someDefaultValue',
+        value: 'someValue'
+      };
+
+      it('value should equal defaultValue on first render when value not passed', () => {
+        const renderTree = render(<TestCase {...props} value={undefined}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getValue()).toEqual('someDefaultValue');
+      });
+
+      it('value should equal value on first render when passed', () => {
+        const renderTree = render(<TestCase {...props} defaultValue={undefined}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getValue()).toEqual('someValue');
+      });
+
+      it.each`
+        platform    | isWeb
+        ${'web'}    | ${true}
+        ${'native'} | ${false}
+      `('on $platform should reset defaultValue when prop changed after first render', args => {
+        Constants.isWeb = args.isWeb;
+
+        const renderTree = render(<TestCase {...props} value={undefined}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        renderTree.rerender(<TestCase {...props} value={undefined} defaultValue={'someUpdatedDefaultValue'}/>);
+
+        expect(textFieldDriver.getValue()).toEqual('someUpdatedDefaultValue');
+      });
     });
 
-    it('should not show hint when hint prop not passed', () => {
-      const renderTree = render(<TestCase placeholder={placeholder}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      expect(textFieldDriver.getPlaceholder().getText()).toEqual(placeholder);
-      
-      textFieldDriver.focus();
-      expect(textFieldDriver.getPlaceholder().getText()).toEqual(placeholder);
+    describe('char counter', () => {
+      it('should render char counter', () => {
+        const renderTree = render(<TestCase {...defaultProps} maxLength={10} showCharCounter/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getCharCounter().exists()).toBe(true);
+      });
+
+      it('should not render counter if maxLength prop not supplied', () => {
+        const renderTree = render(<TestCase {...defaultProps} showCharCounter/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getCharCounter().exists()).toBe(false);
+      });
+
+      it('should not render counter if showCharCounter prop not supplied', () => {
+        const renderTree = render(<TestCase {...defaultProps} maxLength={10}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getCharCounter().exists()).toBe(false);
+      });
+
+      it('should render char counter with "0/10" if value not supplied', () => {
+        const renderTree = render(<TestCase {...defaultProps} maxLength={10} showCharCounter/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getCharCounter().getText()).toEqual('0/10');
+      });
+
+      it('should render char counter with correct content', () => {
+        const renderTree = render(<TestCase {...defaultProps} value={'abc'} maxLength={10} showCharCounter/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getCharCounter().getText()).toEqual('3/10');
+      });
+
+      it('should update char counter after changing the text', () => {
+        const renderTree = render(<TestCase {...defaultProps} value={'ab'} maxLength={10} showCharCounter/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getCharCounter().getText()).toEqual('2/10');
+
+        textFieldDriver.changeText('abcd');
+        expect(textFieldDriver.getCharCounter().getText()).toEqual('4/10');
+      });
     });
-  });
 
-  describe('formatter', () => {
-    const priceFormatter = Intl.NumberFormat('en-US');
+    describe('hint', () => {
+      it('should hint text replace placeholder when input is focused', () => {
+        const renderTree = render(<TestCase {...defaultProps} hint={hint} placeholder={placeholder}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getPlaceholder().getText()).toEqual(placeholder);
+
+        textFieldDriver.focus();
+        expect(textFieldDriver.getPlaceholder().getText()).toEqual(hint);
+      });
+
+      it('should not show hint when hint prop not passed', () => {
+        const renderTree = render(<TestCase {...defaultProps} placeholder={placeholder}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-    const props = {
-      value: '10000',
-      formatter: value => priceFormatter.format(Number(value))
-    };
+        expect(textFieldDriver.getPlaceholder().getText()).toEqual(placeholder);
 
-    it('should format value while not focused based on formatter prop', () => {
-      const renderTree = render(<TestCase {...props}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      expect(textFieldDriver.getValue()).toEqual('10,000');
+        textFieldDriver.focus();
+        expect(textFieldDriver.getPlaceholder().getText()).toEqual(placeholder);
+      });
     });
 
-    it('should not format value while focused', () => {
-      const renderTree = render(<TestCase {...props}/>);
-      const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-      
-      textFieldDriver.focus();
-      
-      expect(textFieldDriver.getValue()).toEqual('10000');
+    describe('helperText', () => {
+      it('should display helperText', () => {
+        const renderTree = 
+          render(<TestCase {...defaultProps} placeholder={placeholder} hint={hint} helperText={helperText}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getHelperText().exists()).toBe(true);
+      });
+
+      it('should not display helperText', () => {
+        const renderTree = render(<TestCase {...defaultProps} placeholder={placeholder}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getHelperText().exists()).toBe(false);
+      });
     });
-  });
 
-  describe('Mandatory Indication', () => {
-    const getTestCaseDriver = (props: TextFieldProps) => {
-      const renderTree = render(<TestCase {...props}/>);
-      return TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
-    };
-    const starReg = /.*\*$/;
+    describe('clear button', () => {
+      it('should not render clear button', async () => {
+        const renderTree = render(<TestCase {...defaultProps}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
 
-    describe('label', () => {
-      it('should show mandatory indication on the label when required validate passed', () => {
-        const textFieldDriver = getTestCaseDriver({label, validate: 'required', showMandatoryIndication: true});
-        const labelContent = textFieldDriver.getLabel().getText();
-        
-        expect(labelContent).toMatch(starReg);
-      });
-  
-      it('should show mandatory indication on the label when required is passed in validate array', () => {
-        const textFieldDriver = getTestCaseDriver({label, validate: ['required'], showMandatoryIndication: true});
-        const labelContent = textFieldDriver.getLabel().getText();
-        
-        expect(labelContent).toMatch(starReg);
-      });
-
-      it('should show mandatory indication when required is passed in validate array with other validations', () => {
-        const textFieldDriver = getTestCaseDriver({label, validate: ['email', 'required'], showMandatoryIndication: true});
-        const labelContent = textFieldDriver.getLabel().getText();
-        
-        expect(labelContent).toMatch(starReg);
-      });
-  
-      it('should not show mandatory indication on label when validate not passed', () => {
-        const textFieldDriver = getTestCaseDriver({label, showMandatoryIndication: true});
-        const labelText = textFieldDriver.getLabel().getText();
-        
-        expect(labelText).not.toMatch(starReg);
-      });
-  
-      it('should not show mandatory indication on label when showMandatoryIndication not passed', () => {
-        const textFieldDriver = getTestCaseDriver({label, validate: 'required'});
-        const labelText = textFieldDriver.getLabel().getText();
-        
-        expect(labelText).not.toMatch(starReg);
-      });
-
-      it('should have mandatory indication on the label and not on the placeholder', () => {
-        const textFieldDriver = getTestCaseDriver({placeholder, label, validate: 'required', showMandatoryIndication: true});
-        const labelText = textFieldDriver.getLabel().getText();
-        const placeholderText = textFieldDriver.getPlaceholder().getText();
-        
-        expect(labelText).toMatch(starReg);
-        expect(placeholderText).not.toMatch(starReg);
+        expect(await textFieldDriver.getClearButton().exists()).toBe(false);
+      });
+
+      it('should not display clear button when value is undefined', async () => {
+        const renderTree = render(<TestCase {...defaultProps} showClearButton/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+        const clearButtonDriver = textFieldDriver.getClearButton();
+
+        expect(await clearButtonDriver.exists()).toBe(true);
+        expect(await clearButtonDriver.visible()).toBe(false);
+      });
+
+      it('should not display clear button when value is empty', async () => {
+        const renderTree = render(<TestCase {...defaultProps} showClearButton value={''}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+        const clearButtonDriver = textFieldDriver.getClearButton();
+
+        expect(await clearButtonDriver.exists()).toBe(true);
+        expect(await clearButtonDriver.visible()).toBe(false);
+      });
+
+      it('should display clear button when has value', async () => {
+        const renderTree = render(<TestCase {...defaultProps} showClearButton value={'value'}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+        const clearButtonDriver = textFieldDriver.getClearButton();
+
+        expect(await clearButtonDriver.exists()).toBe(true);
+        expect(await clearButtonDriver.visible()).toBe(true);
+      });
+
+      it('should toggle clear button when value changes', async () => {
+        const renderTree = render(<TestCase {...defaultProps} showClearButton/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+        const clearButtonDriver = textFieldDriver.getClearButton();
+
+        expect(clearButtonDriver.exists()).toBe(true);
+        expect(await clearButtonDriver.visible()).toBe(false);
+
+        textFieldDriver.changeText('b');
+        expect(await clearButtonDriver.visible()).toBe(true);
+
+        textFieldDriver.changeText('');
+        expect(await clearButtonDriver.visible()).toBe(false);
+      });
+
+      it('should clear value when pressed', () => {
+        const renderTree = render(<TestCase {...defaultProps} showClearButton value={'value'}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+        const clearButtonDriver = textFieldDriver.getClearButton();
+
+        expect(clearButtonDriver.exists()).toBe(true);
+
+        clearButtonDriver.press();
+        expect(textFieldDriver.getValue()).toEqual('');
       });
     });
 
-    describe('placeholder', () => {
-      it('should have mandatory indication on the placeholder', () => {
-        const textFieldDriver = getTestCaseDriver({placeholder, showMandatoryIndication: true, validate: 'required'});
-        const placeholderText = textFieldDriver.getPlaceholder().getText();
-        
-        expect(placeholderText).toMatch(starReg);
-      });
-
-      it('should not have mandatory indication on the placeholder when validate not passed', () => {
-        const textFieldDriver = getTestCaseDriver({placeholder, label, showMandatoryIndication: true});
-        const placeholderText = textFieldDriver.getPlaceholder().getText();
-        const labelText = textFieldDriver.getLabel().getText();
-        
-        expect(placeholderText).not.toMatch(starReg);
-        expect(labelText).not.toMatch(starReg);
-      });
-
-      it('should not have mandatory indication on the placeholder when showMandatoryIndication not passed', () => {
-        const textFieldDriver = getTestCaseDriver({placeholder, label, validate: 'required'});
-        const placeholderText = textFieldDriver.getPlaceholder().getText();
-        const labelText = textFieldDriver.getLabel().getText();
-        
-        expect(placeholderText).not.toMatch(starReg);
-        expect(labelText).not.toMatch(starReg);
+    describe('formatter', () => {
+      const priceFormatter = Intl.NumberFormat('en-US');
+
+      const props = {
+        ...defaultProps,
+        value: '10000',
+        formatter: value => priceFormatter.format(Number(value))
+      };
+
+      it('should format value while not focused based on formatter prop', () => {
+        const renderTree = render(<TestCase {...props}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        expect(textFieldDriver.getValue()).toEqual('10,000');
+      });
+
+      it('should not format value while focused', () => {
+        const renderTree = render(<TestCase {...props}/>);
+        const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+
+        textFieldDriver.focus();
+
+        expect(textFieldDriver.getValue()).toEqual('10000');
       });
     });
 
-    describe('floating placeholder', () => {
-      it('should have mandatory indication on the floating placeholder', () => {
-        const textFieldDriver = getTestCaseDriver({
-          placeholder,
-          floatingPlaceholder: true,
-          floatOnFocus: true,
-          showMandatoryIndication: true,
-          validate: 'required'
+    describe('Mandatory Indication', () => {
+      const getTestCaseDriver = (props: TextFieldProps) => {
+        const renderTree = render(<TestCase {...defaultProps} {...props}/>);
+        return TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID});
+      };
+      const starReg = /.*\*$/;
+
+      describe('label', () => {
+        it('should show mandatory indication on the label when required validate passed', () => {
+          const textFieldDriver = getTestCaseDriver({label, validate: 'required', showMandatoryIndication: true});
+          const labelContent = textFieldDriver.getLabel().getText();
+
+          expect(labelContent).toMatch(starReg);
+        });
+
+        it('should show mandatory indication on the label when required is passed in validate array', () => {
+          const textFieldDriver = getTestCaseDriver({label, validate: ['required'], showMandatoryIndication: true});
+          const labelContent = textFieldDriver.getLabel().getText();
+
+          expect(labelContent).toMatch(starReg);
+        });
+
+        it('should show mandatory indication when required is passed in validate array with other validations', () => {
+          const textFieldDriver = getTestCaseDriver({
+            label,
+            validate: ['email', 'required'],
+            showMandatoryIndication: true
+          });
+          const labelContent = textFieldDriver.getLabel().getText();
+
+          expect(labelContent).toMatch(starReg);
+        });
+
+        it('should not show mandatory indication on label when validate not passed', () => {
+          const textFieldDriver = getTestCaseDriver({label, showMandatoryIndication: true});
+          const labelText = textFieldDriver.getLabel().getText();
+
+          expect(labelText).not.toMatch(starReg);
+        });
+
+        it('should not show mandatory indication on label when showMandatoryIndication not passed', () => {
+          const textFieldDriver = getTestCaseDriver({label, validate: 'required'});
+          const labelText = textFieldDriver.getLabel().getText();
+
+          expect(labelText).not.toMatch(starReg);
+        });
+
+        it('should have mandatory indication on the label and not on the placeholder', () => {
+          const textFieldDriver = getTestCaseDriver({
+            placeholder,
+            label,
+            validate: 'required',
+            showMandatoryIndication: true
+          });
+          const labelText = textFieldDriver.getLabel().getText();
+          const placeholderText = textFieldDriver.getPlaceholder().getText();
+
+          expect(labelText).toMatch(starReg);
+          expect(placeholderText).not.toMatch(starReg);
+        });
+      });
+
+      describe('placeholder', () => {
+        it('should have mandatory indication on the placeholder', () => {
+          const textFieldDriver = getTestCaseDriver({placeholder, showMandatoryIndication: true, validate: 'required'});
+          const placeholderText = textFieldDriver.getPlaceholder().getText();
+
+          expect(placeholderText).toMatch(starReg);
+        });
+
+        it('should not have mandatory indication on the placeholder when validate not passed', () => {
+          const textFieldDriver = getTestCaseDriver({placeholder, label, showMandatoryIndication: true});
+          const placeholderText = textFieldDriver.getPlaceholder().getText();
+          const labelText = textFieldDriver.getLabel().getText();
+
+          expect(placeholderText).not.toMatch(starReg);
+          expect(labelText).not.toMatch(starReg);
+        });
+
+        it('should not have mandatory indication on the placeholder when showMandatoryIndication not passed', () => {
+          const textFieldDriver = getTestCaseDriver({placeholder, label, validate: 'required'});
+          const placeholderText = textFieldDriver.getPlaceholder().getText();
+          const labelText = textFieldDriver.getLabel().getText();
+
+          expect(placeholderText).not.toMatch(starReg);
+          expect(labelText).not.toMatch(starReg);
+        });
+      });
+
+      describe('floating placeholder', () => {
+        it('should have mandatory indication on the floating placeholder', () => {
+          const textFieldDriver = getTestCaseDriver({
+            placeholder,
+            floatingPlaceholder: true,
+            floatOnFocus: true,
+            showMandatoryIndication: true,
+            validate: 'required'
+          });
+          const placeholderText = textFieldDriver.getPlaceholder().getText();
+
+          expect(placeholderText).toMatch(starReg);
         });
-        const placeholderText = textFieldDriver.getPlaceholder().getText();
-        
-        expect(placeholderText).toMatch(starReg);
       });
     });
   });
diff --git a/src/components/wizard/types.tsx b/src/components/wizard/types.ts
similarity index 84%
rename from src/components/wizard/types.tsx
rename to src/components/wizard/types.ts
index 7937e8ec66..3ca8855b96 100644
--- a/src/components/wizard/types.tsx
+++ b/src/components/wizard/types.ts
@@ -1,4 +1,3 @@
-import React from 'react';
 import {ImageProps} from '../image';
 import {StyleProp, TextStyle, ViewStyle} from 'react-native';
 
@@ -93,21 +92,3 @@ export interface WizardProps {
   testID?: string;
   children?: React.ReactNode;
 }
-
-// @ts-ignore
-class WizardTypesForDocs extends React.Component<WizardProps> { // eslint-disable-line
-  static displayName = 'Wizard';
-
-  render() {
-    return null;
-  }
-}
-
-// @ts-ignore
-class WizardStepTypesForDocs extends React.Component<WizardStepProps> { // eslint-disable-line
-  static displayName = 'Wizard.Step';
-
-  render() {
-    return null;
-  }
-}
diff --git a/src/incubator/Dialog/Dialog.driver.new.ts b/src/incubator/Dialog/Dialog.driver.new.ts
index 411e14ad1a..7fd1985ffa 100644
--- a/src/incubator/Dialog/Dialog.driver.new.ts
+++ b/src/incubator/Dialog/Dialog.driver.new.ts
@@ -1,9 +1,22 @@
-import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
+import {ComponentProps} from '../../testkit/new/Component.driver';
 import {ModalDriver} from '../../testkit/';
 
 export const DialogDriver = (props: ComponentProps) => {
   const {renderTree, testID} = props;
-  const driver = useComponentDriver(props);
+
   const modalDriver = ModalDriver({renderTree, testID: `${testID}.modal`});
-  return {...driver, getModal: () => modalDriver};
+
+  const exists = () => {
+    return modalDriver.exists();
+  };
+
+  const isVisible = () => {
+    return modalDriver.isVisible();
+  };
+
+  const pressOnBackground = () => {
+    modalDriver.pressOnBackground();
+  };
+
+  return {isVisible, pressOnBackground, exists};
 };
diff --git a/src/incubator/Dialog/__tests__/index.new.spec.tsx b/src/incubator/Dialog/__tests__/index.new.spec.tsx
index cae3612765..d7d93e5647 100644
--- a/src/incubator/Dialog/__tests__/index.new.spec.tsx
+++ b/src/incubator/Dialog/__tests__/index.new.spec.tsx
@@ -58,16 +58,16 @@ const getDriver = (Element: React.JSX.Element) => {
 describe('Incubator.Dialog sanity checks', () => {
   it('Should show dialog', () => {
     const {dialogDriver} = getDriver(<TestCase1 visible/>);
-    expect(dialogDriver.getModal().isVisible()).toBeTruthy();
+    expect(dialogDriver.isVisible()).toBeTruthy();
   });
 
   it('Should dismiss dialog on background press', () => {
     const dismissFn = jest.fn();
     const {dialogDriver} = getDriver(<TestCase1 visible onDismiss={dismissFn}/>);
     expect(dismissFn).not.toHaveBeenCalled();
-    expect(dialogDriver.getModal().isVisible()).toBeTruthy();
-    dialogDriver.getModal().pressOnBackground();
-    expect(dialogDriver.getModal().isVisible()).toBeFalsy();
+    expect(dialogDriver.isVisible()).toBeTruthy();
+    dialogDriver.pressOnBackground();
+    expect(dialogDriver.isVisible()).toBeFalsy();
     expect(dismissFn).toHaveBeenCalledTimes(1);
   });
 
@@ -78,25 +78,25 @@ describe('Incubator.Dialog sanity checks', () => {
       return <Dialog testID={testID} visible ref={dialogRef}/>;
     };
     const {dialogDriver} = getDriver(<RefTestCase/>);
-    expect(dialogDriver.getModal().isVisible()).toBeTruthy();
+    expect(dialogDriver.isVisible()).toBeTruthy();
     act(() => {
       dialogRef.current?.dismiss();
     });
-    expect(dialogDriver.getModal().isVisible()).toBeFalsy();
+    expect(dialogDriver.isVisible()).toBeFalsy();
   });
 
   it('Should exist only if visible', () => {
     const onDismiss = jest.fn();
     const component = <TestCase2 onDismiss={onDismiss}/>;
     const {dialogDriver, renderTree} = getDriver(component);
-    expect(dialogDriver.exists()).toBeFalsy();
+    expect(dialogDriver.isVisible()).toBeFalsy();
     const openButtonDriver = ButtonDriver({renderTree, testID: 'openButton'});
     openButtonDriver.press();
-    expect(dialogDriver.exists()).toBeTruthy();
+    expect(dialogDriver.isVisible()).toBeTruthy();
     expect(onDismiss).toHaveBeenCalledTimes(0);
     const closeButtonDriver = ButtonDriver({renderTree, testID: 'closeButton'});
     closeButtonDriver.press();
-    expect(dialogDriver.exists()).toBeFalsy();
+    expect(dialogDriver.isVisible()).toBeFalsy();
     expect(onDismiss).toHaveBeenCalledTimes(1);
   });
 
@@ -104,6 +104,7 @@ describe('Incubator.Dialog sanity checks', () => {
     const onDismiss = jest.fn();
     const component = <TestCase2 onDismiss={onDismiss}/>;
     const {dialogDriver} = getDriver(component);
-    expect(dialogDriver.getModal().exists()).toBeTruthy();
+    expect(dialogDriver.exists()).toBeTruthy();
+    expect(dialogDriver.isVisible()).toBeFalsy();
   });
 });
diff --git a/src/incubator/expandableOverlay/ExpandableOverlay.driver.ts b/src/incubator/expandableOverlay/ExpandableOverlay.driver.ts
new file mode 100644
index 0000000000..02cc4c4361
--- /dev/null
+++ b/src/incubator/expandableOverlay/ExpandableOverlay.driver.ts
@@ -0,0 +1,34 @@
+import {ModalDriver} from '../../components/modal/Modal.driver.new';
+import {DialogDriver} from '../Dialog/Dialog.driver.new';
+import {type ComponentProps, useComponentDriver} from '../../testkit/new/Component.driver';
+import {usePressableDriver} from '../../testkit/new/usePressable.driver';
+
+export const ExpandableOverlayDriver = (props: ComponentProps) => {
+  const {renderTree, testID} = props;
+
+  const driver = usePressableDriver(useComponentDriver({renderTree, testID}));
+  const isUsingDialog = !!renderTree.queryByTestId(`${testID}.overlay.modal`);
+
+  const overlayDriver = (isUsingDialog ? DialogDriver : ModalDriver)({
+    renderTree,
+    testID: `${testID}.overlay`
+  });
+
+  const exists = () => {
+    return overlayDriver.exists();
+  };
+
+  const open = () => {
+    driver.press();
+  };
+
+  const isOpen = () => {
+    return overlayDriver.isVisible();
+  };
+
+  const pressOnBackground = () => {
+    overlayDriver.pressOnBackground();
+  };
+
+  return {exists, open, isOpen, pressOnBackground};
+};
diff --git a/src/incubator/expandableOverlay/__tests__/index.spec.tsx b/src/incubator/expandableOverlay/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..776f526da6
--- /dev/null
+++ b/src/incubator/expandableOverlay/__tests__/index.spec.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import ExpandableOverlay, {ExpandableOverlayProps} from '../index';
+import View from '../../../components/view';
+import Text from '../../../components/text';
+import {ExpandableOverlayDriver} from '../ExpandableOverlay.driver';
+
+// What we want to test:
+/**
+ * 1. Sanity - it renders.
+ * 2. Clicking opens the modal/dialog.
+ */
+
+const testID = 'expandableOverylayTest';
+const helloWorld = 'Hello World';
+const universe = 'Hello Universe';
+
+const TestCase = (props: Omit<ExpandableOverlayProps, 'testID'>) => {
+  return (
+    //@ts-expect-error
+    <ExpandableOverlay migrateDialog expandableContent={<Text>{universe}</Text>} {...props} testID={testID}>
+      <View>
+        <Text>{helloWorld}</Text>
+      </View>
+    </ExpandableOverlay>
+  );
+};
+
+const getDriver = <T extends ExpandableOverlayProps>(props: T) => {
+  const renderTree = render(<TestCase {...props}/>);
+  const driver = ExpandableOverlayDriver({renderTree, testID});
+  return {driver, renderTree};
+};
+
+describe('ExpandableOverlay', () => {
+  describe('With Dialog (useDialog)', () => {
+    it('Sanity', () => {
+      const {driver} = getDriver({useDialog: true});
+      expect(driver.exists()).toBeTruthy();
+    });
+
+    it('Test open', () => {
+      const {driver} = getDriver({useDialog: true});
+      expect(driver.isOpen()).toBeFalsy();
+      driver.open();
+      expect(driver.isOpen()).toBeTruthy();
+    });
+
+    it('Test pressOnBackground', () => {
+      const {driver} = getDriver({useDialog: true});
+      driver.open();
+      expect(driver.isOpen()).toBeTruthy();
+      driver.pressOnBackground();
+      expect(driver.isOpen()).toBeFalsy();
+    });
+
+    it(`should render ${helloWorld} on starting view and ${universe} in the dialog only after pressing`, () => {
+      const {driver, renderTree} = getDriver({useDialog: true});
+      expect(renderTree.queryByText(helloWorld)).toBeTruthy();
+      expect(renderTree.queryByText(universe)).toBeFalsy();
+      driver.open();
+      expect(renderTree.queryByText(universe)).toBeTruthy();
+    });
+  });
+
+  describe('With Modal', () => {
+    it('Sanity', () => {
+      const {driver} = getDriver({});
+      expect(driver.exists()).toBeTruthy();
+    });
+
+    it('Test open', () => {
+      const {driver} = getDriver({});
+      expect(driver.isOpen()).toBeFalsy();
+      driver.open();
+      expect(driver.isOpen()).toBeTruthy();
+    });
+
+    it('Test pressOnBackground', () => {
+      const {driver} = getDriver({});
+      driver.open();
+      expect(driver.isOpen()).toBeTruthy();
+      driver.pressOnBackground();
+      expect(driver.isOpen()).toBeFalsy();
+    });
+
+    it(`should render ${helloWorld} on starting view and ${universe} in the dialog only after pressing`, () => {
+      const {driver, renderTree} = getDriver({});
+      expect(renderTree.queryByText(helloWorld)).toBeTruthy();
+      expect(renderTree.queryByText(universe)).toBeFalsy();
+      driver.open();
+      expect(renderTree.queryByText(universe)).toBeTruthy();
+    });
+  });
+});
diff --git a/src/incubator/expandableOverlay/index.tsx b/src/incubator/expandableOverlay/index.tsx
index 5b3251c4b3..3408e2ff3d 100644
--- a/src/incubator/expandableOverlay/index.tsx
+++ b/src/incubator/expandableOverlay/index.tsx
@@ -95,6 +95,7 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
         visible={visible}
         onDismiss={closeExpandable}
         onRequestClose={closeExpandable}
+        onBackgroundPress={closeExpandable}
       >
         {showTopBar && <Modal.TopBar onDone={closeExpandable} {...topBarProps}/>}
         {expandableContent}
diff --git a/src/index.ts b/src/index.ts
index 7349a1cdc9..1ba81dfb83 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,6 @@
 /* ===== General Stuff ===== */
 export {default as Assets} from './assets';
+export type {emojis as EmojisAssetsType} from './assets/emojis';
 export * from './style';
 export * from './services';
 export * from '../lib/components';
diff --git a/src/testkit/index.ts b/src/testkit/index.ts
index ed451b6f4d..3ed75036b3 100644
--- a/src/testkit/index.ts
+++ b/src/testkit/index.ts
@@ -18,3 +18,4 @@ export {SectionsWheelPickerDriver} from '../components/sectionsWheelPicker/Secti
 export {WheelPickerDriver} from '../components/WheelPicker/WheelPicker.driver';
 export {WheelPickerItemDriver} from '../components/WheelPicker/WheelPickerItem.driver';
 export {PickerDriver} from '../components/picker/Picker.driver.new';
+export {ExpandableOverlayDriver} from '../incubator/expandableOverlay/ExpandableOverlay.driver';