From a3aa72d1f6b6155dff3cbac0b20c920f5b5263cd Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Thu, 1 Jan 2026 13:22:56 +0200
Subject: [PATCH 1/2] Fix button and update @testing-library/react-native
 version

---
 package.json                                  |   2 +-
 packages/react-native-ui-lib/package.json     |   2 +-
 .../components/button/__tests__/index.spec.js | 118 +++++++++--------
 yarn.lock                                     | 120 ++++++++++++++++--
 4 files changed, 167 insertions(+), 75 deletions(-)

diff --git a/package.json b/package.json
index 663622fdfa..647a2384de 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "@react-native/typescript-config": "0.78.3",
     "@shopify/flash-list": "1.7.6",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/react-native": "^11.5.1",
+    "@testing-library/react-native": "^13.3.3",
     "@topcli/spinner": "patch:@topcli/spinner@npm%3A2.1.2#./.yarn/patches/@topcli-spinner-npm-2.1.2-262b584167.patch",
     "@types/hoist-non-react-statics": "^3.3.7",
     "@types/jest": "^29.5.13",
diff --git a/packages/react-native-ui-lib/package.json b/packages/react-native-ui-lib/package.json
index 35dfa5d830..14923baac2 100644
--- a/packages/react-native-ui-lib/package.json
+++ b/packages/react-native-ui-lib/package.json
@@ -65,7 +65,7 @@
         "@react-native/typescript-config": "0.78.3",
         "@shopify/flash-list": "1.7.6",
         "@testing-library/react-hooks": "^8.0.1",
-        "@testing-library/react-native": "^11.5.1",
+        "@testing-library/react-native": "^13.3.3",
         "@types/hoist-non-react-statics": "^3.3.7",
         "@types/jest": "^29.5.13",
         "@types/lodash": "^4.0.0",
diff --git a/packages/react-native-ui-lib/src/components/button/__tests__/index.spec.js b/packages/react-native-ui-lib/src/components/button/__tests__/index.spec.js
index 722978bfa2..61b6820f48 100644
--- a/packages/react-native-ui-lib/src/components/button/__tests__/index.spec.js
+++ b/packages/react-native-ui-lib/src/components/button/__tests__/index.spec.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import {render} from '@testing-library/react-native';
 import Button from '../index';
 import View from '../../view';
 import {Colors, ThemeManager} from '../../../style';
@@ -12,54 +12,54 @@ describe('Button', () => {
   });
 
   it('should render default button', () => {
-    const tree = renderer.create(<Button label="Button"/>).toJSON();
+    const tree = render(<Button label="Button"/>).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   describe('outline', () => {
     it('should render button with an outline', () => {
-      const tree = renderer.create(<Button label="Button" outline/>).toJSON();
+      const tree = render(<Button label="Button" outline/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should render button with an outlineColor', () => {
-      const tree = renderer.create(<Button label="Button" outlineColor={'blue'}/>).toJSON();
+      const tree = render(<Button label="Button" outlineColor={'blue'}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should render button with outline and outlineColor', () => {
-      const tree = renderer.create(<Button label="Button" outline outlineColor={'blue'}/>).toJSON();
+      const tree = render(<Button label="Button" outline outlineColor={'blue'}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     ///
 
     it('should return undefined when link is true, even when outline is true', () => {
-      const tree = renderer.create(<Button label="Button" outline link/>).toJSON();
+      const tree = render(<Button label="Button" outline link/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return disabled color for outline if button is disabled', () => {
-      const tree = renderer.create(<Button label="Button" outline disabled/>).toJSON();
+      const tree = render(<Button label="Button" outline disabled/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return custom borderWidth according to outlineWidth passed', () => {
-      const tree = renderer.create(<Button label="Button" outline outlineWidth={3}/>).toJSON();
+      const tree = render(<Button label="Button" outline outlineWidth={3}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
 
   describe('link', () => {
     it('should render button as a link', () => {
-      const tree = renderer.create(<Button label="Button" link/>).toJSON();
+      const tree = render(<Button label="Button" link/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
 
   describe('hyperlink', () => {
     it('should render button as a hyperlink', () => {
-      const tree = renderer.create(<Button label="Button" hyperlink/>).toJSON();
+      const tree = render(<Button label="Button" hyperlink/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
@@ -69,32 +69,32 @@ describe('Button', () => {
       ThemeManager.setComponentTheme('Button', {
         backgroundColor: Colors.purple40
       });
-      const tree = renderer.create(<Button label="Button"/>).toJSON();
+      const tree = render(<Button label="Button"/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return backgroundColor according to prop value', () => {
-      const tree = renderer.create(<Button label="Button" backgroundColor={'red'}/>).toJSON();
+      const tree = render(<Button label="Button" backgroundColor={'red'}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return backgroundColor according to modifier', () => {
-      const tree = renderer.create(<Button label="Button" bg-orange30/>).toJSON();
+      const tree = render(<Button label="Button" bg-orange30/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return undefined if this button is outline', () => {
-      const tree = renderer.create(<Button label="Button" backgroundColor="blue" outline/>).toJSON();
+      const tree = render(<Button label="Button" backgroundColor="blue" outline/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return undefined if this button is link', () => {
-      const tree = renderer.create(<Button label="Button" bg-orange30 link/>).toJSON();
+      const tree = render(<Button label="Button" bg-orange30 link/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return theme disabled color if button is disabled', () => {
-      const tree = renderer.create(<Button label="Button" bg-orange30 disabled/>).toJSON();
+      const tree = render(<Button label="Button" bg-orange30 disabled/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
@@ -117,164 +117,162 @@ describe('Button', () => {
       ThemeManager.setComponentTheme('Button', {
         linkColor: Colors.yellow40
       });
-      const tree = renderer.create(<Button label="Button" link/>).toJSON();
+      const tree = render(<Button label="Button" link/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return linkColor color for link', () => {
-      const tree = renderer.create(<Button label="Button" link linkColor={Colors.orange50}/>).toJSON();
+      const tree = render(<Button label="Button" link linkColor={Colors.orange50}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return color according to color modifier', () => {
-      const tree = renderer.create(<Button label="Button" red10/>).toJSON();
+      const tree = render(<Button label="Button" red10/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return color according to color prop', () => {
-      const tree = renderer.create(<Button label="Button" red30 color="green"/>).toJSON();
+      const tree = render(<Button label="Button" red30 color="green"/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return disabled text color according to theme for link/outline button', () => {
-      const tree = renderer.create(<Button label="Button" color="green" link disabled/>).toJSON();
+      const tree = render(<Button label="Button" color="green" link disabled/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return undefined color if this is an icon button (without label)', () => {
-      const tree = renderer.create(<Button iconSource={12}/>).toJSON();
+      const tree = render(<Button iconSource={12}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
 
   describe('label size', () => {
     it('should return style for large button', () => {
-      const tree = renderer.create(<Button label="Button" size={'large'}/>).toJSON();
+      const tree = render(<Button label="Button" size={'large'}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return style for medium button', () => {
-      const tree = renderer.create(<Button label="Button" size={'medium'}/>).toJSON();
+      const tree = render(<Button label="Button" size={'medium'}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return style for small button', () => {
-      const tree = renderer.create(<Button label="Button" size={'small'}/>).toJSON();
+      const tree = render(<Button label="Button" size={'small'}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return style for xSmall button', () => {
-      const tree = renderer.create(<Button label="Button" size={'xSmall'}/>).toJSON();
+      const tree = render(<Button label="Button" size={'xSmall'}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
 
   describe('border radius', () => {
     it('should return given border radius when use plain number', () => {
-      const tree = renderer.create(<Button label="Button" borderRadius={12}/>).toJSON();
+      const tree = render(<Button label="Button" borderRadius={12}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return 0 border radius when border radius prop is 0', () => {
-      const tree = renderer.create(<Button label="Button" borderRadius={0}/>).toJSON();
+      const tree = render(<Button label="Button" borderRadius={0}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should return 0 border radius when button is full width', () => {
-      const tree = renderer.create(<Button label="Button" fullWidth/>).toJSON();
+      const tree = render(<Button label="Button" fullWidth/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
 
   describe('container size', () => {
     it('should return style for large button', () => {
-      expect(renderer.create(<Button label="Button" size="large"/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="large" outline/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="large"/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="large" outline/>).toJSON()).toMatchSnapshot();
     });
 
     it('should return style for medium button', () => {
-      expect(renderer.create(<Button label="Button" size="medium"/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="medium" outline/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="medium"/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="medium" outline/>).toJSON()).toMatchSnapshot();
     });
 
     it('should return style for small button', () => {
-      expect(renderer.create(<Button label="Button" size="small"/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="small" outline/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="small"/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="small" outline/>).toJSON()).toMatchSnapshot();
     });
 
     it('should return style for xSmall button', () => {
-      expect(renderer.create(<Button label="Button" size="xSmall"/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="xSmall" outline/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="xSmall"/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="xSmall" outline/>).toJSON()).toMatchSnapshot();
     });
 
     it('should reduce padding by outlineWidth in case of outline button', () => {
-      expect(renderer.create(<Button label="Button" size="large" outline outlineWidth={2}/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="large" outline outlineWidth={2}/>).toJSON()).toMatchSnapshot();
     });
 
     it('should avoid minWidth limitation if avoidMinWidth was sent', () => {
-      expect(renderer.create(<Button label="Button" size="medium" avoidMinWidth/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="medium" avoidMinWidth/>).toJSON()).toMatchSnapshot();
     });
 
     it('should have no padding of button is a link nor min width', () => {
-      expect(renderer.create(<Button label="Button" size="medium" link/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="medium" link/>).toJSON()).toMatchSnapshot();
     });
 
     it('should have no padding of button is an icon button', () => {
-      expect(renderer.create(<Button label="Button" size="medium" iconSource={14}/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="medium" iconSource={14}/>).toJSON()).toMatchSnapshot();
     });
 
     it('should have no padding if avoidInnerPadding prop was sent', () => {
-      expect(renderer.create(<Button label="Button" size="medium" avoidInnerPadding/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="medium" avoidInnerPadding/>).toJSON()).toMatchSnapshot();
     });
 
     it('should return style for round button', () => {
-      expect(renderer.create(<Button label="Button" round/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" round/>).toJSON()).toMatchSnapshot();
     });
   });
 
   describe('customBackground', () => {
     it('should render button with custom background element', () => {
       const CustomBackground = () => <View flex style={{backgroundColor: 'red'}}/>;
-      const tree = renderer.create(<Button label="Button" customBackground={<CustomBackground/>}/>).toJSON();
+      const tree = render(<Button label="Button" customBackground={<CustomBackground/>}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('should render custom background element with transparent backgroundColor when provided', () => {
       const CustomBackground = () => <View flex style={{backgroundColor: 'blue'}}/>;
-      const tree = renderer.create(<Button label="Button" backgroundColor="green" customBackground={<CustomBackground/>}/>).toJSON();
+      const tree = render(<Button label="Button" backgroundColor="green" customBackground={<CustomBackground/>}/>).toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
 
   describe('icon', () => {
     it('should return the right spacing according to button size when label exists and icon on the right', () => {
-      expect(renderer.create(<Button label="Button" size="large" iconOnRight/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="medium" iconOnRight/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="small" iconOnRight/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="xSmall" iconOnRight/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="large" iconOnRight/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="medium" iconOnRight/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="small" iconOnRight/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button label="Button" size="xSmall" iconOnRight/>).toJSON()).toMatchSnapshot();
     });
 
     it('should apply color on icon', () => {
-      expect(renderer.create(<Button iconSource={12} color={'green'}/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button iconSource={12} red30/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button iconSource={12} color={'green'}/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button iconSource={12} red30/>).toJSON()).toMatchSnapshot();
     });
 
     it('should return icon style according to different variations', () => {
-      expect(renderer.create(<Button iconSource={12} outline/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button iconSource={12} link/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button iconSource={12} disabled/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button iconSource={12} outline/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button iconSource={12} link/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button iconSource={12} disabled/>).toJSON()).toMatchSnapshot();
     });
 
     it('should include custom iconStyle provided as a prop', () => {
-      expect(renderer.create(<Button iconSource={12} iconStyle={{marginRight: 9, tintColor: 'red'}}/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button iconSource={12} iconStyle={{marginRight: 9, tintColor: 'red'}}/>).toJSON()).toMatchSnapshot();
     });
 
     it('should apply the right icon color', () => {
-      expect(renderer.create(<Button iconSource={12} iconProps={{tintColor: 'red'}}/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button iconSource={12} iconStyle={{tintColor: '#ffee22'}}/>).toJSON()).toMatchSnapshot();
-      expect(renderer
-        .create(<Button iconSource={12} iconProps={{tintColor: 'red'}} iconStyle={{tintColor: '#ffee22'}}/>)
-        .toJSON()).toMatchSnapshot();
+      expect(render(<Button iconSource={12} iconProps={{tintColor: 'red'}}/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button iconSource={12} iconStyle={{tintColor: '#ffee22'}}/>).toJSON()).toMatchSnapshot();
+      expect(render(<Button iconSource={12} iconProps={{tintColor: 'red'}} iconStyle={{tintColor: '#ffee22'}}/>).toJSON()).toMatchSnapshot();
     });
   });
 
diff --git a/yarn.lock b/yarn.lock
index 838b5d9d99..2151937ec2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1878,6 +1878,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/diff-sequences@npm:30.0.1":
+  version: 30.0.1
+  resolution: "@jest/diff-sequences@npm:30.0.1"
+  checksum: 10c0/3a840404e6021725ef7f86b11f7b2d13dd02846481264db0e447ee33b7ee992134e402cdc8b8b0ac969d37c6c0183044e382dedee72001cdf50cfb3c8088de74
+  languageName: node
+  linkType: hard
+
 "@jest/environment@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/environment@npm:29.7.0"
@@ -1923,6 +1930,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/get-type@npm:30.1.0":
+  version: 30.1.0
+  resolution: "@jest/get-type@npm:30.1.0"
+  checksum: 10c0/3e65fd5015f551c51ec68fca31bbd25b466be0e8ee8075d9610fa1c686ea1e70a942a0effc7b10f4ea9a338c24337e1ad97ff69d3ebacc4681b7e3e80d1b24ac
+  languageName: node
+  linkType: hard
+
 "@jest/globals@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/globals@npm:29.7.0"
@@ -1972,6 +1986,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/schemas@npm:30.0.5":
+  version: 30.0.5
+  resolution: "@jest/schemas@npm:30.0.5"
+  dependencies:
+    "@sinclair/typebox": "npm:^0.34.0"
+  checksum: 10c0/449dcd7ec5c6505e9ac3169d1143937e67044ae3e66a729ce4baf31812dfd30535f2b3b2934393c97cfdf5984ff581120e6b38f62b8560c8b5b7cc07f4175f65
+  languageName: node
+  linkType: hard
+
 "@jest/schemas@npm:^29.6.3":
   version: 29.6.3
   resolution: "@jest/schemas@npm:29.6.3"
@@ -2690,6 +2713,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sinclair/typebox@npm:^0.34.0":
+  version: 0.34.41
+  resolution: "@sinclair/typebox@npm:0.34.41"
+  checksum: 10c0/0fb61fc2f90c25e30b19b0096eb8ab3ccef401d3e2acfce42168ff0ee877ba5981c8243fa6b1035ac756cde95316724e978b2837dd642d7e4e095de03a999c90
+  languageName: node
+  linkType: hard
+
 "@sinonjs/commons@npm:^3.0.0":
   version: 3.0.1
   resolution: "@sinonjs/commons@npm:3.0.1"
@@ -2870,20 +2900,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react-native@npm:^11.5.1":
-  version: 11.5.4
-  resolution: "@testing-library/react-native@npm:11.5.4"
+"@testing-library/react-native@npm:^13.3.3":
+  version: 13.3.3
+  resolution: "@testing-library/react-native@npm:13.3.3"
   dependencies:
-    pretty-format: "npm:^29.0.0"
+    jest-matcher-utils: "npm:^30.0.5"
+    picocolors: "npm:^1.1.1"
+    pretty-format: "npm:^30.0.5"
+    redent: "npm:^3.0.0"
   peerDependencies:
-    jest: ">=28.0.0"
-    react: ">=16.8.0"
-    react-native: ">=0.59"
-    react-test-renderer: ">=16.8.0"
+    jest: ">=29.0.0"
+    react: ">=18.2.0"
+    react-native: ">=0.71"
+    react-test-renderer: ">=18.2.0"
   peerDependenciesMeta:
     jest:
       optional: true
-  checksum: 10c0/16849e7c1527021e79dd6921346d397d728ac15dffef04c379098800bb2e32b1e3deff3033fd371f5f6cde5d2f1e005f7f5d7e1506ea189fa27a7362f2ac7707
+  checksum: 10c0/ba13066536d5b2c0b625220d4320c6ad1e390c3df4f4b614d859ef467c4974ad52aa79269ae98efdba8f5a074644e3d11583a5485312df5a64387976ecf4225a
   languageName: node
   linkType: hard
 
@@ -3636,7 +3669,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^5.0.0":
+"ansi-styles@npm:^5.0.0, ansi-styles@npm:^5.2.0":
   version: 5.2.0
   resolution: "ansi-styles@npm:5.2.0"
   checksum: 10c0/9c4ca80eb3c2fb7b33841c210d2f20807f40865d27008d7c3f707b7f95cab7d67462a565e2388ac3285b71cb3d9bb2173de8da37c57692a362885ec34d6e27df
@@ -7217,6 +7250,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-diff@npm:30.2.0":
+  version: 30.2.0
+  resolution: "jest-diff@npm:30.2.0"
+  dependencies:
+    "@jest/diff-sequences": "npm:30.0.1"
+    "@jest/get-type": "npm:30.1.0"
+    chalk: "npm:^4.1.2"
+    pretty-format: "npm:30.2.0"
+  checksum: 10c0/5fac2cd89a10b282c5a68fc6206a95dfff9955ed0b758d24ffb0edcb20fb2f98e1fa5045c5c4205d952712ea864c6a086654f80cdd500cce054a2f5daf5b4419
+  languageName: node
+  linkType: hard
+
 "jest-diff@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-diff@npm:29.7.0"
@@ -7317,6 +7362,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-matcher-utils@npm:^30.0.5":
+  version: 30.2.0
+  resolution: "jest-matcher-utils@npm:30.2.0"
+  dependencies:
+    "@jest/get-type": "npm:30.1.0"
+    chalk: "npm:^4.1.2"
+    jest-diff: "npm:30.2.0"
+    pretty-format: "npm:30.2.0"
+  checksum: 10c0/f221c8afa04cee693a2be735482c5db4ec6f845f8ca3a04cb419be34c6257f4531dab89c836251f31d1859318c38997e8e9f34bf7b4cdcc8c7be8ae6e2ecb9f2
+  languageName: node
+  linkType: hard
+
 "jest-message-util@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-message-util@npm:29.7.0"
@@ -8355,6 +8412,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"min-indent@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "min-indent@npm:1.0.1"
+  checksum: 10c0/7e207bd5c20401b292de291f02913230cb1163abca162044f7db1d951fa245b174dc00869d40dd9a9f32a885ad6a5f3e767ee104cf278f399cb4e92d3f582d5c
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:9.0.3":
   version: 9.0.3
   resolution: "minimatch@npm:9.0.3"
@@ -9241,6 +9305,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-format@npm:30.2.0, pretty-format@npm:^30.0.5":
+  version: 30.2.0
+  resolution: "pretty-format@npm:30.2.0"
+  dependencies:
+    "@jest/schemas": "npm:30.0.5"
+    ansi-styles: "npm:^5.2.0"
+    react-is: "npm:^18.3.1"
+  checksum: 10c0/8fdacfd281aa98124e5df80b2c17223fdcb84433876422b54863a6849381b3059eb42b9806d92d2853826bcb966bcb98d499bea5b1e912d869a3c3107fd38d35
+  languageName: node
+  linkType: hard
+
 "pretty-format@npm:^26.6.2":
   version: 26.6.2
   resolution: "pretty-format@npm:26.6.2"
@@ -9441,7 +9516,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^18.0.0":
+"react-is@npm:^18.0.0, react-is@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-is@npm:18.3.1"
   checksum: 10c0/f2f1e60010c683479e74c63f96b09fb41603527cd131a9959e2aee1e5a8b0caf270b365e5ca77d4a6b18aae659b60a86150bb3979073528877029b35aecd2072
@@ -9645,7 +9720,7 @@ __metadata:
     "@react-native/typescript-config": "npm:0.78.3"
     "@shopify/flash-list": "npm:1.7.6"
     "@testing-library/react-hooks": "npm:^8.0.1"
-    "@testing-library/react-native": "npm:^11.5.1"
+    "@testing-library/react-native": "npm:^13.3.3"
     "@topcli/spinner": "patch:@topcli/spinner@npm%3A2.1.2#./.yarn/patches/@topcli-spinner-npm-2.1.2-262b584167.patch"
     "@types/hoist-non-react-statics": "npm:^3.3.7"
     "@types/jest": "npm:^29.5.13"
@@ -9697,7 +9772,7 @@ __metadata:
     "@react-native/typescript-config": "npm:0.78.3"
     "@shopify/flash-list": "npm:1.7.6"
     "@testing-library/react-hooks": "npm:^8.0.1"
-    "@testing-library/react-native": "npm:^11.5.1"
+    "@testing-library/react-native": "npm:^13.3.3"
     "@types/hoist-non-react-statics": "npm:^3.3.7"
     "@types/jest": "npm:^29.5.13"
     "@types/lodash": "npm:^4.0.0"
@@ -9927,6 +10002,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"redent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "redent@npm:3.0.0"
+  dependencies:
+    indent-string: "npm:^4.0.0"
+    strip-indent: "npm:^3.0.0"
+  checksum: 10c0/d64a6b5c0b50eb3ddce3ab770f866658a2b9998c678f797919ceb1b586bab9259b311407280bd80b804e2a7c7539b19238ae6a2a20c843f1a7fcff21d48c2eae
+  languageName: node
+  linkType: hard
+
 "reflect.getprototypeof@npm:^1.0.4":
   version: 1.0.6
   resolution: "reflect.getprototypeof@npm:1.0.6"
@@ -10890,6 +10975,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-indent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "strip-indent@npm:3.0.0"
+  dependencies:
+    min-indent: "npm:^1.0.0"
+  checksum: 10c0/ae0deaf41c8d1001c5d4fbe16cb553865c1863da4fae036683b474fa926af9fc121e155cb3fc57a68262b2ae7d5b8420aa752c97a6428c315d00efe2a3875679
+  languageName: node
+  linkType: hard
+
 "strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"

From d4589554fe4213a86e9cf26830c7a41823799ca8 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Thu, 1 Jan 2026 15:27:56 +0200
Subject: [PATCH 2/2] Remove unsupported modifiers methods, add docs and fix
 tests

The old TextField was the only usage of the removed methods and it was only used by MaskedInput which is deprecated
---
 docs/getting-started/v8.md                    |   3 +-
 docs/getting-started/v9.md                    |  21 +
 package.json                                  |   3 +-
 .../src/commons/__tests__/modifiers.spec.js   |  36 -
 .../src/commons/baseComponent.tsx             |   2 -
 .../src/commons/modifiers.ts                  |  21 -
 .../__tests__/maskedInput.old.spec.tsx        |  20 -
 ...nput.new.spec.tsx => maskedInput.spec.tsx} |   4 +-
 .../src/components/maskedInput/index.tsx      | 137 +++-
 .../maskedInput/maskedInput.api.json          |   1 -
 .../src/components/maskedInput/new.tsx        | 129 ----
 .../src/components/maskedInput/old.js         |  82 --
 .../src/components/numberInput/index.tsx      |   2 +-
 .../picker/__tests__/index.spec.tsx           |  12 +-
 .../src/components/picker/types.ts            |   1 -
 .../src/components/textFieldOld/index.tsx     | 711 ------------------
 16 files changed, 155 insertions(+), 1030 deletions(-)
 create mode 100644 docs/getting-started/v9.md
 delete mode 100644 packages/react-native-ui-lib/src/components/maskedInput/__tests__/maskedInput.old.spec.tsx
 rename packages/react-native-ui-lib/src/components/maskedInput/__tests__/{maskedInput.new.spec.tsx => maskedInput.spec.tsx} (87%)
 delete mode 100644 packages/react-native-ui-lib/src/components/maskedInput/new.tsx
 delete mode 100644 packages/react-native-ui-lib/src/components/maskedInput/old.js
 delete mode 100644 packages/react-native-ui-lib/src/components/textFieldOld/index.tsx

diff --git a/docs/getting-started/v8.md b/docs/getting-started/v8.md
index 1a29754cd7..820d60455f 100644
--- a/docs/getting-started/v8.md
+++ b/docs/getting-started/v8.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 sidebar_label: Migrating v7 -> v8
 title: "Migrating v7 -> v8"
 # path: "/getting-started/v8"
@@ -7,6 +7,7 @@ title: "Migrating v7 -> v8"
 ## `react-native-ui-lib@8.x.x`
 
 ## General
+Now supports react-native 0.77  
 `uilib-native` (our native library) has been moved from `dependencies` to `peerDependencies`.  
 Make sure to `pod install` after updating.  
 We do plan on making this optional in the future.
diff --git a/docs/getting-started/v9.md b/docs/getting-started/v9.md
new file mode 100644
index 0000000000..31dcbda645
--- /dev/null
+++ b/docs/getting-started/v9.md
@@ -0,0 +1,21 @@
+---
+sidebar_position: 7
+sidebar_label: Migrating v8 -> v9
+title: "Migrating v8 -> v9"
+# path: "/getting-started/v9"
+---
+## `react-native-ui-lib@9.x.x`
+
+## General
+Now supports react-native 0.78 and React 19  
+
+## Components
+
+### MaskedInput
+Only the newer version is now available (the `migrate` prop is removed)  
+
+## Utils
+
+### modifiers
+extractOwnProps - removed  
+extractComponentProps - removed
diff --git a/package.json b/package.json
index 647a2384de..11aaba23ca 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
     "ios": "yarn workspace react-native-ui-lib ios",
     "android": "yarn workspace react-native-ui-lib android",
     "iPad": "yarn workspace react-native-ui-lib iPad",
-    "test": "yarn lint && yarn workspace react-native-ui-lib test",
+    "test": "yarn workspace react-native-ui-lib test",
+    "pretest": "yarn lint",
     "lint": "eslint packages -c .eslintrc.js --ext .tsx,.ts,.js",
     "lint:fix": "eslint packages -c .eslintrc.js --fix",
     "build:dev": "tsc --p tsconfig.dev.json",
diff --git a/packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js b/packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js
index 789bf2d07d..310a601b27 100644
--- a/packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js
+++ b/packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js
@@ -282,24 +282,6 @@ describe('Modifiers', () => {
     });
   });
 
-  // describe('extractOwnProps', () => {
-  //   it('should extract the component props from a props object', () => {
-  //     const props = {color: 'red', topShadow: 1, bottomShadow: 2};
-  //     expect(MultipleShadow.extractOwnProps(props)).toEqual({
-  //       topShadow: 1,
-  //       bottomShadow: 2,
-  //     });
-  //   });
-
-  //   it('should omit props that were required to ignore', () => {
-  //     const props = {color: 'red', topShadow: 1, bottomShadow: 2};
-  //     expect(MultipleShadow.extractOwnProps(props, 'topShadow')).toEqual({
-  //       bottomShadow: 2,
-  //     });
-  //     expect(MultipleShadow.extractOwnProps(props, ['topShadow', 'bottomShadow'])).toEqual({});
-  //   });
-  // });
-
   describe('extractModifiersProps', () => {
     it('should return all modifiers props', () => {
       expect(uut.extractModifierProps({
@@ -343,24 +325,6 @@ describe('Modifiers', () => {
     });
   });
 
-  describe('extractOwnProps', () => {
-    it('should extract the component props from a props object', () => {
-      const props = {color: 'red', prop1: 'text', prop2: 2};
-      expect(uut.extractOwnProps.bind(SampleComponent)(props)).toEqual({
-        prop1: 'text',
-        prop2: 2
-      });
-    });
-
-    it('should omit props that were required to ignore', () => {
-      const props = {color: 'red', prop1: 'text', prop2: 2};
-      expect(uut.extractOwnProps.bind(SampleComponent)(props, 'prop1')).toEqual({
-        prop2: 2
-      });
-      expect(uut.extractOwnProps.bind(SampleComponent)(props, ['prop1', 'prop2'])).toEqual({});
-    });
-  });
-
   describe('getThemeProps', () => {
     beforeEach(() => {
       ThemeManager.setComponentTheme('SampleComponent', undefined);
diff --git a/packages/react-native-ui-lib/src/commons/baseComponent.tsx b/packages/react-native-ui-lib/src/commons/baseComponent.tsx
index 2ab4affa83..73bdad4672 100644
--- a/packages/react-native-ui-lib/src/commons/baseComponent.tsx
+++ b/packages/react-native-ui-lib/src/commons/baseComponent.tsx
@@ -10,8 +10,6 @@ export default function baseComponent(usePure: boolean): ComponentType {
     styles: any;
     view: any;
 
-    static extractOwnProps = Modifiers.extractOwnProps;
-
     constructor(props: any) {
       super(props);
       if (!this.styles) {
diff --git a/packages/react-native-ui-lib/src/commons/modifiers.ts b/packages/react-native-ui-lib/src/commons/modifiers.ts
index 1815b21305..7117654191 100644
--- a/packages/react-native-ui-lib/src/commons/modifiers.ts
+++ b/packages/react-native-ui-lib/src/commons/modifiers.ts
@@ -338,27 +338,6 @@ export function extractModifierProps(props: Dictionary<any>) {
   return modifierProps;
 }
 
-/**
- * TODO:
- * @deprecated switch to Modifiers#extractComponentProps
- */
-export function extractOwnProps(props: Dictionary<any>, ignoreProps: string[]) {
-  //@ts-ignore
-  const ownPropTypes = this.propTypes;
-  const ownProps = _.flow((props: Dictionary<any>) => _.pickBy(props, (_value, key) => _.includes(Object.keys(ownPropTypes), key)),
-    props => _.omit(props, ignoreProps))(props);
-
-  return ownProps;
-}
-
-export function extractComponentProps(component: any, props: Dictionary<any>, ignoreProps: string[] = []) {
-  const componentPropTypes = component.propTypes;
-  const componentProps = _.flow((props: Dictionary<any>) => _.pickBy(props, (_value, key) => _.includes(Object.keys(componentPropTypes), key)),
-    props => _.omit(props, ignoreProps))(props);
-
-  return componentProps;
-}
-
 export function getComponentName(componentDisplayName: string) {
   //@ts-ignore
   return componentDisplayName || this.displayName || this.constructor.displayName || this.constructor.name;
diff --git a/packages/react-native-ui-lib/src/components/maskedInput/__tests__/maskedInput.old.spec.tsx b/packages/react-native-ui-lib/src/components/maskedInput/__tests__/maskedInput.old.spec.tsx
deleted file mode 100644
index 484f052361..0000000000
--- a/packages/react-native-ui-lib/src/components/maskedInput/__tests__/maskedInput.old.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
-import MaskedInput from '../old';
-import Text from '../../../components/text';
-import {TextFieldDriver} from '../../textField/TextField.driver.new';
-
-const testID = 'field';
-
-const TestCase = () => {
-  // @ts-expect-error - this has an error, but this is an old component and I don't want to spend time fixing it
-  return <MaskedInput testID={testID} renderMaskedText={(text?: string) => <Text>{text}</Text>}/>;
-};
-
-describe('MaskedInput (old)', () => {
-  it('Sanity - it renders', () => {
-    const renderTree = render(<TestCase/>);
-    const mainInputDriver = TextFieldDriver({renderTree, testID});
-    mainInputDriver.exists();
-  });
-});
diff --git a/packages/react-native-ui-lib/src/components/maskedInput/__tests__/maskedInput.new.spec.tsx b/packages/react-native-ui-lib/src/components/maskedInput/__tests__/maskedInput.spec.tsx
similarity index 87%
rename from packages/react-native-ui-lib/src/components/maskedInput/__tests__/maskedInput.new.spec.tsx
rename to packages/react-native-ui-lib/src/components/maskedInput/__tests__/maskedInput.spec.tsx
index a7395c8a89..4c0e2cb386 100644
--- a/packages/react-native-ui-lib/src/components/maskedInput/__tests__/maskedInput.new.spec.tsx
+++ b/packages/react-native-ui-lib/src/components/maskedInput/__tests__/maskedInput.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {render} from '@testing-library/react-native';
-import MaskedInput from '../new';
-import Text from '../../../components/text';
+import MaskedInput from '../index';
+import Text from '../../text';
 import {TextFieldDriver} from '../../textField/TextField.driver.new';
 
 const testID = 'field';
diff --git a/packages/react-native-ui-lib/src/components/maskedInput/index.tsx b/packages/react-native-ui-lib/src/components/maskedInput/index.tsx
index 62e246c578..97c1016939 100644
--- a/packages/react-native-ui-lib/src/components/maskedInput/index.tsx
+++ b/packages/react-native-ui-lib/src/components/maskedInput/index.tsx
@@ -1,24 +1,129 @@
-import React, {forwardRef, useEffect} from 'react';
-// @ts-expect-error
-import MaskedInputOld from './old';
-import MaskedInputNew, {MaskedInputProps} from './new';
-import {LogService} from 'services';
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useImperativeHandle,
+  forwardRef,
+  ForwardedRef,
+  type JSX
+} from 'react';
+import _ from 'lodash';
+import {StyleSheet, Keyboard, TextInput, TextInputProps, StyleProp, ViewStyle} from 'react-native';
+import View from '../view';
+import Text from '../text';
+import TouchableOpacity from '../touchableOpacity';
 
-function MaskedInputMigrator(props: any, refToForward: any) {
-  const {migrate, ...others} = props;
+export interface MaskedInputProps extends Omit<TextInputProps, 'value'> {
+  /**
+   * Initial value to pass to masked input
+   */
+  initialValue?: string;
+  /**
+   * callback for rendering the custom input out of the value returns from the actual input
+   */
+  renderMaskedText?: (value?: string) => JSX.Element | undefined;
+  /**
+   * Custom formatter for the input value
+   */
+  formatter?: (value?: string) => string | undefined;
+  /**
+   * container style for the masked input container
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * @description: Mask Input to create custom looking inputs with custom formats
+ * @gif: https://camo.githubusercontent.com/61eedb65e968845d5eac713dcd21a69691571fb1/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4b5a5a7446666f486f454b334b2f67697068792e676966
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/MaskedInputScreen.tsx
+ */
+function MaskedInput(props: MaskedInputProps, ref: ForwardedRef<any>) {
+  const {initialValue, formatter = _.identity, containerStyle, renderMaskedText, onChangeText, ...others} = props;
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef<TextInput>(undefined);
+  const keyboardDidHideListener = useRef<any>(undefined);
+
+  useImperativeHandle(ref, () => {
+    return {
+      isFocused: () => inputRef.current?.isFocused(),
+      focus,
+      blur: () => inputRef.current?.blur(),
+      clear: () => {
+        inputRef.current?.clear();
+        setValue('');
+        // NOTE: This fixes an RN issue - when triggering imperative clear method, it doesn't call onChangeText
+        onChangeText?.('');
+      }
+    };
+  });
 
   useEffect(() => {
-    if (!migrate) {
-      LogService.warn(`UILib MaskedInput implementation has been updated and now requires manual migration. To proceed, pass the "migrate" prop and check if the functionality works as expected.`);
+    if (initialValue !== value) {
+      setValue(initialValue);
     }
+  }, [initialValue]);
+
+  useEffect(() => {
+    keyboardDidHideListener.current = Keyboard.addListener('keyboardDidHide', () => {
+      if (inputRef.current?.isFocused()) {
+        inputRef.current?.blur();
+      }
+    });
+
+    return () => keyboardDidHideListener.current.remove();
   }, []);
 
-  if (migrate) {
-    return <MaskedInputNew {...others} ref={refToForward}/>;
-  } else {
-    return <MaskedInputOld {...others} ref={refToForward}/>;
-  }
+  const _onChangeText = useCallback((value: string) => {
+    const formattedValue = formatter(value) ?? '';
+    setValue(formattedValue);
+    onChangeText?.(formattedValue);
+  },
+  [onChangeText, formatter]);
+
+  const focus = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const _renderMaskedText = () => {
+    if (_.isFunction(renderMaskedText)) {
+      return renderMaskedText(value);
+    }
+    return <Text>{value}</Text>;
+  };
+
+  return (
+    <TouchableOpacity style={containerStyle} activeOpacity={1} onPress={focus}>
+      <TextInput
+        {...others}
+        value={value}
+        // @ts-expect-error
+        ref={inputRef}
+        style={styles.hiddenInput}
+        enableErrors={false}
+        hideUnderline
+        placeholder=""
+        caretHidden
+        multiline={false}
+        onChangeText={_onChangeText}
+      />
+      <View style={styles.maskedInputWrapper}>{_renderMaskedText()}</View>
+    </TouchableOpacity>
+  );
 }
 
-export {MaskedInputProps};
-export default forwardRef(MaskedInputMigrator);
+const styles = StyleSheet.create({
+  hiddenInput: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1,
+    color: 'transparent',
+    backgroundColor: 'transparent',
+    height: undefined
+  },
+  maskedInputWrapper: {
+    zIndex: 0
+  }
+});
+
+MaskedInput.displayName = 'MaskedInput';
+export default forwardRef(MaskedInput);
diff --git a/packages/react-native-ui-lib/src/components/maskedInput/maskedInput.api.json b/packages/react-native-ui-lib/src/components/maskedInput/maskedInput.api.json
index 13cd38a95a..cddd603e2a 100644
--- a/packages/react-native-ui-lib/src/components/maskedInput/maskedInput.api.json
+++ b/packages/react-native-ui-lib/src/components/maskedInput/maskedInput.api.json
@@ -44,7 +44,6 @@
     "  return (",
     "    <div>",
     "      <MaskedInput",
-    "        migrate",
     "        renderMaskedText={renderTimeText}",
     "        formatter={formatter}",
     "        keyboardType={'numeric'}",
diff --git a/packages/react-native-ui-lib/src/components/maskedInput/new.tsx b/packages/react-native-ui-lib/src/components/maskedInput/new.tsx
deleted file mode 100644
index 97c1016939..0000000000
--- a/packages/react-native-ui-lib/src/components/maskedInput/new.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  useImperativeHandle,
-  forwardRef,
-  ForwardedRef,
-  type JSX
-} from 'react';
-import _ from 'lodash';
-import {StyleSheet, Keyboard, TextInput, TextInputProps, StyleProp, ViewStyle} from 'react-native';
-import View from '../view';
-import Text from '../text';
-import TouchableOpacity from '../touchableOpacity';
-
-export interface MaskedInputProps extends Omit<TextInputProps, 'value'> {
-  /**
-   * Initial value to pass to masked input
-   */
-  initialValue?: string;
-  /**
-   * callback for rendering the custom input out of the value returns from the actual input
-   */
-  renderMaskedText?: (value?: string) => JSX.Element | undefined;
-  /**
-   * Custom formatter for the input value
-   */
-  formatter?: (value?: string) => string | undefined;
-  /**
-   * container style for the masked input container
-   */
-  containerStyle?: StyleProp<ViewStyle>;
-}
-
-/**
- * @description: Mask Input to create custom looking inputs with custom formats
- * @gif: https://camo.githubusercontent.com/61eedb65e968845d5eac713dcd21a69691571fb1/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4b5a5a7446666f486f454b334b2f67697068792e676966
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/MaskedInputScreen.tsx
- */
-function MaskedInput(props: MaskedInputProps, ref: ForwardedRef<any>) {
-  const {initialValue, formatter = _.identity, containerStyle, renderMaskedText, onChangeText, ...others} = props;
-  const [value, setValue] = useState(initialValue);
-  const inputRef = useRef<TextInput>(undefined);
-  const keyboardDidHideListener = useRef<any>(undefined);
-
-  useImperativeHandle(ref, () => {
-    return {
-      isFocused: () => inputRef.current?.isFocused(),
-      focus,
-      blur: () => inputRef.current?.blur(),
-      clear: () => {
-        inputRef.current?.clear();
-        setValue('');
-        // NOTE: This fixes an RN issue - when triggering imperative clear method, it doesn't call onChangeText
-        onChangeText?.('');
-      }
-    };
-  });
-
-  useEffect(() => {
-    if (initialValue !== value) {
-      setValue(initialValue);
-    }
-  }, [initialValue]);
-
-  useEffect(() => {
-    keyboardDidHideListener.current = Keyboard.addListener('keyboardDidHide', () => {
-      if (inputRef.current?.isFocused()) {
-        inputRef.current?.blur();
-      }
-    });
-
-    return () => keyboardDidHideListener.current.remove();
-  }, []);
-
-  const _onChangeText = useCallback((value: string) => {
-    const formattedValue = formatter(value) ?? '';
-    setValue(formattedValue);
-    onChangeText?.(formattedValue);
-  },
-  [onChangeText, formatter]);
-
-  const focus = useCallback(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  const _renderMaskedText = () => {
-    if (_.isFunction(renderMaskedText)) {
-      return renderMaskedText(value);
-    }
-    return <Text>{value}</Text>;
-  };
-
-  return (
-    <TouchableOpacity style={containerStyle} activeOpacity={1} onPress={focus}>
-      <TextInput
-        {...others}
-        value={value}
-        // @ts-expect-error
-        ref={inputRef}
-        style={styles.hiddenInput}
-        enableErrors={false}
-        hideUnderline
-        placeholder=""
-        caretHidden
-        multiline={false}
-        onChangeText={_onChangeText}
-      />
-      <View style={styles.maskedInputWrapper}>{_renderMaskedText()}</View>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  hiddenInput: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 1,
-    color: 'transparent',
-    backgroundColor: 'transparent',
-    height: undefined
-  },
-  maskedInputWrapper: {
-    zIndex: 0
-  }
-});
-
-MaskedInput.displayName = 'MaskedInput';
-export default forwardRef(MaskedInput);
diff --git a/packages/react-native-ui-lib/src/components/maskedInput/old.js b/packages/react-native-ui-lib/src/components/maskedInput/old.js
deleted file mode 100644
index c14939dd8b..0000000000
--- a/packages/react-native-ui-lib/src/components/maskedInput/old.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import _ from 'lodash';
-import React from 'react';
-import {StyleSheet, Keyboard} from 'react-native';
-import BaseInput from '../baseInput';
-import TextField from '../textFieldOld';
-import View from '../view';
-import Text from '../text';
-import TouchableOpacity from '../touchableOpacity';
-
-/**
- * @description: Mask Input to create custom looking inputs with custom formats
- * @gif: https://camo.githubusercontent.com/61eedb65e968845d5eac713dcd21a69691571fb1/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4b5a5a7446666f486f454b334b2f67697068792e676966
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/MaskedInputScreen.tsx
- */
-export default class MaskedInput extends BaseInput {
-  static displayName = 'MaskedInput';
-
-  componentDidMount() {
-    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-      if (_.invoke(this, 'isFocused')) {
-        _.invoke(this, 'blur');
-      }
-    });
-  }
-
-  componentWillUnmount() {
-    this.keyboardDidHideListener.remove();
-  }
-
-  clear() {
-    this.setState({value: ''});
-    this.input.clear();
-  }
-
-  renderMaskedText() {
-    const {renderMaskedText} = this.props;
-    const {value} = this.state;
-
-    if (_.isFunction(renderMaskedText)) {
-      return renderMaskedText(value);
-    }
-    return <Text>{value}</Text>;
-  }
-
-  render() {
-    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-    const {containerStyle, style} = this.props;
-
-    return (
-      <TouchableOpacity style={containerStyle} activeOpacity={1} onPress={() => this.input.focus()}>
-        <TextField
-          ref={r => (this.input = r)}
-          containerStyle={styles.hiddenInputContainer}
-          style={styles.hiddenInput}
-          enableErrors={false}
-          hideUnderline
-          placeholder=""
-          {...this.props}
-          caretHidden
-          multiline={false}
-          onChangeText={this.onChangeText}
-        />
-        <View style={styles.maskedInputWrapper}>{this.renderMaskedText()}</View>
-      </TouchableOpacity>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  hiddenInputContainer: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 1
-  },
-  hiddenInput: {
-    color: 'transparent',
-    backgroundColor: 'transparent',
-    height: undefined
-  },
-  maskedInputWrapper: {
-    zIndex: 0
-  }
-});
diff --git a/packages/react-native-ui-lib/src/components/numberInput/index.tsx b/packages/react-native-ui-lib/src/components/numberInput/index.tsx
index fe5d466c17..e822c3a948 100644
--- a/packages/react-native-ui-lib/src/components/numberInput/index.tsx
+++ b/packages/react-native-ui-lib/src/components/numberInput/index.tsx
@@ -3,7 +3,7 @@ import React, {useMemo, useCallback, useState, useRef} from 'react';
 import {StyleSheet, StyleProp, ViewStyle, TextStyle} from 'react-native';
 import {useDidUpdate, useThemeProps} from '../../hooks';
 import {Colors} from '../../style';
-import MaskedInput from '../maskedInput/new';
+import MaskedInput from '../maskedInput';
 import TextField, {TextFieldProps, TextFieldRef} from '../textField';
 import View from '../view';
 import Text from '../text';
diff --git a/packages/react-native-ui-lib/src/components/picker/__tests__/index.spec.tsx b/packages/react-native-ui-lib/src/components/picker/__tests__/index.spec.tsx
index fa44fd684e..4d9299197c 100644
--- a/packages/react-native-ui-lib/src/components/picker/__tests__/index.spec.tsx
+++ b/packages/react-native-ui-lib/src/components/picker/__tests__/index.spec.tsx
@@ -25,7 +25,7 @@ const TestCase = (props?: any) => {
 
 const getDriver = (props?: any) => {
   const renderTree = render(<TestCase {...props}/>);
-  return PickerDriver({renderTree, testID}, props?.useDialog);
+  return PickerDriver({renderTree, testID}, props?.useDialog, {includeHiddenElements: true});
 };
 
 const onPress = jest.fn();
@@ -314,7 +314,7 @@ describe('Picker', () => {
       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`);
+        const label = screen.getByTestId(`${testID}.filter.type.label`, {includeHiddenElements: true});
         expect(label).toBeTruthy();
         expect(label.props.children).toEqual(placeholderText);
       });
@@ -326,8 +326,8 @@ describe('Picker', () => {
 
       it('should render a settings picker with label', async () => {
         const driver = getDriver({fieldType: 'settings', label: labelText, placeholder: placeholderText});
-        const label = screen.getByTestId(`${testID}.settings.type.label`);
-        const placeholder = screen.getByTestId(`${testID}.settings.type.placeholder`);
+        const label = screen.getByTestId(`${testID}.settings.type.label`, {includeHiddenElements: true});
+        const placeholder = screen.getByTestId(`${testID}.settings.type.placeholder`, {includeHiddenElements: true});
 
         expect(driver.isOpen()).toBeFalsy();
         expect(label).toBeTruthy();
@@ -338,8 +338,8 @@ describe('Picker', () => {
 
       it('should render a settings picker with placeholder', async () => {
         const driver = getDriver({fieldType: 'settings', placeholder: placeholderText});
-        const label = screen.getByTestId(`${testID}.settings.type.label`);
-        const placeholder = screen.getByTestId(`${testID}.settings.type.placeholder`);
+        const label = screen.getByTestId(`${testID}.settings.type.label`, {includeHiddenElements: true});
+        const placeholder = screen.getByTestId(`${testID}.settings.type.placeholder`, {includeHiddenElements: true});
 
         expect(driver.isOpen()).toBeFalsy();
         expect(label).toBeTruthy();
diff --git a/packages/react-native-ui-lib/src/components/picker/types.ts b/packages/react-native-ui-lib/src/components/picker/types.ts
index 0814678209..4d1eda7a36 100644
--- a/packages/react-native-ui-lib/src/components/picker/types.ts
+++ b/packages/react-native-ui-lib/src/components/picker/types.ts
@@ -192,7 +192,6 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
   PickerPropsDeprecation &
   PickerExpandableOverlayProps &
   PickerListProps & {
-    /* ...TextField.propTypes, */
     /**
      * Use dialog instead of modal picker
      */
diff --git a/packages/react-native-ui-lib/src/components/textFieldOld/index.tsx b/packages/react-native-ui-lib/src/components/textFieldOld/index.tsx
deleted file mode 100644
index dda34ea5da..0000000000
--- a/packages/react-native-ui-lib/src/components/textFieldOld/index.tsx
+++ /dev/null
@@ -1,711 +0,0 @@
-// @ts-nocheck
-// TODO: hideUnderline should be true by default
-// TODO: enableErrors should be false by default
-// TODO: enableErrors should derived from errorMessage prop
-// TODO: use forwardRef to allow access to inner TextInput API
-// TODO: add trailing/leading icon props
-// TODO: support margin modifiers
-import _ from 'lodash';
-import React from 'react';
-import {StyleSheet, Animated, TextInput as RNTextInput} from 'react-native';
-import memoize from 'memoize-one';
-import {Constants} from '../../commons/new';
-import {Colors, Typography, Spacings} from '../../style';
-import BaseInput from '../baseInput';
-import Modal from '../modal';
-import TextArea from '../textArea';
-import View from '../view';
-import Image from '../image';
-import Text from '../text';
-import TouchableOpacity from '../touchableOpacity';
-
-const COLOR_BY_STATE = {
-  default: Colors.grey10,
-  focus: Colors.grey10,
-  error: Colors.grey10,
-  disabled: Colors.grey50
-};
-const UNDERLINE_COLOR_BY_STATE = {
-  default: Colors.grey50,
-  focus: Colors.$outlinePrimary,
-  error: Colors.red30
-};
-const PLACEHOLDER_COLOR_BY_STATE = {
-  default: Colors.grey30,
-  focus: Colors.$textPrimary
-};
-const CHAR_COUNTER_COLOR_BY_STATE = {
-  default: Colors.grey30,
-  error: Colors.red30
-};
-
-const LABEL_TYPOGRAPHY = Typography.text80;
-const ICON_SIZE = 24;
-const ICON_LEFT_PADDING = 6;
-const FLOATING_PLACEHOLDER_SCALE = 0.875;
-
-/**
- * @description: A wrapper for TextInput component with extra functionality like floating placeholder and validations (This is an uncontrolled component)
- * @modifiers: Typography
- * @extends: TextInput
- * @extendsLink: https://reactnative.dev/docs/textinput
- * @gif: https://media.giphy.com/media/xULW8su8Cs5Z9Fq4PS/giphy.gif, https://media.giphy.com/media/3ohc1dhDcLS9FvWLJu/giphy.gif, https://media.giphy.com/media/oNUSOxnHdMP5ZnKYsh/giphy.gif
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextFieldScreen/BasicTextFieldScreen.js
- */
-export default class TextField extends BaseInput {
-  static displayName = 'TextFieldOld';
-
-  static defaultProps = {
-    enableErrors: true,
-    validateOnBlur: true
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      ...this.state,
-      value: props.value, // for floatingPlaceholder functionality
-      floatingPlaceholderState: new Animated.Value(this.shouldFloatPlaceholder(props.value) ? 1 : 0),
-      showExpandableModal: false,
-      floatingPlaceholderTranslate: 0,
-      charCountColor: CHAR_COUNTER_COLOR_BY_STATE.default
-    };
-
-    this.generatePropsWarnings(props);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.value !== this.props.value) {
-      this.setState({value: nextProps.value}, () => {
-        this.updateFloatingPlaceholderState();
-        if (nextProps.validateOnChange) {
-          this.validate();
-        }
-      });
-    }
-  }
-
-  componentDidUpdate(_prevProps, prevState) {
-    if (_.isEmpty(prevState.value) !== _.isEmpty(this.state.value) || prevState.focused !== this.state.focused) {
-      this.updateFloatingPlaceholderState();
-    }
-  }
-
-  onPlaceholderLayout = (event) => {
-    const {width} = event.nativeEvent.layout;
-    const translate = width / 2 - (width * FLOATING_PLACEHOLDER_SCALE) / 2;
-    this.setState({floatingPlaceholderTranslate: translate / FLOATING_PLACEHOLDER_SCALE});
-  };
-
-  /** Actions */
-  generatePropsWarnings(props) {
-    if (props.maxLength === 0) {
-      console.warn('Setting maxLength to zero will block typing in this input');
-    }
-    if (props.showCharacterCounter && !props.maxLength) {
-      console.warn('In order to use showCharacterCount please pass \'maxLength\' prop');
-    }
-  }
-
-  generateStyles() {
-    this.styles = createStyles(this.getThemeProps(), this.getTopPaddings());
-  }
-
-  getAccessibilityInfo() {
-    const {floatingPlaceholder, placeholder} = this.getThemeProps();
-    const accessibilityState = this.isDisabled() ? {disabled: true} : undefined;
-    let accessibilityLabel = floatingPlaceholder ? this.props.accessibilityLabel || placeholder : '';
-
-    if (this.isRequiredField()) {
-      accessibilityLabel = `${accessibilityLabel}. Mandatory`;
-    }
-
-    return {
-      accessibilityLabel,
-      // on Android accessibilityStates cause issues with expandable input
-      accessibilityState: Constants.isIOS ? accessibilityState : undefined
-    };
-  }
-
-  toggleExpandableModal = (value) => {
-    this.setState({showExpandableModal: value});
-    _.invoke(this.props, 'onToggleExpandableModal', value);
-  };
-
-  updateFloatingPlaceholderState = withoutAnimation => {
-    if (withoutAnimation) {
-      this.state.floatingPlaceholderState.setValue(this.shouldFloatPlaceholder() ? 1 : 0);
-    } else {
-      Animated.spring(this.state.floatingPlaceholderState, {
-        toValue: this.shouldFloatPlaceholder() ? 1 : 0,
-        duration: 150,
-        useNativeDriver: true
-      }).start();
-    }
-  };
-
-  getPlaceholderText = memoize((placeholder, helperText) => {
-    // HACK: passing whitespace instead of undefined. Issue fixed in RN56
-    const text = this.shouldFakePlaceholder()
-      ? this.shouldShowHelperText()
-        ? helperText
-        : ' '
-      : this.shouldShowTopError() && this.shouldShowHelperText()
-        ? helperText
-        : this.getRequiredPlaceholder(placeholder);
-    return text;
-  });
-
-  getStateColor(colorProp = {}) {
-    const {focused} = this.state;
-    const error = this.getErrorMessage();
-    const {disabledColor} = this.getThemeProps();
-
-    if (_.isString(colorProp)) {
-      return colorProp || Colors.grey10;
-    } else if (_.isPlainObject(colorProp)) {
-      const mergedColorState = {...COLOR_BY_STATE, ...colorProp};
-
-      if (this.isDisabled()) {
-        return disabledColor || mergedColorState.disabled;
-      } else if (error) {
-        return mergedColorState.error;
-      } else if (focused) {
-        return mergedColorState.focus;
-      } else {
-        return mergedColorState.default;
-      }
-    }
-
-    return colorProp || Colors.grey10;
-  }
-
-  getCharCount() {
-    const {value} = this.state;
-    if (value) {
-      return value.length;
-    }
-    return 0;
-  }
-
-  setCharCountColor(key) {
-    this.maxReached = key === Constants.backspaceKey ? false : this.isCounterLimit();
-    const color = this.state.focused && this.maxReached ?
-      CHAR_COUNTER_COLOR_BY_STATE.error : CHAR_COUNTER_COLOR_BY_STATE.default;
-
-    if (color !== this.state.charCountColor) {
-      this.setState({charCountColor: color});
-    }
-  }
-
-  getCharCountColor() {
-    const {charCountColor} = this.state;
-    const {disabledColor} = this.getThemeProps();
-
-    return this.isDisabled() && disabledColor ? disabledColor : charCountColor;
-  }
-
-  getTopPaddings() {
-    return this.shouldFakePlaceholder() ? (this.shouldShowTopError() ? undefined : 25) : undefined;
-  }
-
-  getTopErrorsPosition() {
-    return !this.props.title && this.shouldShowTopError() ? {top: Constants.isIOS ? -25 : -27} : undefined;
-  }
-
-  isDisabled() {
-    return this.props.editable === false;
-  }
-
-  isCounterLimit() {
-    const {maxLength} = this.getThemeProps();
-    const counter = this.getCharCount();
-    return counter === 0 ? false : maxLength <= counter;
-  }
-
-  hasText(value) {
-    return !_.isEmpty(value || this.state.value);
-  }
-
-  shouldShowHelperText() {
-    const {focused} = this.state;
-    const {helperText} = this.props;
-    return focused && helperText;
-  }
-
-  shouldFloatOnFocus() {
-    const {focused} = this.state;
-    const {floatOnFocus} = this.getThemeProps();
-    return focused && floatOnFocus;
-  }
-
-  shouldFloatPlaceholder(text) {
-    return this.hasText(text) || this.shouldShowHelperText() || this.shouldFloatOnFocus();
-  }
-
-  shouldFakePlaceholder() {
-    const {floatingPlaceholder, centered, leadingIcon, prefix} = this.getThemeProps();
-
-    return !leadingIcon && !prefix && Boolean(floatingPlaceholder && !centered && !this.shouldShowTopError());
-  }
-
-  shouldShowError() {
-    const {enableErrors} = this.getThemeProps();
-    const error = this.getErrorMessage();
-
-    return enableErrors && error;
-  }
-
-  getErrorMessage() {
-    return this.props?.error || this.state?.error;
-  }
-
-  shouldShowTopError() {
-    const {useTopErrors} = this.getThemeProps();
-    return this.shouldShowError() && useTopErrors;
-  }
-
-  shouldDisplayRightButton() {
-    const {rightButtonProps, expandable} = this.getThemeProps();
-    return !expandable && rightButtonProps && rightButtonProps.iconSource;
-  }
-
-  shouldRenderTitle() {
-    const {floatingPlaceholder, title} = this.getThemeProps();
-    return !floatingPlaceholder && title;
-  }
-
-  onPressRightButton = () => {
-    _.invoke(this.props, 'rightButtonProps.onPress');
-  };
-
-  /** Renders */
-  renderPlaceholder() {
-    const {floatingPlaceholderState, floatingPlaceholderTranslate} = this.state;
-    const {placeholder, placeholderTextColor, floatingPlaceholderColor, floatingPlaceholderStyle} = this.getThemeProps();
-    const typography = this.getTypography();
-    const placeholderColor = this.getStateColor(placeholderTextColor || PLACEHOLDER_COLOR_BY_STATE.default);
-
-    if (this.shouldFakePlaceholder()) {
-      return (
-        <View absF left>
-          <Animated.Text
-            pointerEvents="none"
-            numberOfLines={1}
-            suppressHighlighting
-            accessible={false}
-            onLayout={this.onPlaceholderLayout}
-            style={[
-              this.styles.placeholder,
-              this.getTopErrorsPosition(),
-              typography,
-              // TODO: we need to exclude completely any dependency on line height
-              // in this component since it always breaks alignments
-              {lineHeight: undefined},
-              {
-                transform: [
-                  {
-                    scale: floatingPlaceholderState.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [1, FLOATING_PLACEHOLDER_SCALE]
-                    })
-                  },
-                  {
-                    translateY: floatingPlaceholderState.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [25, 0]
-                    })
-                  },
-                  {
-                    translateX: floatingPlaceholderState.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [0, -floatingPlaceholderTranslate]
-                    })
-                  }
-                ],
-                color: this.shouldFloatPlaceholder()
-                  ? this.getStateColor(floatingPlaceholderColor || PLACEHOLDER_COLOR_BY_STATE)
-                  : placeholderColor
-              },
-              floatingPlaceholderStyle
-            ]}
-          >
-            {this.getRequiredPlaceholder(placeholder)}
-          </Animated.Text>
-        </View>
-      );
-    }
-  }
-
-  renderPrefix() {
-    const {prefix, prefixStyle} = this.props;
-    if (prefix) {
-      const typography = this.getTypography();
-      return <Text style={[this.styles.prefix, typography, {lineHeight: undefined}, prefixStyle]}>{prefix}</Text>;
-    }
-  }
-
-  renderTitle() {
-    const {title, titleColor, titleStyle} = this.getThemeProps();
-    const color = this.getStateColor(titleColor || PLACEHOLDER_COLOR_BY_STATE);
-
-    if (this.shouldRenderTitle()) {
-      return <Text style={[{color}, this.styles.topLabel, this.styles.label, titleStyle]}>{title}</Text>;
-    }
-  }
-
-  renderCharCounter() {
-    const {maxLength, showCharacterCounter} = this.getThemeProps();
-
-    if (maxLength && showCharacterCounter) {
-      const counter = this.getCharCount();
-      const color = this.getCharCountColor();
-
-      return (
-        <Text
-          style={[{color}, this.styles.bottomLabel, this.styles.label]}
-          accessibilityLabel={`${counter} out of ${maxLength} max characters`}
-        >
-          {counter} / {maxLength}
-        </Text>
-      );
-    }
-  }
-
-  renderError(visible) {
-    const {enableErrors, useTopErrors, errorColor} = this.getThemeProps();
-    const textColor = errorColor ? {color: errorColor} : undefined;
-    const positionStyle = useTopErrors ? this.styles.topLabel : this.styles.bottomLabel;
-    const error = this.getErrorMessage();
-
-    if (visible && enableErrors) {
-      return (
-        <Text
-          style={[this.styles.errorMessage, this.styles.label, positionStyle, textColor]}
-          accessible={!_.isEmpty(error) && !useTopErrors}
-        >
-          {error}
-        </Text>
-      );
-    }
-  }
-
-  renderExpandableModal() {
-    const {renderExpandable, topBarProps} = this.getThemeProps();
-    const {showExpandableModal} = this.state;
-
-    if (_.isFunction(renderExpandable) && showExpandableModal) {
-      return renderExpandable(this.getThemeProps(), this.state);
-    }
-
-    const textInputProps = TextField.extractOwnProps(this.props, ['error', 'testID']);
-
-    return (
-      <Modal
-        animationType={'slide'}
-        visible={showExpandableModal}
-        onRequestClose={() => this.toggleExpandableModal(false)}
-      >
-        <Modal.TopBar
-          {...topBarProps}
-          onCancel={() => this.toggleExpandableModal(false)}
-          onDone={this.onDoneEditingExpandableInput}
-        />
-        <View style={this.styles.expandableModalContent}>
-          <TextArea
-            ref={textarea => {
-              this.expandableInput = textarea;
-            }}
-            {...textInputProps}
-            value={this.state.value}
-          />
-        </View>
-      </Modal>
-    );
-  }
-
-  renderExpandableInput() {
-    const {renderExpandableInput, testID} = this.getThemeProps();
-
-    if (_.isFunction(renderExpandableInput)) {
-      return renderExpandableInput(this.getThemeProps(), this.toggleExpandableModal);
-    }
-
-    return (
-      <TouchableOpacity
-        style={this.styles.expandableInput}
-        activeOpacity={1}
-        onPress={() => !this.isDisabled() && this.toggleExpandableModal(true)}
-        testID={`${testID}.expandable`}
-        // {...this.extractAccessibilityProps()}
-        {...this.getAccessibilityInfo()}
-      >
-        {this.renderTextInput()}
-      </TouchableOpacity>
-    );
-  }
-
-  renderTextInput() {
-    const {value} = this.state; // value set on state for floatingPlaceholder functionality
-    const {
-      style,
-      placeholderTextColor,
-      multiline,
-      // hideUnderline,
-      numberOfLines,
-      expandable,
-      rightIconSource,
-      color,
-      placeholder, 
-      helperText,
-      ...others
-    } = this.getThemeProps();
-
-    const typography = this.getTypography();
-    const {lineHeight, ...typographyStyle} = typography;
-    const textColor = this.getStateColor(color || this.extractColorValue());
-    const hasRightElement = this.shouldDisplayRightButton() || rightIconSource;
-    const shouldUseMultiline = multiline/*  || expandable */;
-
-    const inputStyle = [
-      hasRightElement && this.styles.rightElement,
-      this.styles.input,
-      // hideUnderline && this.styles.inputWithoutUnderline,
-      {...typographyStyle},
-      // Constants.isAndroid && {lineHeight},
-      expandable && {maxHeight: lineHeight * (Constants.isAndroid ? 3 : 3.3)},
-      Constants.isRTL && {minHeight: lineHeight + 3},
-      Constants.isIOS && shouldUseMultiline && {paddingTop: 0}, // fix for iOS topPadding in multiline TextInput
-      {color: textColor},
-      style
-    ];
-
-    const placeholderText = this.getPlaceholderText(placeholder, helperText);
-    const placeholderColor = this.getStateColor(placeholderTextColor || PLACEHOLDER_COLOR_BY_STATE.default);
-    const isEditable = !this.isDisabled() && !expandable;
-
-    return (
-      <RNTextInput
-        {...this.getAccessibilityInfo()}
-        pointerEvents={expandable ? 'none' : undefined}
-        {...others}
-        value={value}
-        placeholder={placeholderText}
-        placeholderTextColor={placeholderColor}
-        underlineColorAndroid="transparent"
-        style={inputStyle}
-        multiline={shouldUseMultiline}
-        numberOfLines={numberOfLines}
-        onKeyPress={this.onKeyPress}
-        onChangeText={this.onChangeText}
-        onChange={this.onChange}
-        onFocus={this.onFocus}
-        onBlur={this.onBlur}
-        ref={input => {
-          this.input = input;
-        }}
-        editable={isEditable}
-      />
-    );
-  }
-
-  renderRightButton() {
-    if (this.shouldDisplayRightButton()) {
-      const {rightButtonProps} = this.getThemeProps();
-      const {style, iconSource, iconColor, accessibilityLabel, ...others} = rightButtonProps;
-
-      return (
-        <TouchableOpacity
-          {...others} accessibilityLabel={accessibilityLabel}
-          style={[this.styles.rightButton, this.getTopErrorsPosition(), style]} onPress={this.onPressRightButton}
-        >
-          <Image
-            pointerEvents="none"
-            source={iconSource}
-            resizeMode={'contain'}
-            style={[this.styles.rightButtonImage, {tintColor: iconColor || Colors.$iconPrimary}]}
-          />
-        </TouchableOpacity>
-      );
-    }
-  }
-
-  renderRightIcon() {
-    const {rightIconSource, rightIconStyle} = this.getThemeProps();
-
-    if (rightIconSource) {
-      return (
-        <View style={[this.styles.rightButton, this.getTopErrorsPosition()]} pointerEvents="none">
-          <Image source={rightIconSource} resizeMode={'center'} style={[this.styles.rightButtonImage, rightIconStyle]}/>
-        </View>
-      );
-    }
-  }
-
-  render() {
-    const {expandable, containerStyle, underlineColor, useTopErrors, hideUnderline, leadingIcon} = this.getThemeProps();
-    const underlineStateColor = this.getStateColor(underlineColor || UNDERLINE_COLOR_BY_STATE);
-
-    return (
-      <View style={[this.styles.container, containerStyle]} collapsable={false}>
-        {this.shouldShowTopError() ? this.renderError(useTopErrors) : this.renderTitle()}
-
-        <View
-          style={[
-            this.styles.innerContainer,
-            hideUnderline && this.styles.innerContainerWithoutUnderline,
-            {borderColor: underlineStateColor},
-            {paddingTop: this.getTopPaddings()}
-          ]}
-        >
-          {leadingIcon && <Image {...leadingIcon} style={[this.styles.leadingIcon, leadingIcon.style]}/>}
-          {this.renderPrefix()}
-          {this.renderPlaceholder()}
-          {expandable ? this.renderExpandableInput() : this.renderTextInput()}
-          {this.renderRightButton()}
-          {this.renderRightIcon()}
-          {expandable && this.renderExpandableModal()}
-        </View>
-
-        {!_.isUndefined(this.getErrorMessage()) && useTopErrors && (
-          <View
-            style={this.styles.accessibilityDummyErrorMessage}
-            accessible
-            accessibilityLabel={this.getErrorMessage()}
-          />
-        )}
-
-        <View row>
-          <View flex>{this.renderError(!useTopErrors)}</View>
-          {this.renderCharCounter()}
-        </View>
-      </View>
-    );
-  }
-
-  /** Events */
-  onDoneEditingExpandableInput = () => {
-    const expandableInputValue = _.get(this.expandableInput, 'state.value');
-    this.setState({value: expandableInputValue});
-    this.state.floatingPlaceholderState.setValue(expandableInputValue ? 1 : 0);
-    _.invoke(this.props, 'onChangeText', expandableInputValue);
-    this.toggleExpandableModal(false);
-  };
-
-  onKeyPress = event => {
-    this.lastKey = event.nativeEvent.key;
-    this.setCharCountColor(this.lastKey);
-    _.invoke(this.props, 'onKeyPress', event);
-  };
-
-  onChangeText = text => {
-    // when character count exceeds maxLength text will be empty string.
-    // HACK: To avoid setting state value to '' we check the source of that deletion
-    if (text === '' && this.lastKey && this.lastKey !== Constants.backspaceKey) {
-      return;
-    }
-
-    const {transformer, validateOnChange} = this.props;
-    let transformedText = text;
-    if (_.isFunction(transformer)) {
-      transformedText = transformer(text);
-    }
-
-    _.invoke(this.props, 'onChangeText', transformedText);
-    this.setState({value: transformedText}, () => {
-      if (validateOnChange) {
-        setImmediate(this.validate);
-      }
-    });
-  };
-}
-
-function createStyles({centered, multiline}, rightItemTopPadding = 0) {
-  const itemTopPadding = Constants.isIOS ? (rightItemTopPadding - 3) : (rightItemTopPadding - 1);
-
-  return StyleSheet.create({
-    container: {
-    },
-    innerContainer: {
-      // flexGrow: 1, // create bugs with lineHeight
-      flexDirection: 'row',
-      justifyContent: centered ? 'center' : undefined,
-      borderBottomWidth: 1,
-      borderColor: Colors.grey70,
-      paddingBottom: Constants.isIOS ? 10 : 5
-    },
-    innerContainerWithoutUnderline: {
-      borderBottomWidth: 0,
-      paddingBottom: 0
-    },
-    input: {
-      flexGrow: 1,
-      textAlign: centered ? 'center' : Constants.isRTL ? 'right' : 'left',
-      backgroundColor: 'transparent',
-      // marginBottom: Constants.isIOS ? 10 : 5,
-      padding: 0, // for Android
-      // textAlignVertical: 'top', // for Android
-      borderColor: 'transparent', // borderColor & borderWidth is a fix for collapsing issue on Android
-      borderWidth: Constants.isAndroid ? 1 : undefined // for Android
-    },
-    expandableInput: {
-      flexGrow: 1,
-      flexDirection: 'row',
-      alignItems: 'center'
-    },
-    // inputWithoutUnderline: {
-    //   marginBottom: undefined
-    // },
-    expandableModalContent: {
-      flex: 1,
-      paddingTop: 15,
-      paddingHorizontal: 20
-    },
-    prefix: {
-      color: Colors.grey30,
-      marginRight: Spacings.s1,
-      textAlignVertical: 'center'
-    },
-    placeholder: {
-      textAlign: 'left'
-    },
-    errorMessage: {
-      color: Colors.red30,
-      textAlign: centered ? 'center' : 'left'
-    },
-    topLabel: {
-      marginBottom: Constants.isIOS ? (multiline ? 1 : 5) : 7
-    },
-    bottomLabel: {
-      marginTop: 9
-    },
-    label: {
-      ...LABEL_TYPOGRAPHY,
-      height: LABEL_TYPOGRAPHY.lineHeight
-    },
-    rightElement: {
-      paddingRight: ICON_SIZE + ICON_LEFT_PADDING
-    },
-    rightButton: {
-      position: 'absolute',
-      right: 0,
-      alignSelf: 'flex-start',
-      paddingTop: itemTopPadding
-    },
-    rightButtonImage: {
-      width: ICON_SIZE,
-      height: ICON_SIZE
-    },
-    leadingIcon: {
-      alignSelf: 'center'
-    },
-    accessibilityDummyErrorMessage: {
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      width: 1,
-      height: 1
-    }
-  });
-}