diff --git a/.eslintignore b/.eslintignore
index edbbafa1ea..29a1133e40 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1 @@
-/src/style/typography.js
-**/*.ts
-**/*.tsx
+/src/style/typography.js
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
index 252aa3ce14..4d7d143455 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,12 @@
 module.exports = {
   extends: ['plugin:@typescript-eslint/recommended', 'wix/react-native', 'plugin:react-hooks/recommended'],
   parser: '@typescript-eslint/parser',
+  // plugins: ['@typescript-eslint'],
   rules: {
+    /* Disabled rules for typescript */
+    'no-dupe-class-members': 'off',
+    /* Other Rules */
+    'no-unused-expressions': 'off',
     'arrow-parens': 'off',
     // TODO: remove after migration of legacy lifecycle methods
     camelcase: 'off',
@@ -9,98 +14,31 @@ module.exports = {
     'no-mixed-operators': ['off'],
     'no-trailing-spaces': 'off',
     'operator-linebreak': 'off',
-    'max-len': ['warn', {code: 120}],
+    'max-len': ['warn', {code: 120, ignoreComments: true, ignoreStrings: true}],
     'react/jsx-no-bind': [
-      'warn',
+      'off',
       {
         ignoreRefs: true,
         allowArrowFunctions: false,
-        allowBind: false,
-      },
+        allowBind: false
+      }
     ],
     'function-paren-newline': ['warn', 'never'],
     'new-cap': ['off'], // TODO: fix this in colors.js and remove this
     'default-case': ['off'],
-    "@typescript-eslint/no-use-before-define": 0,
-    "@typescript-eslint/explicit-function-return-type": 0,
-    "@typescript-eslint/no-var-requires": 0,
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/member-delimiter-style": 0,
-    // "@typescript-eslint/no-unused-vars": [2, {"args": "all", "argsIgnorePattern": "^_"}],
-    "@typescript-eslint/no-unused-vars": 0, //todo: uncomment this line and use the the better unused rule above ^
-    "@typescript-eslint/no-non-null-assertion": 0,
-    "@typescript-eslint/explicit-member-accessibility": 0,
-    "@typescript-eslint/prefer-optional-chain": "error",
-    "@typescript-eslint/ban-ts-ignore": 0,
-    "@typescript-eslint/no-empty-function": 0,
-    "@typescript-eslint/camelcase": 0,
-    "@typescript-eslint/indent": 0
-  },
-  plugins: ['@typescript-eslint'],
+    '@typescript-eslint/no-use-before-define': 0,
+    '@typescript-eslint/explicit-function-return-type': 0,
+    '@typescript-eslint/no-var-requires': 0,
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/member-delimiter-style': 0,
+    '@typescript-eslint/no-unused-vars': [2, {args: 'all', argsIgnorePattern: '^_'}],
+    // "@typescript-eslint/no-unused-vars": 0, //todo: uncomment this line and use the the better unused rule above ^
+    '@typescript-eslint/no-non-null-assertion': 0,
+    '@typescript-eslint/explicit-member-accessibility': 0,
+    '@typescript-eslint/prefer-optional-chain': 'error',
+    '@typescript-eslint/ban-ts-ignore': 0,
+    '@typescript-eslint/no-empty-function': 0,
+    '@typescript-eslint/camelcase': 0,
+    '@typescript-eslint/indent': 0
+  }
 };
-
-// OLD ESlint configuration
-// const validColors = require('./src/style/colorsPalette').colorsPalette;
-// const extraFixColorsMap = require('./src/style/colorsPalette').extraFixColorsMap;
-// const assetsDepJson = require('./eslint-rules/tests/assets_deprecation.json');
-// const deprecationsJson = require('./eslint-rules/tests/component_deprecation.json');
-
-// module.exports = {
-//   parser: 'babel-eslint',
-//   extends: 'wix/react-native',
-//   // plugins: ['react', 'react-native', 'uilib'],
-//   // extends: ['airbnb'],
-//   rules: {
-//     'arrow-body-style': 'off',
-//     'arrow-parens': 'off',
-//     // TODO: remove after migration of legacy lifecycle methods
-//     'camelcase': 'off',
-//     'class-methods-use-this': 'off',
-//     'consistent-return': 'off',
-//     'comma-dangle': 'off',
-//     'global-require': 'off',
-//     'max-len': [2, 130, 4, {ignoreUrls: true}],
-//     'no-nested-ternary': 'off',
-//     'no-else-return': 'off',
-//     'no-mixed-operators': ['off'],
-//     'no-param-reassign': ['warn'],
-//     'no-plusplus': 'off',
-//     'no-return-assign': 'off',
-//     'no-trailing-spaces': 'off',
-//     'no-use-before-define': 'off',
-//     'no-unneeded-ternary': 'off',
-//     'no-mixed-operators': 'off',
-//     'no-underscore-dangle': ['error', {'allowAfterThis': true}],
-//     'object-curly-spacing': 'off',
-//     'operator-linebreak': 'off',
-//     'react/forbid-prop-types': 'off',
-//     'react/jsx-filename-extension': 'off',
-//     'react/jsx-space-before-closing': 'off',
-//     'react/jsx-tag-spacing': 'off',
-//     'react/prefer-stateless-function': 'off',
-//     'react/prop-types': ['error', {ignore: ['children', 'style', 'testID']}],
-//     'react/require-default-props': 'off',
-//     "react/sort-comp": ['warn'],
-//     'react/jsx-no-bind': [
-//       'warn',
-//       {
-//         ignoreRefs: true,
-//         allowArrowFunctions: false,
-//         allowBind: false,
-//       },
-//     ],
-//     'import/prefer-default-export': 'off'
-//   },
-//   env: {
-//     browser: true,
-//     node: true,
-//     jest: true,
-//   },
-//   settings: {
-//     'import/resolver': {
-//       node: {
-//         extensions: ['.js', '.ios.js', '.android.js'],
-//       },
-//     },
-//   },
-// };
diff --git a/android/app/src/main/ic_launcher-playstore.png b/android/app/src/main/ic_launcher-playstore.png
new file mode 100644
index 0000000000..1bf75b2cf3
Binary files /dev/null and b/android/app/src/main/ic_launcher-playstore.png differ
diff --git a/android/app/src/main/res/drawable/ic_launcher_background.xml b/android/app/src/main/res/drawable/ic_launcher_background.xml
index 2408e30d17..ca3826a46c 100644
--- a/android/app/src/main/res/drawable/ic_launcher_background.xml
+++ b/android/app/src/main/res/drawable/ic_launcher_background.xml
@@ -5,7 +5,7 @@
     android:viewportHeight="108"
     android:viewportWidth="108"
     xmlns:android="http://schemas.android.com/apk/res/android">
-    <path android:fillColor="#008577"
+    <path android:fillColor="#3DDC84"
           android:pathData="M0,0h108v108h-108z"/>
     <path android:fillColor="#00000000" android:pathData="M9,0L9,108"
           android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
index 95e940aa34..ef2adddcae 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
index 69a1f5ecfe..0dfe76be09 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
index 0785738e2e..1f63abc41a 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
index a8033f6f8e..e73a68fb50 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
index acc26a34fe..1a6ea551af 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
index 633aa4c710..a7dbafab03 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
index cb9947b568..578642d390 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
index b7da35431e..5b7a00ee50 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
index a31ce8bbdb..8aa2baaccc 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
index 8416bfbc98..29f589dde2 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png
index 3f92ebe445..866d44ad44 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
index 9678a85730..b442fb5870 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
index 209c04a651..1e8e558e11 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png
index 51069134e4..571d815d86 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
index 17c925af05..72fb0f05a5 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png differ
diff --git a/demo/src/assets/icons/bell.png b/demo/src/assets/icons/bell.png
new file mode 100644
index 0000000000..4936f84574
Binary files /dev/null and b/demo/src/assets/icons/bell.png differ
diff --git a/demo/src/assets/icons/bell@2x.png b/demo/src/assets/icons/bell@2x.png
new file mode 100644
index 0000000000..5c2f33b0d9
Binary files /dev/null and b/demo/src/assets/icons/bell@2x.png differ
diff --git a/demo/src/assets/icons/bell@3x.png b/demo/src/assets/icons/bell@3x.png
new file mode 100644
index 0000000000..44a2212a6c
Binary files /dev/null and b/demo/src/assets/icons/bell@3x.png differ
diff --git a/demo/src/screens/componentScreens/BadgesScreen.tsx b/demo/src/screens/componentScreens/BadgesScreen.tsx
index ec9bd525d6..3d78352d86 100644
--- a/demo/src/screens/componentScreens/BadgesScreen.tsx
+++ b/demo/src/screens/componentScreens/BadgesScreen.tsx
@@ -5,8 +5,7 @@ const BadgesSpace = 30;
 const plusIcon = require('../../assets/icons/chevronUp.png');
 const minusIcon = require('../../assets/icons/chevronDown.png');
 const star = require('../../assets/icons/star.png');
-const search = require('../../assets/icons/search.png');
-
+const bell = require('../../assets/icons/bell.png');
 
 export default class BadgesScreen extends Component {
   constructor(props) {
@@ -137,6 +136,15 @@ export default class BadgesScreen extends Component {
             </Text>
           </View>
         </View>
+
+        <Text text50 marginB-10 row center marginT-25>
+          Counter Icon Badges
+        </Text>
+        <View row paddingH-15>
+            <Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
+            <Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
+        </View>
+
       </ScrollView>
     );
   }
diff --git a/demo/src/screens/componentScreens/CardsScreen.tsx b/demo/src/screens/componentScreens/CardsScreen.tsx
index b72342f8b7..7be94f87cb 100644
--- a/demo/src/screens/componentScreens/CardsScreen.tsx
+++ b/demo/src/screens/componentScreens/CardsScreen.tsx
@@ -1,16 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {
-  Constants,
-  Colors,
-  View,
-  Card,
-  CardProps,
-  Button,
-  Text,
-  Image
-} from 'react-native-ui-lib';
+import {Constants, Colors, View, Card, CardProps, Button, Text, Image} from 'react-native-ui-lib';
 // @ts-ignore
 import posts from '../../data/posts';
 
@@ -26,10 +17,7 @@ type CardsScreenState = {
   selected2: boolean;
 };
 
-export default class CardsScreen extends Component<
-  CardsScreenProps,
-  CardsScreenState
-> {
+export default class CardsScreen extends Component<CardsScreenProps, CardsScreenState> {
   state = {
     selected1: true,
     selected2: true
@@ -47,7 +35,7 @@ export default class CardsScreen extends Component<
           activeOpacity={1}
           marginR-20
         >
-          <Card.Section source={cardImage} imageStyle={{height: '100%'}} />
+          <Card.Section source={cardImage} imageStyle={{height: '100%'}}/>
         </Card>
         <Card
           height={120}
@@ -61,7 +49,7 @@ export default class CardsScreen extends Component<
             borderWidth: 3
           }}
         >
-          <Card.Section source={cardImage} imageStyle={{height: '100%'}} />
+          <Card.Section source={cardImage} imageStyle={{height: '100%'}}/>
         </Card>
       </View>
     );
@@ -73,8 +61,7 @@ export default class CardsScreen extends Component<
         content={[
           {text: 'You’re Invited!', text70: true, dark10: true},
           {
-            text:
-              '222 Join Old The Town Barbershop Official Store. Download the Wix app to...',
+            text: '222 Join Old The Town Barbershop Official Store. Download the Wix app to...',
             text80: true,
             dark10: true
           },
@@ -92,8 +79,7 @@ export default class CardsScreen extends Component<
           You’re Invited!
         </Text>
         <Text text80 dark10>
-          222 Join Old The Town Barbershop Official Store. Download the Wix app
-          to...
+          222 Join Old The Town Barbershop Official Store. Download the Wix app to...
         </Text>
         <Text text90 dark50>
           wix.to/A465c
@@ -102,11 +88,7 @@ export default class CardsScreen extends Component<
     );
   };
 
-  renderHorizontalCard = (
-    isImageOnLeft: boolean,
-    borderRadius: number,
-    useSection: boolean
-  ) => {
+  renderHorizontalCard = (isImageOnLeft: boolean, borderRadius: number, useSection: boolean) => {
     return (
       <Card
         row
@@ -120,19 +102,9 @@ export default class CardsScreen extends Component<
         activeOpacity={1}
         activeScale={isImageOnLeft ? 0.96 : 1.04}
       >
-        {isImageOnLeft && (
-          <Card.Section
-            source={cardImage}
-            imageStyle={{width: 115, height: '100%'}}
-          />
-        )}
+        {isImageOnLeft && <Card.Section source={cardImage} imageStyle={{width: 115, height: '100%'}}/>}
         {useSection ? this.renderTextSection() : this.renderText()}
-        {!isImageOnLeft && (
-          <Card.Section
-            source={cardImage}
-            imageStyle={{width: 115, height: '100%'}}
-          />
-        )}
+        {!isImageOnLeft && <Card.Section source={cardImage} imageStyle={{width: 115, height: '100%'}}/>}
       </Card>
     );
   };
@@ -147,22 +119,14 @@ export default class CardsScreen extends Component<
           ]}
           style={{padding: 20}}
         />
-        <Card.Section source={cardImage2} imageStyle={{height: 120}} />
+        <Card.Section source={cardImage2} imageStyle={{height: 120}}/>
       </Card>
     );
   };
 
   renderCoupon = (cardProps: CardProps) => {
     return (
-      <Card
-        {...cardProps}
-        flex
-        height={160}
-        onPress={() => {}}
-        useNative
-        activeOpacity={1}
-        activeScale={0.96}
-      >
+      <Card {...cardProps} flex height={160} onPress={() => {}} useNative activeOpacity={1} activeScale={0.96}>
         <Card.Section
           bg-red30
           padding-20
@@ -194,15 +158,7 @@ export default class CardsScreen extends Component<
 
   renderComplexImage = (cardProps: CardProps, image: React.ReactNode) => {
     return (
-      <Card
-        {...cardProps}
-        flex
-        marginV-10
-        onPress={() => {}}
-        useNative
-        activeOpacity={1}
-        activeScale={0.96}
-      >
+      <Card {...cardProps} flex marginV-10 onPress={() => {}} useNative activeOpacity={1} activeScale={0.96}>
         {image}
         <Card.Section
           padding-20
@@ -218,8 +174,7 @@ export default class CardsScreen extends Component<
       <View row spread height={160}>
         {
           // Icon
-          this.renderComplexImage(
-            {'marginR-5': true},
+          this.renderComplexImage({'marginR-5': true},
             <Card.Section
               flex
               backgroundColor={Colors.blue20}
@@ -233,13 +188,11 @@ export default class CardsScreen extends Component<
               style={{
                 justifyContent: 'center'
               }}
-            />
-          )
+            />)
         }
         {
           // Image with overlay content
-          this.renderComplexImage(
-            {'marginL-5': true},
+          this.renderComplexImage({'marginL-5': true},
             <Card.Section
               flex
               source={cardImage2}
@@ -253,8 +206,7 @@ export default class CardsScreen extends Component<
                 alignItems: 'center',
                 justifyContent: 'center'
               }}
-            />
-          )
+            />)
         }
       </View>
     );
@@ -262,12 +214,8 @@ export default class CardsScreen extends Component<
 
   renderNumbers = () => {
     return (
-      <ScrollView
-        style={{height: 100}}
-        horizontal
-        showsHorizontalScrollIndicator={false}
-      >
-        {_.times(4, (i) => {
+      <ScrollView style={{height: 100}} horizontal showsHorizontalScrollIndicator={false}>
+        {_.times(4, i => {
           return (
             <Card key={i} width={100} style={{marginRight: 20}}>
               <View padding-15>
@@ -293,24 +241,19 @@ export default class CardsScreen extends Component<
   renderBackgroundTypes = () => {
     return (
       <View row marginV-10>
-        {this.renderBackgroundCard(
-          {'marginR-20': true, style: {backgroundColor: Colors.dark60}},
+        {this.renderBackgroundCard({'marginR-20': true, style: {backgroundColor: Colors.dark60}},
           <Text text80 center white>
             With custom background color
-          </Text>
-        )}
-        {this.renderBackgroundCard(
-          {
-            'marginR-20': true,
-            style: {backgroundColor: Colors.rgba(Colors.dark60, 0.75)}
-          },
-          <Text text70 center white>
+          </Text>)}
+        {this.renderBackgroundCard({
+          'marginR-20': true,
+          style: {backgroundColor: Colors.rgba(Colors.dark60, 0.75)}
+        },
+        <Text text70 center white>
             With opacity
-          </Text>
-        )}
+        </Text>)}
         {Constants.isIOS &&
-          this.renderBackgroundCard(
-            {enableBlur: true, 'marginL-20': true},
+          this.renderBackgroundCard({enableBlur: true, 'marginL-20': true},
             <>
               <Text text70 dark20 center>
                 With Blur effect
@@ -318,27 +261,18 @@ export default class CardsScreen extends Component<
               <Text text80 dark20 center>
                 (iOS only)
               </Text>
-            </>
-          )}
+            </>)}
       </View>
     );
   };
 
   renderComplexExample = () => {
     return _.map(posts, (post, i) => {
-      const statusColor =
-        post.status === 'Published' ? Colors.green30 : Colors.orange30;
+      const statusColor = post.status === 'Published' ? Colors.green30 : Colors.orange30;
 
       return (
-        <Card
-          key={i}
-          style={{marginBottom: 15}}
-          onPress={() => console.log('press on a card')}
-        >
-          <Card.Section
-            source={post.coverImage}
-            imageStyle={{height: 160}}
-          />
+        <Card key={i} style={{marginBottom: 15}} onPress={() => console.log('press on a card')}>
+          <Card.Section source={post.coverImage} imageStyle={{height: 160}}/>
 
           <View padding-20>
             <Text text40 color={Colors.dark10}>
@@ -360,14 +294,8 @@ export default class CardsScreen extends Component<
                 {post.likes} Likes
               </Text>
               <View row right>
-                <Button
-                  style={{marginRight: 10}}
-                  text90
-                  link
-                  iconSource={featureIcon}
-                  label="Feature"
-                />
-                <Button text90 link iconSource={shareIcon} label="Share" />
+                <Button style={{marginRight: 10}} text90 link iconSource={featureIcon} label="Feature"/>
+                <Button text90 link iconSource={shareIcon} label="Share"/>
               </View>
             </View>
           </View>
@@ -380,6 +308,7 @@ export default class CardsScreen extends Component<
     return (
       <>
         {this.renderNumbers()}
+        {this.renderImageOnBottom()}
         {this.renderBackgroundTypes()}
         {this.renderComplexExample()}
       </>
@@ -388,25 +317,27 @@ export default class CardsScreen extends Component<
 
   render() {
     return (
-      <View>
-        <Image
-          style={StyleSheet.absoluteFillObject}
-          source={{
-            uri:
-              'https://images.pexels.com/photos/1005644/pexels-photo-1005644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
-          }}
-        />
-
+      <View bg-grey70>
         <ScrollView>
           <View flex padding-20>
+            <Text h1 marginB-s4>Cards</Text>
+            <Text h3>Selectable Cards</Text>
             {this.renderSelectableCards()}
+            <Text h3 marginB-s4>
+              Horizontal Cards
+            </Text>
             {this.renderHorizontalCard(true, 0, true)}
             {this.renderHorizontalCard(true, 20, false)}
             {this.renderHorizontalCard(false, 0, false)}
             {this.renderHorizontalCard(false, 20, true)}
-            {this.renderImageOnBottom()}
+            <Text h3 marginB-s4>
+              Card Sections
+            </Text>
             {this.renderCoupons()}
             {this.renderComplexImages()}
+            <Text h3 marginB-s4>
+              Others
+            </Text>
             {this.renderCustomContent()}
           </View>
         </ScrollView>
diff --git a/demo/src/screens/componentScreens/FaderScreen.tsx b/demo/src/screens/componentScreens/FaderScreen.tsx
index 5aceb54de4..7a21b08d45 100644
--- a/demo/src/screens/componentScreens/FaderScreen.tsx
+++ b/demo/src/screens/componentScreens/FaderScreen.tsx
@@ -1,14 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {
-  Colors,
-  Text,
-  View,
-  Fader,
-  withScrollReached,
-  WithScrollReachedProps
-} from 'react-native-ui-lib';
+import {Colors, Text, View, Fader, withScrollReached, WithScrollReachedProps} from 'react-native-ui-lib';
 import {renderHeader} from '../ExampleScreenPresenter';
 
 const numberOfItems = 3;
@@ -17,9 +10,7 @@ const itemWidth = 100;
 const itemHeight = 100;
 const tintColor = undefined;
 
-const horizontal =
-  faderPosition === Fader.position.LEFT ||
-  faderPosition === Fader.position.RIGHT;
+const horizontal = faderPosition === Fader.position.START || faderPosition === Fader.position.END;
 
 class FaderScreen extends Component<WithScrollReachedProps> {
   renderItem = (index: number) => {
@@ -33,8 +24,7 @@ class FaderScreen extends Component<WithScrollReachedProps> {
   render() {
     const {scrollReachedProps} = this.props;
     const visible =
-      faderPosition === Fader.position.BOTTOM ||
-      faderPosition === Fader.position.RIGHT
+      faderPosition === Fader.position.BOTTOM || faderPosition === Fader.position.END
         ? !scrollReachedProps.isScrollAtEnd
         : !scrollReachedProps.isScrollAtStart;
 
@@ -53,11 +43,7 @@ class FaderScreen extends Component<WithScrollReachedProps> {
             >
               {_.times(numberOfItems, this.renderItem)}
             </ScrollView>
-            <Fader
-              visible={visible}
-              position={faderPosition}
-              tintColor={tintColor}
-            />
+            <Fader visible={visible} position={faderPosition} tintColor={tintColor}/>
           </View>
         </View>
       </View>
diff --git a/demo/src/screens/componentScreens/ScrollBarScreen.js b/demo/src/screens/componentScreens/ScrollBarScreen.tsx
similarity index 99%
rename from demo/src/screens/componentScreens/ScrollBarScreen.js
rename to demo/src/screens/componentScreens/ScrollBarScreen.tsx
index 1b8b1ba8ce..5dab9302d1 100644
--- a/demo/src/screens/componentScreens/ScrollBarScreen.js
+++ b/demo/src/screens/componentScreens/ScrollBarScreen.tsx
@@ -1,5 +1,7 @@
 import React, {Component} from 'react';
 import {View, Text, ScrollBar, Button} from 'react-native-ui-lib';
+
+
 class ScrollBarScreen extends Component {
   state = {
     selectedIndex: 0
diff --git a/demo/src/screens/componentScreens/TabBarScreen.tsx b/demo/src/screens/componentScreens/TabBarScreen.tsx
index 06c9ed7cc4..eb2c29cf85 100644
--- a/demo/src/screens/componentScreens/TabBarScreen.tsx
+++ b/demo/src/screens/componentScreens/TabBarScreen.tsx
@@ -37,7 +37,7 @@ export default class TabBarScreen extends Component {
       do {
         index = Math.floor(Math.random() * this.tabbar.props.children.length);
       } while (index === this.state.selectedIndex);
-  
+
       this.setState({selectedIndex: index});
     }
   };
@@ -82,7 +82,7 @@ export default class TabBarScreen extends Component {
   removeTab = () => {
     const index = this.state.selectedIndex;
     const newTabs = this.state.currentTabs;
-    
+
     if (newTabs.length >= 0) {
       newTabs.splice(index, 1);
     }
@@ -92,7 +92,7 @@ export default class TabBarScreen extends Component {
   /** Actions */
   getTabs(showAddTab: boolean) {
     const tabs = _.map(this.state.currentTabs, tab => this.renderTabs(tab));
-    
+
     if (showAddTab) {
       tabs.push(this.renderAddTabsTab());
     } else {
@@ -126,15 +126,20 @@ export default class TabBarScreen extends Component {
       <ScrollView style={{overflow: 'visible'}} showsVerticalScrollIndicator={false}>
         <View bg-dark80>
           <TabBar style={styles.tabbar} selectedIndex={0} enableShadow>
-            <TabBar.Item 
-              label="single tab" 
+            <TabBar.Item
+              label="single tab"
               labelStyle={{color: Colors.green30, fontWeight: 'bold', textTransform: 'capitalize'}}
             />
           </TabBar>
 
-          <TabBar style={styles.tabbar} selectedIndex={0} enableShadow>
-            <TabBar.Item label="Fixed" uppercase style={{backgroundColor: Colors.blue80}}/>
-            <TabBar.Item label="Tab" badge={{label: '100'}} uppercase style={{backgroundColor: Colors.blue80}}/>
+          <TabBar
+            style={styles.tabbar}
+            selectedIndex={0}
+            enableShadow
+            // tabletMargins={{portrait: 0, landscape: 0}}
+          >
+            <TabBar.Item label="Fixed" uppercase backgroundColor={Colors.blue80}/>
+            <TabBar.Item label="Tab" badgeProps={{label: '100'}} uppercase style={{backgroundColor: Colors.blue80}}/>
             <TabBar.Item label="Bar" uppercase style={{backgroundColor: Colors.blue80}}/>
           </TabBar>
 
@@ -146,7 +151,7 @@ export default class TabBarScreen extends Component {
 
           <TabBar style={styles.tabbar} selectedIndex={0} ref={r => (this.tabbar = r)} enableShadow>
             <TabBar.Item label="Scroll"/>
-            <TabBar.Item label="View" badge={{size: 'pimpleSmall'}}/>
+            <TabBar.Item label="View" badgeProps={{size: 'pimpleSmall'}}/>
             <TabBar.Item label="tab"/>
             <TabBar.Item label="bar"/>
             <TabBar.Item label="Container"/>
@@ -169,13 +174,20 @@ export default class TabBarScreen extends Component {
             {this.getTabs(true)}
           </TabBar>
 
-          <Button
-            size={Button.sizes.small}
-            margin-20
-            label={`Change index: ${this.state.selectedIndex}`}
-            onPress={this.changeIndex}
-          />
-          <TabBar style={styles.tabbar} selectedIndex={this.state.selectedIndex} enableShadow backgroundColor={Colors.green70}>
+          <View center>
+            <Button
+              size={Button.sizes.small}
+              margin-20
+              label={`Change index: ${this.state.selectedIndex}`}
+              onPress={this.changeIndex}
+            />
+          </View>
+          <TabBar
+            style={styles.tabbar}
+            selectedIndex={this.state.selectedIndex}
+            enableShadow
+            backgroundColor={Colors.green70}
+          >
             <TabBar.Item label="LONG LABEL"/>
             <TabBar.Item label="ACTIVE"/>
             <TabBar.Item label="INACTIVE"/>
@@ -187,7 +199,7 @@ export default class TabBarScreen extends Component {
             <TabBar.Item label="MODE"/>
           </TabBar>
 
-          <View row>
+          <View center row>
             <Button size={Button.sizes.small} margin-20 label={`Change Labels`} onPress={this.changeLabels}/>
             <Button size={Button.sizes.small} margin-20 label={`Change Color`} onPress={this.changeColors}/>
           </View>
diff --git a/demo/src/screens/componentScreens/TabControllerScreen/index.js b/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
similarity index 74%
rename from demo/src/screens/componentScreens/TabControllerScreen/index.js
rename to demo/src/screens/componentScreens/TabControllerScreen/index.tsx
index ae2bde0b2e..3c542a5b97 100644
--- a/demo/src/screens/componentScreens/TabControllerScreen/index.js
+++ b/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
@@ -1,13 +1,6 @@
 import React, {Component} from 'react';
 import {ActivityIndicator} from 'react-native';
-import {
-  Assets,
-  TabController,
-  Colors,
-  View,
-  Text,
-  Button
-} from 'react-native-ui-lib'; //eslint-disable-line
+import {Assets, TabController, Colors, View, Text, Button, TabControllerItemProps} from 'react-native-ui-lib';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import _ from 'lodash';
 
@@ -15,36 +8,47 @@ import Tab1 from './tab1';
 import Tab2 from './tab2';
 import Tab3 from './tab3';
 
-const TABS = [
-  'Home',
-  'Posts',
-  'Reviews',
-  'Videos',
-  'Photos',
-  'Events',
-  'About',
-  'Community',
-  'Groups',
-  'Offers'
-];
-
-class TabControllerScreen extends Component {
-  constructor(props) {
-    super(props);
+const TABS = ['Home', 'Posts', 'Reviews', 'Videos', 'Photos', 'Events', 'About', 'Community', 'Groups', 'Offers'];
+
+interface State {
+  asCarousel: boolean;
+  centerSelected: boolean;
+  fewItems: boolean;
+  selectedIndex: number;
+  key: string | number;
+  items: TabControllerItemProps[];
+}
+
+class TabControllerScreen extends Component<{}, State> {
 
-    
+  constructor(props: {}) {
+    super(props);
     this.state = {
       asCarousel: true,
       centerSelected: false,
       fewItems: false,
       selectedIndex: 0,
-      key: Date.now()
+      key: Date.now(),
+      items: []
     };
-    
-    const items = this.generateTabItems();
-    this.state.items = items;
+
+    this.state.items = this.generateTabItems();
   }
 
+  generateTabItems = (fewItems = this.state.fewItems, centerSelected = this.state.centerSelected): TabControllerItemProps[] => {
+    let items: TabControllerItemProps[] = _.chain(TABS)
+      .take(fewItems ? 3 : TABS.length)
+      .map<TabControllerItemProps>(tab => ({label: tab, key: tab}))
+      .value();
+
+    const addItem: TabControllerItemProps = {icon: Assets.icons.demo.add, key: 'add', ignore: true, width: 60, onPress: this.onAddItem};
+
+    if (!centerSelected) {
+      items = [...items, addItem];
+    }
+    return items;
+  };
+
   componentDidMount() {
     // this.slow();
   }
@@ -61,19 +65,7 @@ class TabControllerScreen extends Component {
 
   onAddItem = () => {
     console.warn('Add Item');
-  }
-
-  generateTabItems = (fewItems = this.state.fewItems, centerSelected = this.state.centerSelected)  => {
-    let items = _.chain(TABS)
-      .take(fewItems ? 3 : TABS.length)
-      .map((tab) => ({label: tab, key: tab}))
-      .value();
-    
-    if (!centerSelected) {
-      items = [...items, {icon: Assets.icons.demo.add, key: 'add', ignore: true, width: 60, onPress: this.onAddItem}];
-    }
-    return items;
-  }
+  };
 
   toggleItemsCount = () => {
     const {fewItems} = this.state;
@@ -97,14 +89,14 @@ class TabControllerScreen extends Component {
     });
   };
 
-  onChangeIndex = (selectedIndex) => {
+  onChangeIndex = (selectedIndex: number) => {
     this.setState({selectedIndex});
   };
 
   renderLoadingPage() {
     return (
       <View flex center>
-        <ActivityIndicator size="large"/>
+        <ActivityIndicator size="large" />
         <Text text60L marginT-10>
           Loading
         </Text>
@@ -119,18 +111,13 @@ class TabControllerScreen extends Component {
     return (
       <Container {...containerProps}>
         <TabController.TabPage index={0}>
-          <Tab1/>
+          <Tab1 />
         </TabController.TabPage>
         <TabController.TabPage index={1}>
-          <Tab2/>
+          <Tab2 />
         </TabController.TabPage>
-        <TabController.TabPage
-          index={2}
-          lazy
-          lazyLoadTime={1500}
-          renderLoading={this.renderLoadingPage}
-        >
-          <Tab3/>
+        <TabController.TabPage index={2} lazy lazyLoadTime={1500} renderLoading={this.renderLoadingPage}>
+          <Tab3 />
         </TabController.TabPage>
 
         {_.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
@@ -147,14 +134,7 @@ class TabControllerScreen extends Component {
   }
 
   render() {
-    const {
-      key,
-      selectedIndex,
-      asCarousel,
-      centerSelected,
-      fewItems,
-      items
-    } = this.state;
+    const {key, selectedIndex, asCarousel, centerSelected, fewItems, items} = this.state;
     return (
       <View flex bg-grey70>
         <TabController
@@ -166,7 +146,7 @@ class TabControllerScreen extends Component {
         >
           <TabController.TabBar
             // items={items}
-            // key={key}
+            key={key}
             // uppercase
             // indicatorStyle={{backgroundColor: 'green', height: 3}}
             // labelColor={'green'}
@@ -188,7 +168,7 @@ class TabControllerScreen extends Component {
             bg-green30={fewItems}
             label={fewItems ? 'Show Many Items' : 'Show Few Items'}
             marginB-12
-            size="small"
+            size={Button.sizes.small}
             onPress={this.toggleItemsCount}
           />
           <Button
@@ -196,14 +176,14 @@ class TabControllerScreen extends Component {
             bg-green30={asCarousel}
             label={`Carousel : ${asCarousel ? 'ON' : 'OFF'}`}
             marginB-12
-            size="small"
+            size={Button.sizes.small}
             onPress={this.toggleCarouselMode}
           />
           <Button
             bg-grey20={!centerSelected}
             bg-green30={centerSelected}
             label={`centerSelected : ${centerSelected ? 'ON' : 'OFF'}`}
-            size="small"
+            size={Button.sizes.small}
             onPress={this.toggleCenterSelected}
           />
         </View>
diff --git a/demo/src/screens/componentScreens/TabControllerScreen/tab1.js b/demo/src/screens/componentScreens/TabControllerScreen/tab1.tsx
similarity index 69%
rename from demo/src/screens/componentScreens/TabControllerScreen/tab1.js
rename to demo/src/screens/componentScreens/TabControllerScreen/tab1.tsx
index 46eabdcabc..6bbe9d8879 100644
--- a/demo/src/screens/componentScreens/TabControllerScreen/tab1.js
+++ b/demo/src/screens/componentScreens/TabControllerScreen/tab1.tsx
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Colors, View, Text, Image, Assets, Button} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Image, Assets, Button} from 'react-native-ui-lib';
 
 class Tab1 extends Component {
   state = {};
@@ -19,7 +19,14 @@ class Tab1 extends Component {
           Home
         </Text>
         <View absR marginR-20>
-          <Button marginT-20 round style={{width: 50}} size="small" iconSource={Assets.icons.search} white/>
+          <Button
+            marginT-20
+            round
+            style={{width: 50}}
+            size={Button.sizes.small}
+            iconSource={Assets.icons.search}
+            white
+          />
         </View>
       </View>
     );
diff --git a/demo/src/screens/componentScreens/TabControllerScreen/tab2.js b/demo/src/screens/componentScreens/TabControllerScreen/tab2.tsx
similarity index 87%
rename from demo/src/screens/componentScreens/TabControllerScreen/tab2.js
rename to demo/src/screens/componentScreens/TabControllerScreen/tab2.tsx
index d71126f3bb..09ab3bde14 100644
--- a/demo/src/screens/componentScreens/TabControllerScreen/tab2.js
+++ b/demo/src/screens/componentScreens/TabControllerScreen/tab2.tsx
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Colors, View, Text, Image, Assets, Button} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Image} from 'react-native-ui-lib';
 
 class Tab2 extends Component {
   state = {
diff --git a/demo/src/screens/componentScreens/TabControllerScreen/tab3.js b/demo/src/screens/componentScreens/TabControllerScreen/tab3.tsx
similarity index 84%
rename from demo/src/screens/componentScreens/TabControllerScreen/tab3.js
rename to demo/src/screens/componentScreens/TabControllerScreen/tab3.tsx
index fe42d81ed6..b71b176e8c 100644
--- a/demo/src/screens/componentScreens/TabControllerScreen/tab3.js
+++ b/demo/src/screens/componentScreens/TabControllerScreen/tab3.tsx
@@ -1,11 +1,11 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
 import _ from 'lodash';
-import {Card, Avatar, View, Text, Image, Assets, Button} from 'react-native-ui-lib'; //eslint-disable-line
+import {Card, Avatar, View, Text} from 'react-native-ui-lib';
 
 class Tab2 extends Component {
   state = {
-    loading: true,
+    loading: true
   };
 
   componentDidMount() {
@@ -51,10 +51,12 @@ class Tab2 extends Component {
                   <Avatar
                     size={50}
                     source={{
-                      uri: 'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg',
+                      uri: 'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg'
                     }}
                   />
-                  <Text text40 marginL-20>{index}</Text>
+                  <Text text40 marginL-20>
+                    {index}
+                  </Text>
                 </Card>
               );
             })}
diff --git a/expoDemo/.expo/README.md b/expoDemo/.expo/README.md
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/expoDemo/.expo/packager-info.json b/expoDemo/.expo/packager-info.json
index 02ab9a438d..bc536939a2 100644
--- a/expoDemo/.expo/packager-info.json
+++ b/expoDemo/.expo/packager-info.json
@@ -5,5 +5,6 @@
   "packagerPid": null,
   "expoServerNgrokUrl": "https://je-jj8.ethanshar.expodemo.exp.direct",
   "packagerNgrokUrl": "https://packager.je-jj8.ethanshar.expodemo.exp.direct",
-  "ngrokPid": 31738
+  "ngrokPid": 31738,
+  "webpackServerPort": null
 }
diff --git a/expoDemo/.expo/settings.json b/expoDemo/.expo/settings.json
new file mode 100644
index 0000000000..c5ac375239
--- /dev/null
+++ b/expoDemo/.expo/settings.json
@@ -0,0 +1,9 @@
+{
+  "scheme": null,
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}
diff --git a/expoDemo/app.json b/expoDemo/app.json
index c55798d035..c3cd324bad 100644
--- a/expoDemo/app.json
+++ b/expoDemo/app.json
@@ -6,7 +6,6 @@
     "slug": "rnuilib",
     "privacy": "public",
     "icon": "https://user-images.githubusercontent.com/1780255/76164954-b97b3880-615b-11ea-85b9-209ac7932d89.png",
-    "sdkVersion": "36.0.0",
     "version": "1.0.0",
     "entryPoint": "index.js",
     "packagerOpts": {
diff --git a/expoDemo/package.json b/expoDemo/package.json
index 8a0543b9b3..c4dd840069 100644
--- a/expoDemo/package.json
+++ b/expoDemo/package.json
@@ -9,28 +9,28 @@
   },
   "dependencies": {
     "@react-native-community/blur": "^3.4.1",
-    "@react-native-community/datetimepicker": "^2.2.2",
-    "@react-native-community/masked-view": "^0.1.6",
-    "@react-native-community/netinfo": "^4.6.0",
+    "@react-native-community/datetimepicker": "3.0.4",
+    "@react-native-community/masked-view": "0.1.10",
+    "@react-native-community/netinfo": "5.9.7",
     "@react-native-community/picker": "^1.7.1",
     "@react-navigation/native": "^5.0.8",
     "@react-navigation/stack": "^5.1.0",
-    "expo": "~36.0.0",
+    "expo": "^40.0.0",
     "lodash": "^4.17.15",
-    "react": "~16.9.0",
-    "react-dom": "~16.9.0",
-    "react-native": "~0.61.4",
-    "react-native-gesture-handler": "~1.5.0",
-    "react-native-reanimated": "~1.4.0",
-    "react-native-safe-area-context": "^0.7.3",
-    "react-native-screens": "2.0.0-alpha.12",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "0.63.4",
+    "react-native-gesture-handler": "~1.8.0",
+    "react-native-reanimated": "~1.13.0",
+    "react-native-safe-area-context": "3.1.9",
+    "react-native-screens": "~2.15.0",
     "react-native-ui-lib": "snapshot",
-    "react-native-unimodules": "~0.7.0",
-    "react-native-web": "~0.11.7",
+    "react-native-unimodules": "~0.12.0",
+    "react-native-web": "~0.13.12",
     "unicorn-demo-app": "snapshot"
   },
   "devDependencies": {
-    "@babel/core": "~7.6.0",
+    "@babel/core": "~7.9.0",
     "babel-jest": "~24.9.0",
     "jest": "~24.9.0",
     "metro-react-native-babel-preset": "~0.56.0",
diff --git a/generatedTypes/components/avatar/index.d.ts b/generatedTypes/components/avatar/index.d.ts
index 771b79f625..ef6b4898a3 100644
--- a/generatedTypes/components/avatar/index.d.ts
+++ b/generatedTypes/components/avatar/index.d.ts
@@ -52,17 +52,17 @@ export declare type AvatarProps = {
      * Listener-callback for when an image's (uri) loading
      * starts (equiv. to Image.onLoadStart()).
      */
-    onImageLoadStart?: ImagePropsBase["onLoadStart"];
+    onImageLoadStart?: ImagePropsBase['onLoadStart'];
     /**
      * Listener-callback for when an image's (uri) loading
      * either succeeds or fails (equiv. to Image.onLoadEnd()).
      */
-    onImageLoadEnd?: ImagePropsBase["onLoadEnd"];
+    onImageLoadEnd?: ImagePropsBase['onLoadEnd'];
     /**
      * Listener-callback for when an image's (uri) loading
      * fails (equiv. to Image.onError()).
      */
-    onImageLoadError?: ImagePropsBase["onError"];
+    onImageLoadError?: ImagePropsBase['onError'];
     /**
      * Label that can represent initials
      */
@@ -153,6 +153,7 @@ declare function createStyles(props: AvatarProps): {
     initials: {
         color: string | undefined;
         backgroundColor: string;
+        lineHeight: undefined;
     };
     ribbon: {
         backgroundColor: string;
diff --git a/generatedTypes/components/badge/index.d.ts b/generatedTypes/components/badge/index.d.ts
index 65b3e5bca2..5594255298 100644
--- a/generatedTypes/components/badge/index.d.ts
+++ b/generatedTypes/components/badge/index.d.ts
@@ -125,8 +125,8 @@ declare function createStyles(props: BadgeProps): {
         textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
         textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
         textDecorationStyle?: "solid" | "double" | "dotted" | "dashed" | undefined;
-        textDecorationColor?: string | undefined;
-        textShadowColor?: string | undefined;
+        textDecorationColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        textShadowColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         textShadowOffset?: {
             width: number;
             height: number;
@@ -137,22 +137,22 @@ declare function createStyles(props: BadgeProps): {
         fontVariant?: import("react-native").FontVariant[] | undefined;
         writingDirection?: "auto" | "ltr" | "rtl" | undefined;
         backfaceVisibility?: "visible" | "hidden" | undefined;
-        borderBottomColor?: string | undefined;
+        borderBottomColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         borderBottomEndRadius?: number | undefined;
         borderBottomLeftRadius?: number | undefined;
         borderBottomRightRadius?: number | undefined;
         borderBottomStartRadius?: number | undefined;
         borderBottomWidth?: number | undefined;
-        borderColor?: string | undefined;
-        borderEndColor?: string | undefined;
-        borderLeftColor?: string | undefined;
+        borderColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderEndColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderLeftColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         borderLeftWidth?: number | undefined;
         borderRadius?: number | undefined;
-        borderRightColor?: string | undefined;
+        borderRightColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         borderRightWidth?: number | undefined;
-        borderStartColor?: string | undefined;
+        borderStartColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         borderStyle?: "solid" | "dotted" | "dashed" | undefined;
-        borderTopColor?: string | undefined;
+        borderTopColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         borderTopEndRadius?: number | undefined;
         borderTopLeftRadius?: number | undefined;
         borderTopRightRadius?: number | undefined;
@@ -209,7 +209,7 @@ declare function createStyles(props: BadgeProps): {
         width?: string | number | undefined;
         zIndex?: number | undefined;
         direction?: "ltr" | "rtl" | "inherit" | undefined;
-        shadowColor?: string | undefined;
+        shadowColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         shadowOffset?: {
             width: number;
             height: number;
@@ -228,7 +228,7 @@ declare function createStyles(props: BadgeProps): {
     };
     labelSmall: {
         lineHeight: undefined;
-        color?: string | undefined;
+        color?: string | typeof import("react-native").OpaqueColorValue | undefined;
         fontFamily?: string | undefined;
         fontSize?: number | undefined;
         fontStyle?: "normal" | "italic" | undefined;
@@ -237,8 +237,8 @@ declare function createStyles(props: BadgeProps): {
         textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
         textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
         textDecorationStyle?: "solid" | "double" | "dotted" | "dashed" | undefined;
-        textDecorationColor?: string | undefined;
-        textShadowColor?: string | undefined;
+        textDecorationColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        textShadowColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         textShadowOffset?: {
             width: number;
             height: number;
@@ -249,23 +249,23 @@ declare function createStyles(props: BadgeProps): {
         fontVariant?: import("react-native").FontVariant[] | undefined;
         writingDirection?: "auto" | "ltr" | "rtl" | undefined;
         backfaceVisibility?: "visible" | "hidden" | undefined;
-        backgroundColor?: string | undefined;
-        borderBottomColor?: string | undefined;
+        backgroundColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderBottomColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         borderBottomEndRadius?: number | undefined;
         borderBottomLeftRadius?: number | undefined;
         borderBottomRightRadius?: number | undefined;
         borderBottomStartRadius?: number | undefined;
         borderBottomWidth?: number | undefined;
-        borderColor?: string | undefined;
-        borderEndColor?: string | undefined;
-        borderLeftColor?: string | undefined;
+        borderColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderEndColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderLeftColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         borderLeftWidth?: number | undefined;
         borderRadius?: number | undefined;
-        borderRightColor?: string | undefined;
+        borderRightColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         borderRightWidth?: number | undefined;
-        borderStartColor?: string | undefined;
+        borderStartColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         borderStyle?: "solid" | "dotted" | "dashed" | undefined;
-        borderTopColor?: string | undefined;
+        borderTopColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         borderTopEndRadius?: number | undefined;
         borderTopLeftRadius?: number | undefined;
         borderTopRightRadius?: number | undefined;
@@ -322,7 +322,7 @@ declare function createStyles(props: BadgeProps): {
         width?: string | number | undefined;
         zIndex?: number | undefined;
         direction?: "ltr" | "rtl" | "inherit" | undefined;
-        shadowColor?: string | undefined;
+        shadowColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
         shadowOffset?: {
             width: number;
             height: number;
@@ -374,7 +374,7 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
     /**
      * color of border around the badge
      */
-    borderColor?: string | undefined;
+    borderColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
     /**
      * Additional styles for the top container
      */
diff --git a/generatedTypes/components/button/index.d.ts b/generatedTypes/components/button/index.d.ts
index abb87ed950..49904d30b9 100644
--- a/generatedTypes/components/button/index.d.ts
+++ b/generatedTypes/components/button/index.d.ts
@@ -9,7 +9,7 @@ export declare enum ButtonSize {
     medium = "medium",
     large = "large"
 }
-export declare enum AnimationDirection {
+export declare enum ButtonAnimationDirection {
     center = "center",
     left = "left",
     right = "right"
@@ -124,7 +124,7 @@ export declare type ButtonProps = TouchableOpacityProps & TypographyModifiers &
     /**
      * the direction of the animation ('left' and 'right' will effect the button's own alignment)
      */
-    animateTo?: AnimationDirection;
+    animateTo?: ButtonAnimationDirection;
 };
 export declare type ButtonPropTypes = ButtonProps;
 export declare type ButtonState = {
@@ -147,7 +147,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
         iconOnRight: boolean;
     };
     static sizes: typeof ButtonSize;
-    static animationDirection: typeof AnimationDirection;
+    static animationDirection: typeof ButtonAnimationDirection;
     constructor(props: Props);
     state: {
         size: undefined;
@@ -183,7 +183,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
             flex: number;
             flexDirection: "row";
         } | {
-            color?: string | undefined;
+            color?: string | typeof import("react-native").OpaqueColorValue | undefined;
             fontFamily?: string | undefined;
             fontSize?: number | undefined;
             fontStyle?: "normal" | "italic" | undefined;
@@ -193,8 +193,8 @@ declare class Button extends PureComponent<Props, ButtonState> {
             textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
             textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
             textDecorationStyle?: "solid" | "double" | "dotted" | "dashed" | undefined;
-            textDecorationColor?: string | undefined;
-            textShadowColor?: string | undefined;
+            textDecorationColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+            textShadowColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
             textShadowOffset?: {
                 width: number;
                 height: number;
@@ -205,23 +205,23 @@ declare class Button extends PureComponent<Props, ButtonState> {
             fontVariant?: import("react-native").FontVariant[] | undefined;
             writingDirection?: "auto" | "ltr" | "rtl" | undefined;
             backfaceVisibility?: "visible" | "hidden" | undefined;
-            backgroundColor: string;
-            borderBottomColor?: string | undefined;
+            backgroundColor: import("react-native").ColorValue;
+            borderBottomColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
             borderBottomEndRadius?: number | undefined;
             borderBottomLeftRadius?: number | undefined;
             borderBottomRightRadius?: number | undefined;
             borderBottomStartRadius?: number | undefined;
             borderBottomWidth?: number | undefined;
-            borderColor?: string | undefined;
-            borderEndColor?: string | undefined;
-            borderLeftColor?: string | undefined;
+            borderColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+            borderEndColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+            borderLeftColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
             borderLeftWidth?: number | undefined;
             borderRadius?: number | undefined;
-            borderRightColor?: string | undefined;
+            borderRightColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
             borderRightWidth?: number | undefined;
-            borderStartColor?: string | undefined;
+            borderStartColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
             borderStyle?: "solid" | "dotted" | "dashed" | undefined;
-            borderTopColor?: string | undefined;
+            borderTopColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
             borderTopEndRadius?: number | undefined;
             borderTopLeftRadius?: number | undefined;
             borderTopRightRadius?: number | undefined;
@@ -278,7 +278,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
             width?: string | number | undefined;
             zIndex?: number | undefined;
             direction?: "ltr" | "rtl" | "inherit" | undefined;
-            shadowColor?: string | undefined;
+            shadowColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
             shadowOffset?: {
                 width: number;
                 height: number;
@@ -337,7 +337,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
     render(): JSX.Element;
 }
 export { Button };
-declare const _default: React.ComponentClass<(Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
+declare const _default: React.ComponentClass<(Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
     backgroundColor?: string | undefined;
     throttleTime?: number | undefined;
     throttleOptions?: {
@@ -345,11 +345,161 @@ declare const _default: React.ComponentClass<(Pick<import("react-native").Toucha
         trailing: boolean;
     } | undefined;
     activeBackgroundColor?: string | undefined;
-    useNative?: boolean | undefined; /**
-     * Text to show inside the button
-     */
+    useNative?: boolean | undefined;
     customValue?: any;
-    style?: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | import("react-native").Animated.AnimatedProps<import("react-native").ViewStyle> | import("react-native").Animated.AnimatedProps<import("react-native").RegisteredStyle<import("react-native").ViewStyle>> | import("react-native").Animated.AnimatedProps<import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>> | null | undefined;
+    style?: false | {} | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | {
+        backfaceVisibility?: "visible" | "hidden" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        backgroundColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomEndRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomLeftRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomRightRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomStartRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderEndColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderLeftColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderLeftWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRightColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRightWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStartColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStyle?: "solid" | "dotted" | "dashed" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopEndRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopLeftRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopRightRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopStartRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        opacity?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        testID?: string | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        elevation?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignSelf?: "auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        aspectRatio?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderEndWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStartWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        bottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        display?: "none" | "flex" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        end?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flex?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexBasis?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexGrow?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexShrink?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        height?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        left?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        margin?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginBottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginEnd?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginHorizontal?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginLeft?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginRight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginStart?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginTop?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginVertical?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        maxHeight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        maxWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        minHeight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        minWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        overflow?: "visible" | "hidden" | "scroll" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        padding?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingBottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingEnd?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingHorizontal?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingLeft?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingRight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingStart?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingTop?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingVertical?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        position?: "absolute" | "relative" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        right?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        start?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        top?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        width?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        zIndex?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        direction?: "ltr" | "rtl" | "inherit" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowOffset?: import("react-native").Animated.WithAnimatedObject<{
+            width: number;
+            height: number;
+        }> | undefined;
+        shadowOpacity?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        transform?: import("react-native").Animated.WithAnimatedArray<import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform> | undefined;
+        transformMatrix?: import("react-native").Animated.WithAnimatedArray<number> | undefined;
+        rotation?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        scaleX?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        scaleY?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        translateX?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        translateY?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+    } | {
+        toString: ((radix?: number | undefined) => string) & (() => string);
+        toFixed: (fractionDigits?: number | undefined) => string;
+        toExponential: (fractionDigits?: number | undefined) => string;
+        toPrecision: (precision?: number | undefined) => string;
+        valueOf: (() => number) & (() => Object);
+        toLocaleString: ((locales?: string | string[] | undefined, options?: Intl.NumberFormatOptions | undefined) => string) & (() => string);
+        __registeredStyleBrand: import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle>;
+    } | {
+        [x: number]: false | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle> | import("react-native").Animated.WithAnimatedArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined> | readonly (false | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        length: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation;
+        toString: () => string;
+        toLocaleString: () => string;
+        pop: () => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        push: (...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        concat: {
+            (...items: ConcatArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>[]): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+            (...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | ConcatArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined> | null | undefined)[]): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        join: (separator?: string | undefined) => string;
+        reverse: () => (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        shift: () => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        slice: (start?: number | undefined, end?: number | undefined) => (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        sort: (compareFn?: ((a: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, b: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined) => number) | undefined) => import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>;
+        splice: {
+            (start: number, deleteCount?: number | undefined): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+            (start: number, deleteCount: number, ...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        unshift: (...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        indexOf: (searchElement: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        lastIndexOf: (searchElement: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        every: (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        some: (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        forEach: (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => void, thisArg?: any) => void;
+        map: <U>(callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U, thisArg?: any) => U[];
+        filter: {
+            <S extends false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>(callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S, thisArg?: any): S[];
+            (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        reduce: {
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            <U_1>(callbackfn: (previousValue: U_1, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U_1, initialValue: U_1): U_1;
+        };
+        reduceRight: {
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            <U_2>(callbackfn: (previousValue: U_2, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U_2, initialValue: U_2): U_2;
+        };
+        find: {
+            <S_1 extends false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>(predicate: (this: void, value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S_1, thisArg?: any): S_1 | undefined;
+            (predicate: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        };
+        findIndex: (predicate: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => number;
+        fill: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, start?: number | undefined, end?: number | undefined) => import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>;
+        copyWithin: (target: number, start: number, end?: number | undefined) => import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>;
+        entries: () => IterableIterator<[number, false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined]>;
+        keys: () => IterableIterator<number>;
+        values: () => IterableIterator<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>;
+        includes: (searchElement: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => boolean;
+        flatMap: <U_3, This = undefined>(callback: (this: This, value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[];
+        flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[];
+    } | null | undefined;
     onPress?: ((props: TouchableOpacityProps) => void) | undefined;
 } & import("../../commons/modifiers").CustomModifier & {
     /**
@@ -493,10 +643,10 @@ declare const _default: React.ComponentClass<(Pick<import("react-native").Toucha
     /**
      * the direction of the animation ('left' and 'right' will effect the button's own alignment)
      */
-    animateTo?: AnimationDirection | undefined;
+    animateTo?: ButtonAnimationDirection | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
-}) | (Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
+}) | (Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
     backgroundColor?: string | undefined;
     throttleTime?: number | undefined;
     throttleOptions?: {
@@ -504,11 +654,161 @@ declare const _default: React.ComponentClass<(Pick<import("react-native").Toucha
         trailing: boolean;
     } | undefined;
     activeBackgroundColor?: string | undefined;
-    useNative?: boolean | undefined; /**
-     * Text to show inside the button
-     */
+    useNative?: boolean | undefined;
     customValue?: any;
-    style?: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | import("react-native").Animated.AnimatedProps<import("react-native").ViewStyle> | import("react-native").Animated.AnimatedProps<import("react-native").RegisteredStyle<import("react-native").ViewStyle>> | import("react-native").Animated.AnimatedProps<import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>> | null | undefined;
+    style?: false | {} | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | {
+        backfaceVisibility?: "visible" | "hidden" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        backgroundColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomEndRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomLeftRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomRightRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomStartRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderEndColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderLeftColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderLeftWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRightColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRightWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStartColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStyle?: "solid" | "dotted" | "dashed" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopEndRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopLeftRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopRightRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopStartRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        opacity?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        testID?: string | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        elevation?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignSelf?: "auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        aspectRatio?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderEndWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStartWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        bottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        display?: "none" | "flex" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        end?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flex?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexBasis?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexGrow?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexShrink?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        height?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        left?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        margin?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginBottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginEnd?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginHorizontal?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginLeft?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginRight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginStart?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginTop?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginVertical?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        maxHeight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        maxWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        minHeight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        minWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        overflow?: "visible" | "hidden" | "scroll" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        padding?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingBottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingEnd?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingHorizontal?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingLeft?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingRight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingStart?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingTop?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingVertical?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        position?: "absolute" | "relative" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        right?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        start?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        top?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        width?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        zIndex?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        direction?: "ltr" | "rtl" | "inherit" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowOffset?: import("react-native").Animated.WithAnimatedObject<{
+            width: number;
+            height: number;
+        }> | undefined;
+        shadowOpacity?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        transform?: import("react-native").Animated.WithAnimatedArray<import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform> | undefined;
+        transformMatrix?: import("react-native").Animated.WithAnimatedArray<number> | undefined;
+        rotation?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        scaleX?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        scaleY?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        translateX?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        translateY?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+    } | {
+        toString: ((radix?: number | undefined) => string) & (() => string);
+        toFixed: (fractionDigits?: number | undefined) => string;
+        toExponential: (fractionDigits?: number | undefined) => string;
+        toPrecision: (precision?: number | undefined) => string;
+        valueOf: (() => number) & (() => Object);
+        toLocaleString: ((locales?: string | string[] | undefined, options?: Intl.NumberFormatOptions | undefined) => string) & (() => string);
+        __registeredStyleBrand: import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle>;
+    } | {
+        [x: number]: false | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle> | import("react-native").Animated.WithAnimatedArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined> | readonly (false | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        length: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation;
+        toString: () => string;
+        toLocaleString: () => string;
+        pop: () => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        push: (...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        concat: {
+            (...items: ConcatArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>[]): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+            (...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | ConcatArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined> | null | undefined)[]): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        join: (separator?: string | undefined) => string;
+        reverse: () => (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        shift: () => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        slice: (start?: number | undefined, end?: number | undefined) => (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        sort: (compareFn?: ((a: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, b: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined) => number) | undefined) => import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>;
+        splice: {
+            (start: number, deleteCount?: number | undefined): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+            (start: number, deleteCount: number, ...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        unshift: (...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        indexOf: (searchElement: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        lastIndexOf: (searchElement: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        every: (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        some: (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        forEach: (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => void, thisArg?: any) => void;
+        map: <U>(callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U, thisArg?: any) => U[];
+        filter: {
+            <S extends false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>(callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S, thisArg?: any): S[];
+            (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        reduce: {
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            <U_1>(callbackfn: (previousValue: U_1, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U_1, initialValue: U_1): U_1;
+        };
+        reduceRight: {
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            <U_2>(callbackfn: (previousValue: U_2, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U_2, initialValue: U_2): U_2;
+        };
+        find: {
+            <S_1 extends false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>(predicate: (this: void, value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S_1, thisArg?: any): S_1 | undefined;
+            (predicate: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        };
+        findIndex: (predicate: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => number;
+        fill: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, start?: number | undefined, end?: number | undefined) => import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>;
+        copyWithin: (target: number, start: number, end?: number | undefined) => import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>;
+        entries: () => IterableIterator<[number, false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined]>;
+        keys: () => IterableIterator<number>;
+        values: () => IterableIterator<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>;
+        includes: (searchElement: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => boolean;
+        flatMap: <U_3, This = undefined>(callback: (this: This, value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[];
+        flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[];
+    } | null | undefined;
     onPress?: ((props: TouchableOpacityProps) => void) | undefined;
 } & import("../../commons/modifiers").CustomModifier & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & {
     /**
@@ -652,10 +952,10 @@ declare const _default: React.ComponentClass<(Pick<import("react-native").Toucha
     /**
      * the direction of the animation ('left' and 'right' will effect the button's own alignment)
      */
-    animateTo?: AnimationDirection | undefined;
+    animateTo?: ButtonAnimationDirection | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
-}) | (Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
+}) | (Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
     backgroundColor?: string | undefined;
     throttleTime?: number | undefined;
     throttleOptions?: {
@@ -663,11 +963,161 @@ declare const _default: React.ComponentClass<(Pick<import("react-native").Toucha
         trailing: boolean;
     } | undefined;
     activeBackgroundColor?: string | undefined;
-    useNative?: boolean | undefined; /**
-     * Text to show inside the button
-     */
+    useNative?: boolean | undefined;
     customValue?: any;
-    style?: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | import("react-native").Animated.AnimatedProps<import("react-native").ViewStyle> | import("react-native").Animated.AnimatedProps<import("react-native").RegisteredStyle<import("react-native").ViewStyle>> | import("react-native").Animated.AnimatedProps<import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>> | null | undefined;
+    style?: false | {} | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | {
+        backfaceVisibility?: "visible" | "hidden" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        backgroundColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomEndRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomLeftRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomRightRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomStartRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderEndColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderLeftColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderLeftWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRightColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRightWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStartColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStyle?: "solid" | "dotted" | "dashed" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopEndRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopLeftRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopRightRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopStartRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        opacity?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        testID?: string | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        elevation?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignSelf?: "auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        aspectRatio?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderEndWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStartWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        bottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        display?: "none" | "flex" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        end?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flex?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexBasis?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexGrow?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexShrink?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        height?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        left?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        margin?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginBottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginEnd?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginHorizontal?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginLeft?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginRight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginStart?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginTop?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginVertical?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        maxHeight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        maxWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        minHeight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        minWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        overflow?: "visible" | "hidden" | "scroll" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        padding?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingBottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingEnd?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingHorizontal?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingLeft?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingRight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingStart?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingTop?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingVertical?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        position?: "absolute" | "relative" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        right?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        start?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        top?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        width?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        zIndex?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        direction?: "ltr" | "rtl" | "inherit" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowOffset?: import("react-native").Animated.WithAnimatedObject<{
+            width: number;
+            height: number;
+        }> | undefined;
+        shadowOpacity?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        transform?: import("react-native").Animated.WithAnimatedArray<import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform> | undefined;
+        transformMatrix?: import("react-native").Animated.WithAnimatedArray<number> | undefined;
+        rotation?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        scaleX?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        scaleY?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        translateX?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        translateY?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+    } | {
+        toString: ((radix?: number | undefined) => string) & (() => string);
+        toFixed: (fractionDigits?: number | undefined) => string;
+        toExponential: (fractionDigits?: number | undefined) => string;
+        toPrecision: (precision?: number | undefined) => string;
+        valueOf: (() => number) & (() => Object);
+        toLocaleString: ((locales?: string | string[] | undefined, options?: Intl.NumberFormatOptions | undefined) => string) & (() => string);
+        __registeredStyleBrand: import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle>;
+    } | {
+        [x: number]: false | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle> | import("react-native").Animated.WithAnimatedArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined> | readonly (false | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        length: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation;
+        toString: () => string;
+        toLocaleString: () => string;
+        pop: () => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        push: (...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        concat: {
+            (...items: ConcatArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>[]): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+            (...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | ConcatArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined> | null | undefined)[]): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        join: (separator?: string | undefined) => string;
+        reverse: () => (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        shift: () => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        slice: (start?: number | undefined, end?: number | undefined) => (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        sort: (compareFn?: ((a: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, b: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined) => number) | undefined) => import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>;
+        splice: {
+            (start: number, deleteCount?: number | undefined): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+            (start: number, deleteCount: number, ...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        unshift: (...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        indexOf: (searchElement: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        lastIndexOf: (searchElement: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        every: (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        some: (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        forEach: (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => void, thisArg?: any) => void;
+        map: <U>(callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U, thisArg?: any) => U[];
+        filter: {
+            <S extends false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>(callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S, thisArg?: any): S[];
+            (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        reduce: {
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            <U_1>(callbackfn: (previousValue: U_1, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U_1, initialValue: U_1): U_1;
+        };
+        reduceRight: {
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            <U_2>(callbackfn: (previousValue: U_2, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U_2, initialValue: U_2): U_2;
+        };
+        find: {
+            <S_1 extends false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>(predicate: (this: void, value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S_1, thisArg?: any): S_1 | undefined;
+            (predicate: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        };
+        findIndex: (predicate: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => number;
+        fill: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, start?: number | undefined, end?: number | undefined) => import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>;
+        copyWithin: (target: number, start: number, end?: number | undefined) => import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>;
+        entries: () => IterableIterator<[number, false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined]>;
+        keys: () => IterableIterator<number>;
+        values: () => IterableIterator<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>;
+        includes: (searchElement: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => boolean;
+        flatMap: <U_3, This = undefined>(callback: (this: This, value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[];
+        flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[];
+    } | null | undefined;
     onPress?: ((props: TouchableOpacityProps) => void) | undefined;
 } & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & {
     /**
@@ -811,10 +1261,10 @@ declare const _default: React.ComponentClass<(Pick<import("react-native").Toucha
     /**
      * the direction of the animation ('left' and 'right' will effect the button's own alignment)
      */
-    animateTo?: AnimationDirection | undefined;
+    animateTo?: ButtonAnimationDirection | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
-}) | (Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
+}) | (Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
     backgroundColor?: string | undefined;
     throttleTime?: number | undefined;
     throttleOptions?: {
@@ -822,11 +1272,161 @@ declare const _default: React.ComponentClass<(Pick<import("react-native").Toucha
         trailing: boolean;
     } | undefined;
     activeBackgroundColor?: string | undefined;
-    useNative?: boolean | undefined; /**
-     * Text to show inside the button
-     */
+    useNative?: boolean | undefined;
     customValue?: any;
-    style?: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | import("react-native").Animated.AnimatedProps<import("react-native").ViewStyle> | import("react-native").Animated.AnimatedProps<import("react-native").RegisteredStyle<import("react-native").ViewStyle>> | import("react-native").Animated.AnimatedProps<import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>> | null | undefined;
+    style?: false | {} | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | {
+        backfaceVisibility?: "visible" | "hidden" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        backgroundColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomEndRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomLeftRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomRightRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomStartRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderEndColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderLeftColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderLeftWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRightColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRightWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStartColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStyle?: "solid" | "dotted" | "dashed" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopEndRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopLeftRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopRightRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopStartRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        opacity?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        testID?: string | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        elevation?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignSelf?: "auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        aspectRatio?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderEndWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStartWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        bottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        display?: "none" | "flex" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        end?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flex?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexBasis?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexGrow?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexShrink?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        height?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        left?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        margin?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginBottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginEnd?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginHorizontal?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginLeft?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginRight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginStart?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginTop?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginVertical?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        maxHeight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        maxWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        minHeight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        minWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        overflow?: "visible" | "hidden" | "scroll" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        padding?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingBottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingEnd?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingHorizontal?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingLeft?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingRight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingStart?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingTop?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingVertical?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        position?: "absolute" | "relative" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        right?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        start?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        top?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        width?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        zIndex?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        direction?: "ltr" | "rtl" | "inherit" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowOffset?: import("react-native").Animated.WithAnimatedObject<{
+            width: number;
+            height: number;
+        }> | undefined;
+        shadowOpacity?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        transform?: import("react-native").Animated.WithAnimatedArray<import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform> | undefined;
+        transformMatrix?: import("react-native").Animated.WithAnimatedArray<number> | undefined;
+        rotation?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        scaleX?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        scaleY?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        translateX?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        translateY?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+    } | {
+        toString: ((radix?: number | undefined) => string) & (() => string);
+        toFixed: (fractionDigits?: number | undefined) => string;
+        toExponential: (fractionDigits?: number | undefined) => string;
+        toPrecision: (precision?: number | undefined) => string;
+        valueOf: (() => number) & (() => Object);
+        toLocaleString: ((locales?: string | string[] | undefined, options?: Intl.NumberFormatOptions | undefined) => string) & (() => string);
+        __registeredStyleBrand: import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle>;
+    } | {
+        [x: number]: false | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle> | import("react-native").Animated.WithAnimatedArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined> | readonly (false | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        length: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation;
+        toString: () => string;
+        toLocaleString: () => string;
+        pop: () => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        push: (...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        concat: {
+            (...items: ConcatArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>[]): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+            (...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | ConcatArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined> | null | undefined)[]): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        join: (separator?: string | undefined) => string;
+        reverse: () => (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        shift: () => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        slice: (start?: number | undefined, end?: number | undefined) => (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        sort: (compareFn?: ((a: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, b: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined) => number) | undefined) => import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>;
+        splice: {
+            (start: number, deleteCount?: number | undefined): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+            (start: number, deleteCount: number, ...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        unshift: (...items: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        indexOf: (searchElement: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        lastIndexOf: (searchElement: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        every: (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        some: (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        forEach: (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => void, thisArg?: any) => void;
+        map: <U>(callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U, thisArg?: any) => U[];
+        filter: {
+            <S extends false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>(callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S, thisArg?: any): S[];
+            (callbackfn: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        reduce: {
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            <U_1>(callbackfn: (previousValue: U_1, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U_1, initialValue: U_1): U_1;
+        };
+        reduceRight: {
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+            <U_2>(callbackfn: (previousValue: U_2, currentValue: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U_2, initialValue: U_2): U_2;
+        };
+        find: {
+            <S_1 extends false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>(predicate: (this: void, value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S_1, thisArg?: any): S_1 | undefined;
+            (predicate: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined;
+        };
+        findIndex: (predicate: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => number;
+        fill: (value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, start?: number | undefined, end?: number | undefined) => import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>;
+        copyWithin: (target: number, start: number, end?: number | undefined) => import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined>;
+        entries: () => IterableIterator<[number, false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined]>;
+        keys: () => IterableIterator<number>;
+        values: () => IterableIterator<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined>;
+        includes: (searchElement: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => boolean;
+        flatMap: <U_3, This = undefined>(callback: (this: This, value: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined> | readonly (false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | null | undefined)[] | null | undefined)[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[];
+        flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[];
+    } | null | undefined;
     onPress?: ((props: TouchableOpacityProps) => void) | undefined;
 } & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & {
     /**
@@ -970,7 +1570,7 @@ declare const _default: React.ComponentClass<(Pick<import("react-native").Toucha
     /**
      * the direction of the animation ('left' and 'right' will effect the button's own alignment)
      */
-    animateTo?: AnimationDirection | undefined;
+    animateTo?: ButtonAnimationDirection | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
 }), any> & typeof Button;
diff --git a/generatedTypes/components/card/index.d.ts b/generatedTypes/components/card/index.d.ts
index 43744609e0..225df9cdf3 100644
--- a/generatedTypes/components/card/index.d.ts
+++ b/generatedTypes/components/card/index.d.ts
@@ -63,7 +63,7 @@ export declare type CardProps = ViewProps & TouchableOpacityProps & {
     };
 };
 export declare type CardPropTypes = CardProps;
-declare const _default: React.ComponentClass<ViewProps & Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
+declare const _default: React.ComponentClass<ViewProps & Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
     backgroundColor?: string | undefined;
     throttleTime?: number | undefined;
     throttleOptions?: {
@@ -75,7 +75,159 @@ declare const _default: React.ComponentClass<ViewProps & Pick<import("react-nati
     customValue?: any; /**
      * card custom height
      */
-    style?: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | Animated.AnimatedProps<ViewStyle> | Animated.AnimatedProps<import("react-native").RegisteredStyle<ViewStyle>> | Animated.AnimatedProps<import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>> | null | undefined;
+    style?: false | {} | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | {
+        backfaceVisibility?: "visible" | "hidden" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        backgroundColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderBottomColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderBottomEndRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderBottomLeftRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderBottomRightRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderBottomStartRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderBottomWidth?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderEndColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderLeftColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderLeftWidth?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderRightColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderRightWidth?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderStartColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderStyle?: "solid" | "dotted" | "dashed" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderTopColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderTopEndRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderTopLeftRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderTopRightRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderTopStartRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderTopWidth?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderWidth?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        opacity?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        testID?: string | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        elevation?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        alignSelf?: "auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        aspectRatio?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderEndWidth?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderStartWidth?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        bottom?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        display?: "none" | "flex" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        end?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        flex?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        flexBasis?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        flexGrow?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        flexShrink?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        height?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        left?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        margin?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginBottom?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginEnd?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginHorizontal?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginLeft?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginRight?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginStart?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginTop?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginVertical?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        maxHeight?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        maxWidth?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        minHeight?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        minWidth?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        overflow?: "visible" | "hidden" | "scroll" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        padding?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingBottom?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingEnd?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingHorizontal?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingLeft?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingRight?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingStart?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingTop?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingVertical?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        position?: "absolute" | "relative" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        right?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        start?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        top?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        width?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        zIndex?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        direction?: "ltr" | "rtl" | "inherit" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        shadowColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        shadowOffset?: Animated.WithAnimatedObject<{
+            width: number;
+            height: number;
+        }> | undefined;
+        shadowOpacity?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        shadowRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        transform?: Animated.WithAnimatedArray<import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform> | undefined;
+        transformMatrix?: Animated.WithAnimatedArray<number> | undefined;
+        rotation?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        scaleX?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        scaleY?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        translateX?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        translateY?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+    } | {
+        toString: ((radix?: number | undefined) => string) & (() => string);
+        toFixed: (fractionDigits?: number | undefined) => string;
+        toExponential: (fractionDigits?: number | undefined) => string;
+        toPrecision: (precision?: number | undefined) => string;
+        valueOf: (() => number) & (() => Object);
+        toLocaleString: ((locales?: string | string[] | undefined, options?: Intl.NumberFormatOptions | undefined) => string) & (() => string);
+        __registeredStyleBrand: Animated.WithAnimatedObject<ViewStyle>;
+    } | {
+        [x: number]: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined> | readonly (false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | null | undefined)[] | null | undefined;
+        length: number | Animated.Value | Animated.AnimatedInterpolation;
+        toString: () => string;
+        toLocaleString: () => string;
+        pop: () => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+        push: (...items: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        concat: {
+            (...items: ConcatArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined>[]): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+            (...items: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | ConcatArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined> | null | undefined)[]): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        join: (separator?: string | undefined) => string;
+        reverse: () => (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        shift: () => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+        slice: (start?: number | undefined, end?: number | undefined) => (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        sort: (compareFn?: ((a: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, b: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined) => number) | undefined) => import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>;
+        splice: {
+            (start: number, deleteCount?: number | undefined): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+            (start: number, deleteCount: number, ...items: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        unshift: (...items: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        indexOf: (searchElement: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        lastIndexOf: (searchElement: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        every: (callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        some: (callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        forEach: (callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => void, thisArg?: any) => void;
+        map: <U>(callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => U, thisArg?: any) => U[];
+        filter: {
+            <S extends false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined>(callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S, thisArg?: any): S[];
+            (callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        reduce: {
+            (callbackfn: (previousValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+            <U_1>(callbackfn: (previousValue: U_1, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => U_1, initialValue: U_1): U_1;
+        };
+        reduceRight: {
+            (callbackfn: (previousValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+            <U_2>(callbackfn: (previousValue: U_2, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => U_2, initialValue: U_2): U_2;
+        };
+        find: {
+            <S_1 extends false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined>(predicate: (this: void, value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S_1, thisArg?: any): S_1 | undefined;
+            (predicate: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+        };
+        findIndex: (predicate: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => number;
+        fill: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, start?: number | undefined, end?: number | undefined) => import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>;
+        copyWithin: (target: number, start: number, end?: number | undefined) => import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>;
+        entries: () => IterableIterator<[number, false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined]>;
+        keys: () => IterableIterator<number>;
+        values: () => IterableIterator<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined>;
+        includes: (searchElement: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => boolean;
+        flatMap: <U_3, This = undefined>(callback: (this: This, value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[];
+        flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[];
+    } | null | undefined;
     onPress?: ((props: TouchableOpacityProps) => void) | undefined;
 } & {
     /**
diff --git a/generatedTypes/components/carousel/index.d.ts b/generatedTypes/components/carousel/index.d.ts
index fb7dbc7a9c..a5d711e760 100644
--- a/generatedTypes/components/carousel/index.d.ts
+++ b/generatedTypes/components/carousel/index.d.ts
@@ -2,8 +2,7 @@ import React, { Component, RefObject, ReactNode, Key } from 'react';
 import { ScrollView, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
 import { CarouselProps, CarouselState, PageControlPosition } from './types';
 export { CarouselProps };
-interface DefaultProps extends Partial<CarouselProps> {
-}
+declare type DefaultProps = Partial<CarouselProps>;
 /**
  * @description: Carousel for scrolling pages horizontally
  * @gif: https://media.giphy.com/media/l0HU7f8gjpRlMRhKw/giphy.gif, https://media.giphy.com/media/3oFzmcjX9OhpyckhcQ/giphy.gif
diff --git a/generatedTypes/components/chip/index.d.ts b/generatedTypes/components/chip/index.d.ts
index ebe10848dd..c65c030f58 100644
--- a/generatedTypes/components/chip/index.d.ts
+++ b/generatedTypes/components/chip/index.d.ts
@@ -94,7 +94,7 @@ export declare type ChipProps = ViewProps & TouchableOpacityProps & {
     dismissContainerStyle?: StyleProp<ImageStyle>;
 };
 export declare type ChipPropTypes = ChipProps;
-declare const _default: React.ComponentClass<ViewProps & Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
+declare const _default: React.ComponentClass<ViewProps & Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
     backgroundColor?: string | undefined;
     throttleTime?: number | undefined;
     throttleOptions?: {
@@ -104,7 +104,159 @@ declare const _default: React.ComponentClass<ViewProps & Pick<import("react-nati
     activeBackgroundColor?: string | undefined;
     useNative?: boolean | undefined;
     customValue?: any;
-    style?: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | import("react-native").Animated.AnimatedProps<ViewStyle> | import("react-native").Animated.AnimatedProps<import("react-native").RegisteredStyle<ViewStyle>> | import("react-native").Animated.AnimatedProps<import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>> | null | undefined;
+    style?: false | {} | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | {
+        backfaceVisibility?: "visible" | "hidden" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        backgroundColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomEndRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomLeftRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomRightRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomStartRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderBottomWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderEndColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderLeftColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderLeftWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRightColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderRightWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStartColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStyle?: "solid" | "dotted" | "dashed" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopEndRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopLeftRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopRightRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopStartRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderTopWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderWidth?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        opacity?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        testID?: string | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        elevation?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        alignSelf?: "auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        aspectRatio?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderEndWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        borderStartWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        bottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        display?: "none" | "flex" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        end?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flex?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexBasis?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexGrow?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexShrink?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        height?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        left?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        margin?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginBottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginEnd?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginHorizontal?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginLeft?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginRight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginStart?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginTop?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        marginVertical?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        maxHeight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        maxWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        minHeight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        minWidth?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        overflow?: "visible" | "hidden" | "scroll" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        padding?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingBottom?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingEnd?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingHorizontal?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingLeft?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingRight?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingStart?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingTop?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        paddingVertical?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        position?: "absolute" | "relative" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        right?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        start?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        top?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        width?: string | number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        zIndex?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        direction?: "ltr" | "rtl" | "inherit" | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowColor?: string | typeof import("react-native").OpaqueColorValue | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowOffset?: import("react-native").Animated.WithAnimatedObject<{
+            width: number;
+            height: number;
+        }> | undefined;
+        shadowOpacity?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        shadowRadius?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        transform?: import("react-native").Animated.WithAnimatedArray<import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform> | undefined;
+        transformMatrix?: import("react-native").Animated.WithAnimatedArray<number> | undefined;
+        rotation?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        scaleX?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        scaleY?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        translateX?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+        translateY?: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | undefined;
+    } | {
+        toString: ((radix?: number | undefined) => string) & (() => string);
+        toFixed: (fractionDigits?: number | undefined) => string;
+        toExponential: (fractionDigits?: number | undefined) => string;
+        toPrecision: (precision?: number | undefined) => string;
+        valueOf: (() => number) & (() => Object);
+        toLocaleString: ((locales?: string | string[] | undefined, options?: Intl.NumberFormatOptions | undefined) => string) & (() => string);
+        __registeredStyleBrand: import("react-native").Animated.WithAnimatedObject<ViewStyle>;
+    } | {
+        [x: number]: false | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | import("react-native").Animated.WithAnimatedObject<ViewStyle> | import("react-native").Animated.WithAnimatedArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined> | readonly (false | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation | import("react-native").Animated.WithAnimatedObject<ViewStyle> | null | undefined)[] | null | undefined;
+        length: number | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation;
+        toString: () => string;
+        toLocaleString: () => string;
+        pop: () => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+        push: (...items: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        concat: {
+            (...items: ConcatArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined>[]): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+            (...items: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | ConcatArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined> | null | undefined)[]): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        join: (separator?: string | undefined) => string;
+        reverse: () => (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        shift: () => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+        slice: (start?: number | undefined, end?: number | undefined) => (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        sort: (compareFn?: ((a: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, b: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined) => number) | undefined) => import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>;
+        splice: {
+            (start: number, deleteCount?: number | undefined): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+            (start: number, deleteCount: number, ...items: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        unshift: (...items: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        indexOf: (searchElement: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        lastIndexOf: (searchElement: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        every: (callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        some: (callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        forEach: (callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => void, thisArg?: any) => void;
+        map: <U>(callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => U, thisArg?: any) => U[];
+        filter: {
+            <S extends false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined>(callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S, thisArg?: any): S[];
+            (callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        reduce: {
+            (callbackfn: (previousValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+            <U_1>(callbackfn: (previousValue: U_1, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => U_1, initialValue: U_1): U_1;
+        };
+        reduceRight: {
+            (callbackfn: (previousValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+            <U_2>(callbackfn: (previousValue: U_2, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => U_2, initialValue: U_2): U_2;
+        };
+        find: {
+            <S_1 extends false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined>(predicate: (this: void, value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S_1, thisArg?: any): S_1 | undefined;
+            (predicate: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+        };
+        findIndex: (predicate: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => number;
+        fill: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, start?: number | undefined, end?: number | undefined) => import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>;
+        copyWithin: (target: number, start: number, end?: number | undefined) => import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>;
+        entries: () => IterableIterator<[number, false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined]>;
+        keys: () => IterableIterator<number>;
+        values: () => IterableIterator<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined>;
+        includes: (searchElement: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => boolean;
+        flatMap: <U_3, This = undefined>(callback: (this: This, value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[];
+        flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[];
+    } | null | undefined;
     onPress?: ((props: TouchableOpacityProps) => void) | undefined;
 } & {
     /**
@@ -161,7 +313,7 @@ declare const _default: React.ComponentClass<ViewProps & Pick<import("react-nati
     /**
      * Additional icon props
      */
-    iconProps?: Pick<ImageProps, "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "style" | "testID" | "onLayout" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "width" | "height" | "borderRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "aspectRatio" | "onError" | "onLoad" | "onLoadEnd" | "onLoadStart" | "progressiveRenderingEnabled" | "resizeMode" | "resizeMethod" | "loadingIndicatorSource" | "defaultSource" | "blurRadius" | "capInsets" | "onProgress" | "onPartialLoad" | "fadeDuration" | "cover" | "sourceTransformer" | "assetName" | "assetGroup" | "tintColor" | "supportRTL" | "overlayType" | "overlayColor" | "customOverlayContent"> | undefined;
+    iconProps?: Pick<ImageProps, "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "style" | "testID" | "onLayout" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "width" | "height" | "borderRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "aspectRatio" | "onError" | "onLoad" | "onLoadEnd" | "onLoadStart" | "progressiveRenderingEnabled" | "resizeMode" | "resizeMethod" | "loadingIndicatorSource" | "defaultSource" | "blurRadius" | "capInsets" | "onProgress" | "onPartialLoad" | "fadeDuration" | "cover" | "sourceTransformer" | "assetName" | "assetGroup" | "tintColor" | "supportRTL" | "overlayType" | "overlayColor" | "customOverlayContent"> | undefined;
     /**
      * Icon style
      */
diff --git a/generatedTypes/components/fader/index.d.ts b/generatedTypes/components/fader/index.d.ts
index 6472af6061..104aa410a4 100644
--- a/generatedTypes/components/fader/index.d.ts
+++ b/generatedTypes/components/fader/index.d.ts
@@ -1,7 +1,15 @@
 /// <reference types="react" />
 export declare enum FaderPosition {
+    /**
+     * @deprecated please use START instead
+     */
     LEFT = "LEFT",
+    START = "START",
+    /**
+     * @deprecated please use END instead
+     */
     RIGHT = "RIGHT",
+    END = "END",
     TOP = "TOP",
     BOTTOM = "BOTTOM"
 }
@@ -11,7 +19,7 @@ export declare type FaderProps = {
      */
     visible?: boolean;
     /**
-     * The position of the fader (the image is different), defaults to Fader.position.RIGHT
+     * The position of the fader (the image is different), defaults to Fader.position.END
      */
     position?: FaderPosition;
     /**
diff --git a/generatedTypes/components/radioButton/RadioButton.d.ts b/generatedTypes/components/radioButton/RadioButton.d.ts
index d0f447fd91..856e81d687 100644
--- a/generatedTypes/components/radioButton/RadioButton.d.ts
+++ b/generatedTypes/components/radioButton/RadioButton.d.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextStyle, ImageSourcePropType, ImageStyle, ViewProps } from 'react-native';
+import { TextStyle, StyleProp, ImageSourcePropType, ImageStyle, ViewStyle, ViewProps } from 'react-native';
 import { RadioGroupContextProps } from './RadioGroupContext';
 export declare type RadioButtonProps = RadioGroupContextProps & ViewProps & {
     /**
@@ -51,9 +51,13 @@ export declare type RadioButtonProps = RadioGroupContextProps & ViewProps & {
      */
     iconOnRight?: boolean;
     /**
-      * Should the content be rendered right to the button
-      */
+     * Should the content be rendered right to the button
+     */
     contentOnRight?: boolean;
+    /**
+     * Additional styling for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
 };
 export declare type RadioButtonPropTypes = RadioButtonProps;
 declare const _default: React.ComponentClass<RadioGroupContextProps & ViewProps & {
@@ -106,9 +110,13 @@ declare const _default: React.ComponentClass<RadioGroupContextProps & ViewProps
      */
     iconOnRight?: boolean | undefined;
     /**
-      * Should the content be rendered right to the button
-      */
+     * Should the content be rendered right to the button
+     */
     contentOnRight?: boolean | undefined;
+    /**
+     * Additional styling for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
 } & {
     useCustomTheme?: boolean | undefined;
 }, any>;
diff --git a/generatedTypes/components/scrollBar/ScrollBarGradient.d.ts b/generatedTypes/components/scrollBar/ScrollBarGradient.d.ts
new file mode 100644
index 0000000000..c600130f7c
--- /dev/null
+++ b/generatedTypes/components/scrollBar/ScrollBarGradient.d.ts
@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { ImageSourcePropType } from 'react-native';
+export interface ScrollBarGradientProps {
+    /**
+     * Is the gradient visible
+     */
+    visible?: boolean;
+    /**
+     * Should the gradient be on the left (reverse)
+     */
+    left?: boolean;
+    /**
+     * The gradient's width (default is 76)
+     */
+    gradientWidth?: number;
+    /**
+     * The gradient's height (default 100%)
+     */
+    gradientHeight?: number;
+    /**
+     * The gradient's margins (default is 0)
+     */
+    gradientMargins?: number;
+    /**
+     * The gradient's height (default 100%)
+     * @deprecated
+     */
+    height?: number;
+    /**
+     * The gradient's color (default is white)
+     */
+    gradientColor?: string;
+    /**
+     * Image source for the gradient (default is assets/gradientOverlay.png)
+     */
+    gradientImage?: ImageSourcePropType;
+}
+declare const ScrollBarGradient: {
+    ({ visible, left, gradientWidth, gradientHeight, gradientMargins, height, gradientColor, gradientImage }: ScrollBarGradientProps): JSX.Element;
+    displayName: string;
+};
+export default ScrollBarGradient;
diff --git a/generatedTypes/components/scrollBar/index.d.ts b/generatedTypes/components/scrollBar/index.d.ts
new file mode 100644
index 0000000000..b8d9fec45e
--- /dev/null
+++ b/generatedTypes/components/scrollBar/index.d.ts
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import { Animated, FlatListProps, ImageSourcePropType, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent } from 'react-native';
+import { ForwardRefInjectedProps } from '../../commons/new';
+export interface ScrollBarProps extends FlatListProps<any> {
+    /**
+       * Whether to use a FlatList. NOTE: you must pass 'data' and 'renderItem' props as well
+       */
+    useList?: boolean;
+    /**
+     * The element to use as a container, instead of a View
+     */
+    containerView?: React.ComponentClass;
+    /**
+     * The props to pass the container
+     */
+    containerProps?: object;
+    /**
+     * The component's height
+     */
+    height?: number;
+    /**
+     * The gradient's height, defaults to the component's height
+     */
+    gradientHeight?: number;
+    /**
+     * The gradient's width
+     */
+    gradientWidth?: number;
+    /**
+     * The gradient's margins for the edge
+     */
+    gradientMargins?: number;
+    /**
+     * The gradient's tint color
+     */
+    gradientColor?: string;
+    /**
+     * The gradient's image, instead of the default image.
+     * NOTE: pass an image for the right-hand side and it will be flipped to match the left-hand side
+     */
+    gradientImage?: ImageSourcePropType;
+    /**
+     * The index to currently focus on
+     */
+    focusIndex?: number;
+}
+declare type Props = ScrollBarProps & ForwardRefInjectedProps;
+declare type State = {
+    gradientOpacity: Animated.Value;
+    gradientOpacityLeft: Animated.Value;
+};
+/**
+ * @description: Scrollable container with animated gradient overlay for horizontal scroll
+ * @extends: ScrollView / FlatList
+ */
+declare class ScrollBar extends Component<Props, State> {
+    static displayName: string;
+    static defaultProps: {
+        gradientWidth: number;
+        gradientMargins: number;
+        gradientColor: string;
+        focusIndex: number;
+    };
+    static Item: typeof Item;
+    constructor(props: Props);
+    private scrollbar;
+    private itemsLayouts;
+    private contentOffset;
+    private scrollContentWidth;
+    private containerWidth;
+    componentDidUpdate(prevProps: Props): void;
+    focusIndex: (index?: number) => void;
+    animateGradientOpacity: (offsetX: number, contentWidth: number, containerWidth: number) => void;
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
+    onLayout: (event: LayoutChangeEvent) => void;
+    onItemLayout: ({ layout, index }: any) => void;
+    renderScrollable(): JSX.Element;
+    renderGradient(left: boolean): JSX.Element;
+    render(): JSX.Element;
+}
+declare const Item: {
+    ({ children, index, onLayout }: any): JSX.Element;
+    displayName: string;
+};
+declare const _default: React.ComponentClass<ScrollBarProps & {
+    useCustomTheme?: boolean | undefined;
+}, any> & typeof ScrollBar;
+export default _default;
diff --git a/generatedTypes/components/switch/index.d.ts b/generatedTypes/components/switch/index.d.ts
index beea84bc0c..558f34284d 100644
--- a/generatedTypes/components/switch/index.d.ts
+++ b/generatedTypes/components/switch/index.d.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle, ColorValue } from 'react-native';
 export declare type SwitchProps = {
     /**
      * The value of the switch. If true the switch will be turned on. Default value is false
@@ -24,19 +24,19 @@ export declare type SwitchProps = {
     /**
      * The Switch background color when it's turned on
      */
-    onColor?: string;
+    onColor?: ColorValue;
     /**
      * The Switch background color when it's turned off
      */
-    offColor?: string;
+    offColor?: ColorValue;
     /**
      * The Switch background color when it's disabled
      */
-    disabledColor?: string;
+    disabledColor?: ColorValue;
     /**
      * The Switch's thumb color
      */
-    thumbColor?: string;
+    thumbColor?: ColorValue;
     /**
      * The Switch's thumb size (width & height)
      */
@@ -44,7 +44,7 @@ export declare type SwitchProps = {
     /**
      * The Switch's thumb style
      */
-    thumbStyle?: object | number | [];
+    thumbStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 };
diff --git a/generatedTypes/components/tabBar/TabBarItem.d.ts b/generatedTypes/components/tabBar/TabBarItem.d.ts
index ab1fc544e3..b2dcdaa6fa 100644
--- a/generatedTypes/components/tabBar/TabBarItem.d.ts
+++ b/generatedTypes/components/tabBar/TabBarItem.d.ts
@@ -1,8 +1,7 @@
 import React from 'react';
-import { Animated, ViewStyle, TextStyle } from 'react-native';
-import { BaseComponentInjectedProps } from '../../commons/new';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { BadgeProps } from '../badge';
-export declare type TabBarItemProps = BaseComponentInjectedProps & {
+export interface TabBarItemProps {
     /**
      * icon of the tab
      */
@@ -22,11 +21,12 @@ export declare type TabBarItemProps = BaseComponentInjectedProps & {
     /**
      * custom label style
      */
-    labelStyle?: TextStyle;
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * Badge component props to display next the item label
      */
     badge?: BadgeProps;
+    badgeProps?: BadgeProps;
     /**
      * maximum number of lines the label can break
      */
@@ -34,7 +34,7 @@ export declare type TabBarItemProps = BaseComponentInjectedProps & {
     /**
      * custom selected tab label style
      */
-    selectedLabelStyle: TextStyle;
+    selectedLabelStyle?: StyleProp<TextStyle>;
     /**
      * whether the tab is selected or not
      */
@@ -47,6 +47,10 @@ export declare type TabBarItemProps = BaseComponentInjectedProps & {
      * A fixed width for the item
      */
     width?: number;
+    /**
+     * tabBar's background color
+     */
+    backgroundColor?: string;
     /**
      * ignore of the tab
      */
@@ -54,7 +58,7 @@ export declare type TabBarItemProps = BaseComponentInjectedProps & {
     /**
      * callback for when pressing a tab
      */
-    onPress?: (props: any) => void;
+    onPress?: () => void;
     /**
      * whether to change the text to uppercase
      */
@@ -63,78 +67,12 @@ export declare type TabBarItemProps = BaseComponentInjectedProps & {
      * Apply background color on press for TouchableOpacity
      */
     activeBackgroundColor?: string;
-    indicatorStyle?: ViewStyle;
+    accessibilityLabel?: string;
+    indicatorStyle?: StyleProp<ViewStyle>;
     style?: ViewStyle;
     testID?: string;
-};
-export declare type State = {
-    indicatorOpacity?: Animated.Value;
-};
-declare const _default: React.ComponentClass<BaseComponentInjectedProps & {
-    /**
-     * icon of the tab
-     */
-    icon?: number | undefined;
-    /**
-     * icon tint color
-     */
-    iconColor?: string | undefined;
-    /**
-     * icon selected tint color
-     */
-    iconSelectedColor?: string | undefined;
-    /**
-     * label of the tab
-     */
-    label?: string | undefined;
-    /**
-     * custom label style
-     */
-    labelStyle?: TextStyle | undefined;
-    /**
-     * Badge component props to display next the item label
-     */
-    badge?: BadgeProps | undefined;
-    /**
-     * maximum number of lines the label can break
-     */
-    maxLines?: number | undefined;
-    /**
-     * custom selected tab label style
-     */
-    selectedLabelStyle: TextStyle;
-    /**
-     * whether the tab is selected or not
-     */
-    selected?: boolean | undefined;
-    /**
-     * whether the tab will have a divider on its right
-     */
-    showDivider?: boolean | undefined;
-    /**
-     * A fixed width for the item
-     */
-    width?: number | undefined;
-    /**
-     * ignore of the tab
-     */
-    ignore?: boolean | undefined;
-    /**
-     * callback for when pressing a tab
-     */
-    onPress?: ((props: any) => void) | undefined;
-    /**
-     * whether to change the text to uppercase
-     */
-    uppercase?: boolean | undefined;
-    /**
-     * Apply background color on press for TouchableOpacity
-     */
-    activeBackgroundColor?: string | undefined;
-    indicatorStyle?: ViewStyle | undefined;
-    style?: ViewStyle | undefined;
-    testID?: string | undefined;
-} & {
+}
+declare const _default: React.ComponentClass<TabBarItemProps & {
     useCustomTheme?: boolean | undefined;
-}, any> & State;
+}, any>;
 export default _default;
diff --git a/generatedTypes/components/tabBar/index.d.ts b/generatedTypes/components/tabBar/index.d.ts
index e4bf48c433..72825a0809 100644
--- a/generatedTypes/components/tabBar/index.d.ts
+++ b/generatedTypes/components/tabBar/index.d.ts
@@ -1,15 +1,14 @@
-import React from 'react';
-import { Animated, ViewStyle } from 'react-native';
-import { BaseComponentInjectedProps } from '../../commons/new';
-import { ViewProps } from '../view';
-import TabBarItem from './TabBarItem';
-export declare type TabBarProps = BaseComponentInjectedProps & ViewProps & {
+import React, { Component, ElementRef, RefObject } from 'react';
+import { ScrollView, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+import { ScrollBarProps } from '../scrollBar';
+import TabBarItem, { TabBarItemProps } from './TabBarItem';
+declare type TabBarProps = ScrollBarProps & {
     /**
      * Show Tab Bar bottom shadow
      */
     enableShadow?: boolean;
     /**
-     * The minimum number of tabs to render
+     * The minimum number of tabs to render in scroll mode
      */
     minTabsForScroll?: number;
     /**
@@ -19,39 +18,85 @@ export declare type TabBarProps = BaseComponentInjectedProps & ViewProps & {
     /**
      * callback for when index has change (will not be called on ignored items)
      */
-    onChangeIndex?: (props: any) => void;
+    onChangeIndex?: (index: number) => void;
     /**
      * callback for when tab selected
      */
-    onTabSelected?: (props: any) => void;
+    onTabSelected?: (index: number) => void;
     /**
      * custom style for the selected indicator
      */
-    indicatorStyle?: ViewStyle;
+    indicatorStyle?: StyleProp<ViewStyle>;
+    /**
+     * Tab Bar height
+     */
+    height?: number;
+    /**
+     * Pass when container width is different than the screen width
+     */
+    containerWidth?: number;
     /**
      * The background color
      */
-    backgroundColor: string;
+    backgroundColor?: string;
     /**
-     * Tab Bar height
+     * set darkTheme style
      */
-    height?: number;
-    children: React.ReactNode;
+    darkTheme?: boolean;
+    children?: React.ReactNode;
     style?: ViewStyle;
     testID?: string;
 };
-export declare type State = {
-    gradientOpacity: Animated.Value;
-    scrollEnabled?: boolean;
-    currentIndex?: number;
-};
-declare const _default: React.ComponentClass<BaseComponentInjectedProps & ViewProps & {
+interface State {
+    scrollEnabled: boolean;
+    currentIndex: number;
+}
+/**
+ * @description: TabBar Component
+ * @modifiers: alignment, flex, padding, margin, background, typography, color (list of supported modifiers)
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabBarScreen.tsx
+ * @extends: ScrollBar
+ * @extendsLink:https://github.com/wix/react-native-ui-lib/blob/master/src/components/scrollBar/index.js
+ * @notes: This is screen width component.
+ */
+declare class TabBar extends Component<TabBarProps, State> {
+    static displayName: string;
+    static defaultProps: Partial<TabBarProps>;
+    static Item: React.ComponentClass<TabBarItemProps & {
+        useCustomTheme?: boolean | undefined;
+    }, any>;
+    scrollContentWidth?: number;
+    contentOffset: {
+        x: number;
+        y: number;
+    };
+    scrollBar: RefObject<ScrollView>;
+    itemsRefs: ElementRef<typeof TabBarItem>[];
+    constructor(props: TabBarProps);
+    componentDidUpdate(prevProps: TabBarProps, prevState: State): void;
+    get childrenCount(): number;
+    get scrollContainerWidth(): number;
+    isIgnored(index: number): any;
+    hasOverflow(): boolean | 0 | undefined;
+    shouldBeMarked: (index: number) => boolean;
+    updateIndicator(index?: number): void;
+    scrollToSelected(animated?: boolean): void;
+    onChangeIndex(index: number): void;
+    onTabSelected(index: number): void;
+    onItemPress: (index: number, props: TabBarItemProps) => void;
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    onContentSizeChange: (width: number) => void;
+    renderTabBar(): JSX.Element;
+    renderChildren(): React.DetailedReactHTMLElement<any, HTMLElement>[] | null | undefined;
+    render(): JSX.Element;
+}
+declare const _default: React.ComponentClass<ScrollBarProps & {
     /**
      * Show Tab Bar bottom shadow
      */
     enableShadow?: boolean | undefined;
     /**
-     * The minimum number of tabs to render
+     * The minimum number of tabs to render in scroll mode
      */
     minTabsForScroll?: number | undefined;
     /**
@@ -61,29 +106,35 @@ declare const _default: React.ComponentClass<BaseComponentInjectedProps & ViewPr
     /**
      * callback for when index has change (will not be called on ignored items)
      */
-    onChangeIndex?: ((props: any) => void) | undefined;
+    onChangeIndex?: ((index: number) => void) | undefined;
     /**
      * callback for when tab selected
      */
-    onTabSelected?: ((props: any) => void) | undefined;
+    onTabSelected?: ((index: number) => void) | undefined;
     /**
      * custom style for the selected indicator
      */
-    indicatorStyle?: ViewStyle | undefined;
+    indicatorStyle?: StyleProp<ViewStyle>;
+    /**
+     * Tab Bar height
+     */
+    height?: number | undefined;
+    /**
+     * Pass when container width is different than the screen width
+     */
+    containerWidth?: number | undefined;
     /**
      * The background color
      */
-    backgroundColor: string;
+    backgroundColor?: string | undefined;
     /**
-     * Tab Bar height
+     * set darkTheme style
      */
-    height?: number | undefined;
-    children: React.ReactNode;
+    darkTheme?: boolean | undefined;
+    children?: React.ReactNode;
     style?: ViewStyle | undefined;
     testID?: string | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
-}, any> & {
-    Item: typeof TabBarItem;
-};
+}, any> & typeof TabBar;
 export default _default;
diff --git a/generatedTypes/components/tabController/FadedScrollView.d.ts b/generatedTypes/components/tabController/FadedScrollView.d.ts
new file mode 100644
index 0000000000..faea9908fc
--- /dev/null
+++ b/generatedTypes/components/tabController/FadedScrollView.d.ts
@@ -0,0 +1,7 @@
+import React from 'react';
+import { ViewProps, ScrollViewProps } from 'react-native';
+export declare type FadedScrollViewProps = ViewProps & ScrollViewProps & {
+    children?: React.ReactNode | React.ReactNode[];
+};
+declare const _default: React.ComponentClass<FadedScrollViewProps, any> | React.FunctionComponent<FadedScrollViewProps>;
+export default _default;
diff --git a/generatedTypes/components/tabController/PageCarousel.d.ts b/generatedTypes/components/tabController/PageCarousel.d.ts
new file mode 100644
index 0000000000..8ba68ac866
--- /dev/null
+++ b/generatedTypes/components/tabController/PageCarousel.d.ts
@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react';
+import _ from 'lodash';
+import Animated from 'react-native-reanimated';
+/**
+ * @description: TabController's Page Carousel
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
+ * @notes: You must pass `asCarousel` flag to TabController and render your TabPages inside a PageCarousel
+ */
+declare class PageCarousel extends PureComponent {
+    static displayName: string;
+    static contextType: React.Context<{}>;
+    carousel: React.RefObject<Animated.ScrollView>;
+    onScroll: (...args: any[]) => void;
+    componentDidMount(): void;
+    onTabChange: ([index]: readonly number[]) => void;
+    scrollToPage: (pageIndex: number) => void;
+    renderCodeBlock: (() => JSX.Element) & _.MemoizedFunction;
+    render(): JSX.Element;
+}
+export default PageCarousel;
diff --git a/generatedTypes/components/tabController/TabBar.d.ts b/generatedTypes/components/tabController/TabBar.d.ts
new file mode 100644
index 0000000000..93010721c5
--- /dev/null
+++ b/generatedTypes/components/tabController/TabBar.d.ts
@@ -0,0 +1,82 @@
+import React from 'react';
+import { TextProps, StyleProp, ViewStyle } from 'react-native';
+import { TabControllerItemProps } from './TabBarItem';
+export interface TabControllerBarProps {
+    /**
+     * The list of tab bar items
+     */
+    items?: TabControllerItemProps[];
+    /**
+     * Tab Bar height
+     */
+    height?: number;
+    /**
+     * Show Tab Bar bottom shadow
+     */
+    enableShadow?: boolean;
+    /**
+     * custom shadow style
+     */
+    shadowStyle?: StyleProp<ViewStyle>;
+    /**
+     * custom style for the selected indicator
+     */
+    indicatorStyle?: StyleProp<ViewStyle>;
+    /**
+     * custom label style
+     */
+    labelStyle?: TextProps;
+    /**
+     * custom selected label style
+     */
+    selectedLabelStyle?: TextProps;
+    /**
+     * the default label color
+     */
+    labelColor?: string;
+    /**
+     * the selected label color
+     */
+    selectedLabelColor?: string;
+    /**
+     * whether to change the text to uppercase
+     */
+    uppercase?: boolean;
+    /**
+     * icon tint color
+     */
+    iconColor?: string;
+    /**
+     * icon selected tint color
+     */
+    selectedIconColor?: string;
+    /**
+     * TODO: rename to feedbackColor
+     * Apply background color on press for TouchableOpacity
+     */
+    activeBackgroundColor?: string;
+    /**
+     * The TabBar background Color
+     */
+    backgroundColor?: string;
+    /**
+     * The TabBar container width
+     */
+    containerWidth?: number;
+    /**
+     * Pass to center selected item
+     */
+    centerSelected?: boolean;
+    /**
+     * Additional styles for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string;
+}
+declare const _default: React.ComponentClass<TabControllerBarProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;
diff --git a/generatedTypes/components/tabController/TabBarContext.d.ts b/generatedTypes/components/tabController/TabBarContext.d.ts
new file mode 100644
index 0000000000..1d957d22af
--- /dev/null
+++ b/generatedTypes/components/tabController/TabBarContext.d.ts
@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TabBarContext: React.Context<{}>;
+export default TabBarContext;
diff --git a/generatedTypes/components/tabController/TabBarItem.d.ts b/generatedTypes/components/tabController/TabBarItem.d.ts
new file mode 100644
index 0000000000..9486a74f55
--- /dev/null
+++ b/generatedTypes/components/tabController/TabBarItem.d.ts
@@ -0,0 +1,115 @@
+import { PureComponent } from 'react';
+import { TextStyle, LayoutRectangle, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import _ from 'lodash';
+import Reanimated from 'react-native-reanimated';
+import { State } from 'react-native-gesture-handler';
+import { BadgeProps } from '../../components/badge';
+export interface TabControllerItemProps {
+    /**
+     * label of the tab
+     */
+    label?: string;
+    /**
+     * custom label style
+     */
+    labelStyle?: TextStyle;
+    /**
+     * custom selected label style
+     */
+    selectedLabelStyle?: TextStyle;
+    /**
+     * the default label color
+     */
+    labelColor?: string;
+    /**
+     * the selected label color
+     */
+    selectedLabelColor?: string;
+    /**
+     * icon of the tab
+     */
+    icon?: number;
+    /**
+     * icon tint color
+     */
+    iconColor?: string;
+    /**
+     * icon selected tint color
+     */
+    selectedIconColor?: string;
+    /**
+     * Badge component props to display next the item label
+     */
+    badge?: BadgeProps;
+    /**
+     * maximun number of lines the label can break
+     */
+    /**
+     * whether the tab will have a divider on its right
+     */
+    /**
+     * A fixed width for the item
+     */
+    width?: number;
+    /**
+     * ignore of the tab
+     */
+    ignore?: boolean;
+    /**
+     * callback for when pressing a tab
+     */
+    onPress?: (index: number) => void;
+    /**
+     * whether to change the text to uppercase
+     */
+    uppercase?: boolean;
+    /**
+     * The active opacity when pressing a tab
+     */
+    activeOpacity?: number;
+    /**
+     * TODO: rename to feedbackColor
+     * Apply background color on press for TouchableOpacity
+     */
+    activeBackgroundColor?: string;
+    /**
+     * Pass custom style
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string;
+}
+interface Props extends TabControllerItemProps {
+    index: number;
+    targetPage: any;
+    state: State;
+    currentPage: Reanimated.Adaptable<number>;
+    onLayout: (layout: Partial<LayoutRectangle>, index: number) => void;
+}
+/**
+ * @description: TabController's TabBarItem
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
+ * @notes: Must be rendered as a direct child of TabController.TabBar.
+ */
+export default class TabBarItem extends PureComponent<Props> {
+    static displayName: string;
+    static defaultProps: {
+        activeOpacity: number;
+        onPress: (...args: any[]) => void;
+    };
+    private itemWidth?;
+    private itemRef;
+    constructor(props: Props);
+    onStateChange: (...args: any[]) => void;
+    onLayout: ({ nativeEvent: { layout: { width } } }: LayoutChangeEvent) => void;
+    onPress: () => void;
+    getItemStyle(): any[];
+    getLabelStyle(): (TextStyle | _.Dictionary<Reanimated.Node<number> | Reanimated.Node<string | number | boolean> | Reanimated.Node<"normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"> | undefined> | undefined)[];
+    getIconStyle(): {
+        tintColor: Reanimated.Node<string>;
+    };
+    render(): JSX.Element;
+}
+export {};
diff --git a/generatedTypes/components/tabController/TabPage.d.ts b/generatedTypes/components/tabController/TabPage.d.ts
new file mode 100644
index 0000000000..add727acf8
--- /dev/null
+++ b/generatedTypes/components/tabController/TabPage.d.ts
@@ -0,0 +1,71 @@
+import React, { PureComponent } from 'react';
+import Reanimated from 'react-native-reanimated';
+import _ from 'lodash';
+export interface TabControllerPageProps {
+    /**
+     * The index of the the TabPage
+     */
+    index: number;
+    /**
+     * Whether this page should be loaded lazily
+     */
+    lazy?: boolean;
+    /**
+     * How long to wait till lazy load complete (good for showing loader screens)
+     */
+    lazyLoadTime?: number;
+    /**
+     * Render a custom loading page when lazy loading
+     */
+    renderLoading?: () => JSX.Element;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string;
+}
+/**
+ * @description: TabController's TabPage
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
+ */
+export default class TabPage extends PureComponent<TabControllerPageProps> {
+    static displayName: string;
+    static contextType: React.Context<{}>;
+    static defaultProps: {
+        lazy: boolean;
+        activeOpacity: number;
+        lazyLoadTime: number;
+        renderLoading: (...args: any[]) => void;
+    };
+    state: {
+        loaded: boolean;
+    };
+    _loaded: Reanimated.Value<number>;
+    _opacity: Reanimated.Value<0>;
+    _zIndex: Reanimated.Value<0>;
+    _pageStyle: ({
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    } | {
+        width: number;
+        flex: number;
+        opacity: number;
+    } | {
+        opacity: Reanimated.Value<0>;
+        width?: undefined;
+        zIndex?: undefined;
+    } | {
+        width: any;
+        opacity?: undefined;
+        zIndex?: undefined;
+    } | {
+        zIndex: Reanimated.Value<0>;
+        opacity?: undefined;
+        width?: undefined;
+    } | undefined)[];
+    lazyLoad: () => void;
+    renderCodeBlock: (() => JSX.Element) & _.MemoizedFunction;
+    render(): JSX.Element;
+}
diff --git a/generatedTypes/components/tabController/index.d.ts b/generatedTypes/components/tabController/index.d.ts
new file mode 100644
index 0000000000..1bf432409a
--- /dev/null
+++ b/generatedTypes/components/tabController/index.d.ts
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import TabBar from './TabBar';
+import TabBarItem, { TabControllerItemProps } from './TabBarItem';
+import TabPage from './TabPage';
+import PageCarousel from './PageCarousel';
+export { TabControllerItemProps };
+export interface TabControllerProps {
+    /**
+     * The list of tab bar items
+     */
+    items: TabControllerItemProps[];
+    /**
+     * Initial selected index
+     */
+    selectedIndex: number;
+    /**
+     * callback for when index has change (will not be called on ignored items)
+     */
+    onChangeIndex?: (index: number) => void;
+    /**
+     * When using TabController.PageCarousel this should be turned on
+     */
+    asCarousel?: boolean;
+    /**
+     * Pass for custom carousel page width
+     */
+    carouselPageWidth?: number;
+}
+interface StateProps {
+    selectedIndex: number;
+    asCarousel?: boolean;
+    pageWidth: number;
+    items: TabControllerProps['items'];
+    itemStates: any[];
+    ignoredItems: any[];
+    targetPage: any;
+    currentPage: any;
+    carouselOffset: any;
+    containerWidth: any;
+    registerTabItems: (tabItemsCount: number, ignoredItems: StateProps['ignoredItems']) => void;
+    onChangeIndex?: (index: number) => void;
+}
+/**
+ * @description: A performant solution for a tab controller with lazy load mechanism
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
+ * @notes: This component is based on react-native-gesture-handler
+ * @important: On Android, if using react-native-navigation, make sure to wrap your screen with gestureHandlerRootHOC
+ * @importantLink: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation
+ */
+declare class TabController extends Component<TabControllerProps, StateProps> {
+    static displayName: string;
+    static contextType: React.Context<{}>;
+    static TabBar: typeof TabBar;
+    static TabBarItem: typeof TabBarItem;
+    static TabPage: typeof TabPage;
+    static PageCarousel: typeof PageCarousel;
+    static defaultProps: {
+        selectedIndex: number;
+        activeOpacity: number;
+    };
+    constructor(props: TabControllerProps);
+    static getDerivedStateFromProps(nextProps: TabControllerProps, prevState: StateProps): {
+        pageWidth: number;
+    } | null;
+    componentDidUpdate(_prevProps: TabControllerProps, prevState: StateProps): void;
+    get pageWidth(): number;
+    registerTabItems: (tabItemsCount: number, ignoredItems: StateProps['ignoredItems']) => void;
+    onPageChange: ([index]: readonly number[]) => void;
+    renderCodeBlock: (() => JSX.Element) & _.MemoizedFunction;
+    render(): JSX.Element;
+}
+declare const _default: React.ComponentClass<TabControllerProps & {
+    useCustomTheme?: boolean | undefined;
+}, any> & typeof TabController;
+export default _default;
diff --git a/generatedTypes/components/text/index.d.ts b/generatedTypes/components/text/index.d.ts
index 4c97e1e45e..e839e24a55 100644
--- a/generatedTypes/components/text/index.d.ts
+++ b/generatedTypes/components/text/index.d.ts
@@ -71,9 +71,7 @@ declare const _default: React.ComponentClass<(RNTextProps & import("../../common
     animated?: boolean | undefined;
     textAlign?: string | undefined;
 } & {
-    useCustomTheme?: boolean | undefined; /**
-     * whether to center the text (using textAlign)
-     */
+    useCustomTheme?: boolean | undefined;
 }) | (RNTextProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
     /**
      * color of the text
@@ -101,9 +99,7 @@ declare const _default: React.ComponentClass<(RNTextProps & import("../../common
     animated?: boolean | undefined;
     textAlign?: string | undefined;
 } & {
-    useCustomTheme?: boolean | undefined; /**
-     * whether to center the text (using textAlign)
-     */
+    useCustomTheme?: boolean | undefined;
 }) | (RNTextProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
     /**
      * color of the text
@@ -131,9 +127,7 @@ declare const _default: React.ComponentClass<(RNTextProps & import("../../common
     animated?: boolean | undefined;
     textAlign?: string | undefined;
 } & {
-    useCustomTheme?: boolean | undefined; /**
-     * whether to center the text (using textAlign)
-     */
+    useCustomTheme?: boolean | undefined;
 }) | (RNTextProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
     /**
      * color of the text
@@ -161,8 +155,6 @@ declare const _default: React.ComponentClass<(RNTextProps & import("../../common
     animated?: boolean | undefined;
     textAlign?: string | undefined;
 } & {
-    useCustomTheme?: boolean | undefined; /**
-     * whether to center the text (using textAlign)
-     */
+    useCustomTheme?: boolean | undefined;
 }), any>;
 export default _default;
diff --git a/generatedTypes/components/touchableOpacity/index.d.ts b/generatedTypes/components/touchableOpacity/index.d.ts
index 6fa9dd08b1..e82727626c 100644
--- a/generatedTypes/components/touchableOpacity/index.d.ts
+++ b/generatedTypes/components/touchableOpacity/index.d.ts
@@ -32,7 +32,7 @@ export declare type TouchableOpacityProps = Omit<RNTouchableOpacityProps, 'style
     style?: StyleProp<ViewStyle> | Animated.AnimatedProps<StyleProp<ViewStyle>>;
     onPress?: (props: TouchableOpacityProps) => void;
 };
-declare const _default: React.ComponentClass<Pick<RNTouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
+declare const _default: React.ComponentClass<Pick<RNTouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
     /**
      * background color for TouchableOpacity
      */
@@ -60,7 +60,159 @@ declare const _default: React.ComponentClass<Pick<RNTouchableOpacityProps, "test
      * Custom value of any type to pass on to TouchableOpacity and receive back in onPress callback
      */
     customValue?: any;
-    style?: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | Animated.AnimatedProps<ViewStyle> | Animated.AnimatedProps<import("react-native").RegisteredStyle<ViewStyle>> | Animated.AnimatedProps<import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>> | null | undefined;
+    style?: false | {} | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | {
+        backfaceVisibility?: "visible" | "hidden" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        backgroundColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderBottomColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderBottomEndRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderBottomLeftRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderBottomRightRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderBottomStartRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderBottomWidth?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderEndColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderLeftColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderLeftWidth?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderRightColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderRightWidth?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderStartColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderStyle?: "solid" | "dotted" | "dashed" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderTopColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderTopEndRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderTopLeftRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderTopRightRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderTopStartRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderTopWidth?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderWidth?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        opacity?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        testID?: string | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        elevation?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        alignSelf?: "auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        aspectRatio?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderEndWidth?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        borderStartWidth?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        bottom?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        display?: "none" | "flex" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        end?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        flex?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        flexBasis?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        flexGrow?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        flexShrink?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        height?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        left?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        margin?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginBottom?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginEnd?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginHorizontal?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginLeft?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginRight?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginStart?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginTop?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        marginVertical?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        maxHeight?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        maxWidth?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        minHeight?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        minWidth?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        overflow?: "visible" | "hidden" | "scroll" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        padding?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingBottom?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingEnd?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingHorizontal?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingLeft?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingRight?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingStart?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingTop?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        paddingVertical?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        position?: "absolute" | "relative" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        right?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        start?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        top?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        width?: string | number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        zIndex?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        direction?: "ltr" | "rtl" | "inherit" | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        shadowColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        shadowOffset?: Animated.WithAnimatedObject<{
+            width: number;
+            height: number;
+        }> | undefined;
+        shadowOpacity?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        shadowRadius?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        transform?: Animated.WithAnimatedArray<import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform> | undefined;
+        transformMatrix?: Animated.WithAnimatedArray<number> | undefined;
+        rotation?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        scaleX?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        scaleY?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        translateX?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+        translateY?: number | Animated.Value | Animated.AnimatedInterpolation | undefined;
+    } | {
+        toString: ((radix?: number | undefined) => string) & (() => string);
+        toFixed: (fractionDigits?: number | undefined) => string;
+        toExponential: (fractionDigits?: number | undefined) => string;
+        toPrecision: (precision?: number | undefined) => string;
+        valueOf: (() => number) & (() => Object);
+        toLocaleString: ((locales?: string | string[] | undefined, options?: Intl.NumberFormatOptions | undefined) => string) & (() => string);
+        __registeredStyleBrand: Animated.WithAnimatedObject<ViewStyle>;
+    } | {
+        [x: number]: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined> | readonly (false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | null | undefined)[] | null | undefined;
+        length: number | Animated.Value | Animated.AnimatedInterpolation;
+        toString: () => string;
+        toLocaleString: () => string;
+        pop: () => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+        push: (...items: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        concat: {
+            (...items: ConcatArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined>[]): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+            (...items: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | ConcatArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined> | null | undefined)[]): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        join: (separator?: string | undefined) => string;
+        reverse: () => (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        shift: () => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+        slice: (start?: number | undefined, end?: number | undefined) => (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        sort: (compareFn?: ((a: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, b: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined) => number) | undefined) => import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>;
+        splice: {
+            (start: number, deleteCount?: number | undefined): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+            (start: number, deleteCount: number, ...items: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        unshift: (...items: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => number;
+        indexOf: (searchElement: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        lastIndexOf: (searchElement: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => number;
+        every: (callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        some: (callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => boolean;
+        forEach: (callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => void, thisArg?: any) => void;
+        map: <U>(callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => U, thisArg?: any) => U[];
+        filter: {
+            <S extends false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined>(callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S, thisArg?: any): S[];
+            (callbackfn: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[];
+        };
+        reduce: {
+            (callbackfn: (previousValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+            <U_1>(callbackfn: (previousValue: U_1, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => U_1, initialValue: U_1): U_1;
+        };
+        reduceRight: {
+            (callbackfn: (previousValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+            (callbackfn: (previousValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, initialValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+            <U_2>(callbackfn: (previousValue: U_2, currentValue: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, currentIndex: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => U_2, initialValue: U_2): U_2;
+        };
+        find: {
+            <S_1 extends false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined>(predicate: (this: void, value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => value is S_1, thisArg?: any): S_1 | undefined;
+            (predicate: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any): false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined;
+        };
+        findIndex: (predicate: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, obj: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => unknown, thisArg?: any) => number;
+        fill: (value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, start?: number | undefined, end?: number | undefined) => import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>;
+        copyWithin: (target: number, start: number, end?: number | undefined) => import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>;
+        entries: () => IterableIterator<[number, false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined]>;
+        keys: () => IterableIterator<number>;
+        values: () => IterableIterator<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined>;
+        includes: (searchElement: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, fromIndex?: number | undefined) => boolean;
+        flatMap: <U_3, This = undefined>(callback: (this: This, value: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined, index: number, array: (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | readonly (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined)[] | null | undefined)[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[];
+        flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[];
+    } | null | undefined;
     onPress?: ((props: TouchableOpacityProps) => void) | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
diff --git a/generatedTypes/components/view/index.d.ts b/generatedTypes/components/view/index.d.ts
index e24d9bd950..0885c789ec 100644
--- a/generatedTypes/components/view/index.d.ts
+++ b/generatedTypes/components/view/index.d.ts
@@ -34,6 +34,8 @@ export interface ViewProps extends Omit<RNViewProps, 'style'>, ContainerModifier
 }
 export declare type ViewPropTypes = ViewProps;
 declare const _default: React.ComponentClass<ViewProps & {
-    useCustomTheme?: boolean | undefined;
+    useCustomTheme?: boolean | undefined; /**
+     * Use Animate.View as a container
+     */
 }, any>;
 export default _default;
diff --git a/generatedTypes/hooks/index.d.ts b/generatedTypes/hooks/index.d.ts
index 038d13a25f..be61c1f209 100644
--- a/generatedTypes/hooks/index.d.ts
+++ b/generatedTypes/hooks/index.d.ts
@@ -1 +1,2 @@
 export { default as useToggleValue } from './useToggleValue';
+export { default as useDidUpdate } from './useDidUpdate';
diff --git a/generatedTypes/hooks/useDidUpdate/index.d.ts b/generatedTypes/hooks/useDidUpdate/index.d.ts
new file mode 100644
index 0000000000..eb2a433453
--- /dev/null
+++ b/generatedTypes/hooks/useDidUpdate/index.d.ts
@@ -0,0 +1,5 @@
+/**
+ * This hook avoid calling useEffect on the initial value of his dependency array
+ */
+declare const useDidUpdate: (callback: () => void, dep: [any]) => void;
+export default useDidUpdate;
diff --git a/generatedTypes/incubator/TextField/index.d.ts b/generatedTypes/incubator/TextField/index.d.ts
index 77dfdccc30..f1fedae951 100644
--- a/generatedTypes/incubator/TextField/index.d.ts
+++ b/generatedTypes/incubator/TextField/index.d.ts
@@ -5,18 +5,70 @@
  * 3. Passing typography preset that includes lineHeight usually cause alignment issues with
  * other elements (leading/trailing accessories). It usually best to set lineHeight with undefined
  */
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { ViewStyle, TextStyle } from 'react-native';
+import { ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers, PaddingModifiers, TypographyModifiers, ColorsModifiers } from '../../commons/new';
 import { ValidationMessagePosition, Validator } from './types';
 import { InputProps } from './Input';
 import { ValidationMessageProps } from './ValidationMessage';
 import { LabelProps } from './Label';
 import { FloatingPlaceholderProps } from './FloatingPlaceholder';
 import { CharCounterProps } from './CharCounter';
+export declare type TextFieldProps = MarginModifiers & PaddingModifiers & TypographyModifiers & ColorsModifiers & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Omit<CharCounterProps, 'maxLength'> & {
+    /**
+     * Pass to render a leading element
+     */
+    leadingAccessory?: ReactElement;
+    /**
+     * Pass to render a trailing element
+     */
+    trailingAccessory?: ReactElement;
+    /**
+     * Pass to add floating placeholder support
+     */
+    floatingPlaceholder?: boolean;
+    /**
+     * Custom style for the floating placeholder
+     */
+    floatingPlaceholderStyle?: TextStyle;
+    /**
+     * A single or multiple validator. Can be a string (required, email) or custom function.
+     */
+    validate?: Validator | Validator[];
+    /**
+     * Should validate when the TextField mounts
+     */
+    validateOnStart?: boolean;
+    /**
+     * Should validate when the TextField value changes
+     */
+    validateOnChange?: boolean;
+    /**
+     * Should validate when losing focus of TextField
+     */
+    validateOnBlur?: boolean;
+    /**
+     * The position of the validation message (top/bottom)
+     */
+    validationMessagePosition?: ValidationMessagePosition;
+    /**
+     * Internal style for the field container
+     */
+    fieldStyle?: ViewStyle;
+    /**
+     * Container style of the whole component
+     */
+    containerStyle?: ViewStyle;
+    /**
+     * Predefined preset to use for styling the field
+     */
+    preset?: 'default' | undefined;
+};
+export declare type InternalTextFieldProps = TextFieldProps & BaseComponentInjectedProps & ForwardRefInjectedProps;
 interface StaticMembers {
     validationMessagePositions: typeof ValidationMessagePosition;
 }
-declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & import("../../commons/modifiers").CustomModifier & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "charCounterStyle" | "showCharCounter"> & {
+declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & import("../../commons/modifiers").CustomModifier & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "showCharCounter" | "charCounterStyle"> & {
     /**
      * Pass to render a leading element
      */
@@ -61,9 +113,13 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
      * Container style of the whole component
      */
     containerStyle?: ViewStyle | undefined;
+    /**
+     * Predefined preset to use for styling the field
+     */
+    preset?: "default" | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
-}) | (Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "charCounterStyle" | "showCharCounter"> & {
+}) | (Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "showCharCounter" | "charCounterStyle"> & {
     /**
      * Pass to render a leading element
      */
@@ -108,9 +164,13 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
      * Container style of the whole component
      */
     containerStyle?: ViewStyle | undefined;
+    /**
+     * Predefined preset to use for styling the field
+     */
+    preset?: "default" | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
-}) | (Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "charCounterStyle" | "showCharCounter"> & {
+}) | (Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "showCharCounter" | "charCounterStyle"> & {
     /**
      * Pass to render a leading element
      */
@@ -155,9 +215,13 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
      * Container style of the whole component
      */
     containerStyle?: ViewStyle | undefined;
+    /**
+     * Predefined preset to use for styling the field
+     */
+    preset?: "default" | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
-}) | (Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "charCounterStyle" | "showCharCounter"> & {
+}) | (Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "showCharCounter" | "charCounterStyle"> & {
     /**
      * Pass to render a leading element
      */
@@ -202,6 +266,10 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
      * Container style of the whole component
      */
     containerStyle?: ViewStyle | undefined;
+    /**
+     * Predefined preset to use for styling the field
+     */
+    preset?: "default" | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
 }), any> & StaticMembers;
diff --git a/generatedTypes/incubator/TextField/presets/default.d.ts b/generatedTypes/incubator/TextField/presets/default.d.ts
new file mode 100644
index 0000000000..d3728916af
--- /dev/null
+++ b/generatedTypes/incubator/TextField/presets/default.d.ts
@@ -0,0 +1,134 @@
+declare const _default: {
+    enableErrors: boolean;
+    validateOnBlur: boolean;
+    floatingPlaceholderColor: {
+        focus: any;
+        error: any;
+        disabled: string;
+    };
+    labelColor: {
+        focus: any;
+        error: any;
+        disabled: string;
+    };
+    fieldStyle: {
+        borderBottomWidth: number;
+        borderBottomColor: string;
+        paddingBottom: number;
+    };
+    style: {
+        lineHeight: undefined;
+        height: number | undefined;
+        color?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        fontFamily?: string | undefined;
+        fontSize?: number | undefined;
+        fontStyle?: "normal" | "italic" | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+        letterSpacing?: number | undefined;
+        textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
+        textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
+        textDecorationStyle?: "solid" | "double" | "dotted" | "dashed" | undefined;
+        textDecorationColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        textShadowColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        textShadowOffset?: {
+            width: number;
+            height: number;
+        } | undefined;
+        textShadowRadius?: number | undefined;
+        textTransform?: "none" | "capitalize" | "uppercase" | "lowercase" | undefined;
+        testID?: string | undefined;
+        fontVariant?: import("react-native").FontVariant[] | undefined;
+        writingDirection?: "auto" | "ltr" | "rtl" | undefined;
+        backfaceVisibility?: "visible" | "hidden" | undefined;
+        backgroundColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderBottomColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderBottomEndRadius?: number | undefined;
+        borderBottomLeftRadius?: number | undefined;
+        borderBottomRightRadius?: number | undefined;
+        borderBottomStartRadius?: number | undefined;
+        borderBottomWidth?: number | undefined;
+        borderColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderEndColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderLeftColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderLeftWidth?: number | undefined;
+        borderRadius?: number | undefined;
+        borderRightColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderRightWidth?: number | undefined;
+        borderStartColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderStyle?: "solid" | "dotted" | "dashed" | undefined;
+        borderTopColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderTopEndRadius?: number | undefined;
+        borderTopLeftRadius?: number | undefined;
+        borderTopRightRadius?: number | undefined;
+        borderTopStartRadius?: number | undefined;
+        borderTopWidth?: number | undefined;
+        borderWidth?: number | undefined;
+        opacity?: number | undefined;
+        elevation?: number | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
+        alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
+        alignSelf?: "auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
+        aspectRatio?: number | undefined;
+        borderEndWidth?: string | number | undefined;
+        borderStartWidth?: string | number | undefined;
+        bottom?: string | number | undefined;
+        display?: "none" | "flex" | undefined;
+        end?: string | number | undefined;
+        flex?: number | undefined;
+        flexBasis?: string | number | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
+        flexGrow?: number | undefined;
+        flexShrink?: number | undefined;
+        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+        left?: string | number | undefined;
+        margin?: string | number | undefined;
+        marginBottom?: string | number | undefined;
+        marginEnd?: string | number | undefined;
+        marginHorizontal?: string | number | undefined;
+        marginLeft?: string | number | undefined;
+        marginRight?: string | number | undefined;
+        marginStart?: string | number | undefined;
+        marginTop?: string | number | undefined;
+        marginVertical?: string | number | undefined;
+        maxHeight?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        minWidth?: string | number | undefined;
+        overflow?: "visible" | "hidden" | "scroll" | undefined;
+        padding?: string | number | undefined;
+        paddingBottom?: string | number | undefined;
+        paddingEnd?: string | number | undefined;
+        paddingHorizontal?: string | number | undefined;
+        paddingLeft?: string | number | undefined;
+        paddingRight?: string | number | undefined;
+        paddingStart?: string | number | undefined;
+        paddingTop?: string | number | undefined;
+        paddingVertical?: string | number | undefined;
+        position?: "absolute" | "relative" | undefined;
+        right?: string | number | undefined;
+        start?: string | number | undefined;
+        top?: string | number | undefined;
+        width?: string | number | undefined;
+        zIndex?: number | undefined;
+        direction?: "ltr" | "rtl" | "inherit" | undefined;
+        shadowColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        shadowOffset?: {
+            width: number;
+            height: number;
+        } | undefined;
+        shadowOpacity?: number | undefined;
+        shadowRadius?: number | undefined;
+        transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform)[] | undefined;
+        transformMatrix?: number[] | undefined;
+        rotation?: number | undefined;
+        scaleX?: number | undefined;
+        scaleY?: number | undefined;
+        translateX?: number | undefined;
+        translateY?: number | undefined;
+        textAlignVertical?: "auto" | "center" | "top" | "bottom" | undefined;
+        includeFontPadding?: boolean | undefined;
+    };
+    floatingPlaceholderStyle: {};
+};
+export default _default;
diff --git a/generatedTypes/incubator/TextField/usePreset.d.ts b/generatedTypes/incubator/TextField/usePreset.d.ts
new file mode 100644
index 0000000000..b80b85d421
--- /dev/null
+++ b/generatedTypes/incubator/TextField/usePreset.d.ts
@@ -0,0 +1,1089 @@
+/// <reference types="react" />
+import { InternalTextFieldProps } from './index';
+export default function usePreset({ preset, ...props }: InternalTextFieldProps): {
+    [key: string]: boolean;
+    margin?: boolean | undefined;
+    marginL?: boolean | undefined;
+    marginT?: boolean | undefined;
+    marginR?: boolean | undefined;
+    marginB?: boolean | undefined;
+    marginH?: boolean | undefined;
+    marginV?: boolean | undefined;
+    padding?: boolean | undefined;
+    paddingL?: boolean | undefined;
+    paddingT?: boolean | undefined;
+    paddingR?: boolean | undefined;
+    paddingB?: boolean | undefined;
+    paddingH?: boolean | undefined;
+    paddingV?: boolean | undefined;
+    hint?: string | undefined;
+    color?: string | {
+        default?: string | undefined;
+        focus?: string | undefined;
+        error?: string | undefined;
+        disabled?: string | undefined;
+    } | undefined;
+    allowFontScaling?: boolean | undefined;
+    autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined;
+    autoCorrect?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    blurOnSubmit?: boolean | undefined;
+    caretHidden?: boolean | undefined;
+    contextMenuHidden?: boolean | undefined;
+    defaultValue?: string | undefined;
+    editable?: boolean | undefined;
+    keyboardType?: "default" | "url" | "email-address" | "numeric" | "phone-pad" | "number-pad" | "decimal-pad" | "visible-password" | "ascii-capable" | "numbers-and-punctuation" | "name-phone-pad" | "twitter" | "web-search" | undefined;
+    maxLength?: number | undefined;
+    multiline?: boolean | undefined;
+    onBlur?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputFocusEventData>) => void) | undefined;
+    onChange?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
+    onChangeText?: ((text: string) => void) | undefined;
+    onContentSizeChange?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputContentSizeChangeEventData>) => void) | undefined;
+    onEndEditing?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputEndEditingEventData>) => void) | undefined;
+    onFocus?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputFocusEventData>) => void) | undefined;
+    onSelectionChange?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputSelectionChangeEventData>) => void) | undefined;
+    onSubmitEditing?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputSubmitEditingEventData>) => void) | undefined;
+    onTextInput?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputTextInputEventData>) => void) | undefined;
+    onScroll?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputScrollEventData>) => void) | undefined;
+    onKeyPress?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputKeyPressEventData>) => void) | undefined;
+    placeholder?: string | undefined;
+    placeholderTextColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+    returnKeyType?: "none" | "search" | "default" | "join" | "done" | "go" | "next" | "send" | "previous" | "google" | "route" | "yahoo" | "emergency-call" | undefined;
+    secureTextEntry?: boolean | undefined;
+    selectTextOnFocus?: boolean | undefined;
+    selection?: {
+        start: number;
+        end?: number | undefined;
+    } | undefined;
+    selectionColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+    style?: import("react-native").StyleProp<import("react-native").TextStyle>;
+    testID?: string | undefined;
+    inputAccessoryViewID?: string | undefined;
+    value?: string | undefined;
+    maxFontSizeMultiplier?: number | null | undefined;
+    hitSlop?: import("react-native").Insets | undefined;
+    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+    pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
+    removeClippedSubviews?: boolean | undefined;
+    nativeID?: string | undefined;
+    collapsable?: boolean | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined;
+    focusable?: boolean | undefined;
+    shouldRasterizeIOS?: boolean | undefined;
+    isTVSelectable?: boolean | undefined;
+    hasTVPreferredFocus?: boolean | undefined;
+    tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+    tvParallaxShiftDistanceX?: number | undefined;
+    tvParallaxShiftDistanceY?: number | undefined;
+    tvParallaxTiltAngle?: number | undefined;
+    tvParallaxMagnification?: number | undefined;
+    onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined;
+    accessibilityRole?: "none" | "search" | "link" | "button" | "header" | "menu" | "menuitem" | "summary" | "image" | "switch" | "text" | "keyboardkey" | "adjustable" | "imagebutton" | "alert" | "checkbox" | "combobox" | "menubar" | "progressbar" | "radio" | "radiogroup" | "scrollbar" | "spinbutton" | "tab" | "tablist" | "timer" | "toolbar" | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+    accessibilityComponentType?: "none" | "button" | "radiobutton_checked" | "radiobutton_unchecked" | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityTraits?: "none" | "search" | "link" | "key" | "button" | "header" | "summary" | "image" | "text" | "adjustable" | "selected" | "plays" | "disabled" | "frequentUpdates" | "startsMedia" | "allowsDirectInteraction" | "pageTurn" | import("react-native").AccessibilityTrait[] | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    onMagicTap?: (() => void) | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    clearButtonMode?: "always" | "never" | "while-editing" | "unless-editing" | undefined;
+    clearTextOnFocus?: boolean | undefined;
+    dataDetectorTypes?: "none" | "link" | "address" | "phoneNumber" | "calendarEvent" | "all" | import("react-native").DataDetectorTypes[] | undefined;
+    enablesReturnKeyAutomatically?: boolean | undefined;
+    keyboardAppearance?: "default" | "light" | "dark" | undefined;
+    passwordRules?: string | null | undefined;
+    rejectResponderTermination?: boolean | null | undefined;
+    selectionState?: import("react-native").DocumentSelectionState | undefined;
+    spellCheck?: boolean | undefined;
+    textContentType?: "none" | "name" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "namePrefix" | "nameSuffix" | "nickname" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "username" | "password" | "newPassword" | "oneTimeCode" | undefined;
+    scrollEnabled?: boolean | undefined;
+    autoCompleteType?: "name" | "email" | "username" | "password" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "postal-code" | "street-address" | "tel" | "off" | undefined;
+    importantForAutofill?: "auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
+    disableFullscreenUI?: boolean | undefined;
+    inlineImageLeft?: string | undefined;
+    inlineImagePadding?: number | undefined;
+    numberOfLines?: number | undefined;
+    returnKeyLabel?: string | undefined;
+    textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
+    underlineColorAndroid?: string | typeof import("react-native").OpaqueColorValue | undefined;
+    textAlignVertical?: "auto" | "center" | "top" | "bottom" | undefined;
+    showSoftInputOnFocus?: boolean | undefined;
+    ref?: ((instance: import("react-native").TextInput | null) => void) | import("react").RefObject<import("react-native").TextInput> | null | undefined;
+    key?: string | number | null | undefined;
+    label?: string | undefined;
+    labelColor?: string | {
+        default?: string | undefined;
+        focus?: string | undefined;
+        error?: string | undefined;
+        disabled?: string | undefined;
+    } | undefined;
+    labelStyle?: import("react-native").TextStyle | undefined;
+    labelProps?: (import("react-native").TextProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+        color?: string | undefined;
+        center?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        highlightString?: string | undefined;
+        highlightStyle?: import("react-native").TextStyle | undefined;
+        animated?: boolean | undefined;
+        textAlign?: string | undefined;
+    }) | (import("react-native").TextProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+        color?: string | undefined;
+        center?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        highlightString?: string | undefined;
+        highlightStyle?: import("react-native").TextStyle | undefined;
+        animated?: boolean | undefined;
+        textAlign?: string | undefined;
+    }) | (import("react-native").TextProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+        color?: string | undefined;
+        center?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        highlightString?: string | undefined;
+        highlightStyle?: import("react-native").TextStyle | undefined;
+        animated?: boolean | undefined;
+        textAlign?: string | undefined;
+    }) | (import("react-native").TextProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+        color?: string | undefined;
+        center?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        highlightString?: string | undefined;
+        highlightStyle?: import("react-native").TextStyle | undefined;
+        animated?: boolean | undefined;
+        textAlign?: string | undefined;
+    }) | undefined;
+    validationMessagePosition?: import("./types").ValidationMessagePosition | undefined;
+    floatingPlaceholder?: boolean | undefined;
+    floatingPlaceholderColor?: string | {
+        default?: string | undefined;
+        focus?: string | undefined;
+        error?: string | undefined;
+        disabled?: string | undefined;
+    } | undefined;
+    floatingPlaceholderStyle?: import("react-native").TextStyle | (false & import("react-native").TextStyle) | (number & {
+        __registeredStyleBrand: import("react-native").TextStyle;
+    } & import("react-native").TextStyle) | (import("react-native").RecursiveArray<false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | null | undefined> & import("react-native").TextStyle) | undefined;
+    enableErrors?: boolean | undefined;
+    validationMessage?: string | string[] | undefined;
+    validationMessageStyle?: import("react-native").TextStyle | undefined;
+    retainSpace?: boolean | undefined;
+    showCharCounter?: boolean | undefined;
+    charCounterStyle?: import("react-native").TextStyle | undefined;
+    leadingAccessory?: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | undefined;
+    trailingAccessory?: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | undefined;
+    validate?: "number" | Function | "required" | "email" | "url" | "price" | import("./types").Validator[] | undefined;
+    validateOnStart?: boolean | undefined;
+    validateOnChange?: boolean | undefined;
+    validateOnBlur?: boolean | undefined;
+    fieldStyle?: import("react-native").ViewStyle | undefined;
+    containerStyle?: import("react-native").ViewStyle | undefined;
+    modifiers: import("../../commons/modifiers").ExtractedStyle;
+    forwardedRef: any;
+} | {
+    margin?: boolean | undefined;
+    marginL?: boolean | undefined;
+    marginT?: boolean | undefined;
+    marginR?: boolean | undefined;
+    marginB?: boolean | undefined;
+    marginH?: boolean | undefined;
+    marginV?: boolean | undefined;
+    padding?: boolean | undefined;
+    paddingL?: boolean | undefined;
+    paddingT?: boolean | undefined;
+    paddingR?: boolean | undefined;
+    paddingB?: boolean | undefined;
+    paddingH?: boolean | undefined;
+    paddingV?: boolean | undefined;
+    text10?: boolean | undefined;
+    text20?: boolean | undefined;
+    text30?: boolean | undefined;
+    text40?: boolean | undefined;
+    text50?: boolean | undefined;
+    text60?: boolean | undefined;
+    text65?: boolean | undefined;
+    text70?: boolean | undefined;
+    text80?: boolean | undefined;
+    text90?: boolean | undefined;
+    text100?: boolean | undefined;
+    text10T?: boolean | undefined;
+    text10L?: boolean | undefined;
+    text10R?: boolean | undefined;
+    text10M?: boolean | undefined;
+    text10BO?: boolean | undefined;
+    text10H?: boolean | undefined;
+    text10BL?: boolean | undefined;
+    text20T?: boolean | undefined;
+    text20L?: boolean | undefined;
+    text20R?: boolean | undefined;
+    text20M?: boolean | undefined;
+    text20BO?: boolean | undefined;
+    text20H?: boolean | undefined;
+    text20BL?: boolean | undefined;
+    text30T?: boolean | undefined;
+    text30L?: boolean | undefined;
+    text30R?: boolean | undefined;
+    text30M?: boolean | undefined;
+    text30BO?: boolean | undefined;
+    text30H?: boolean | undefined;
+    text30BL?: boolean | undefined;
+    text40T?: boolean | undefined;
+    text40L?: boolean | undefined;
+    text40R?: boolean | undefined;
+    text40M?: boolean | undefined;
+    text40BO?: boolean | undefined;
+    text40H?: boolean | undefined;
+    text40BL?: boolean | undefined;
+    text50T?: boolean | undefined;
+    text50L?: boolean | undefined;
+    text50R?: boolean | undefined;
+    text50M?: boolean | undefined;
+    text50BO?: boolean | undefined;
+    text50H?: boolean | undefined;
+    text50BL?: boolean | undefined;
+    text60T?: boolean | undefined;
+    text60L?: boolean | undefined;
+    text60R?: boolean | undefined;
+    text60M?: boolean | undefined;
+    text60BO?: boolean | undefined;
+    text60H?: boolean | undefined;
+    text60BL?: boolean | undefined;
+    text65T?: boolean | undefined;
+    text65L?: boolean | undefined;
+    text65R?: boolean | undefined;
+    text65M?: boolean | undefined;
+    text65BO?: boolean | undefined;
+    text65H?: boolean | undefined;
+    text65BL?: boolean | undefined;
+    text70T?: boolean | undefined;
+    text70L?: boolean | undefined;
+    text70R?: boolean | undefined;
+    text70M?: boolean | undefined;
+    text70BO?: boolean | undefined;
+    text70H?: boolean | undefined;
+    text70BL?: boolean | undefined;
+    text80T?: boolean | undefined;
+    text80L?: boolean | undefined;
+    text80R?: boolean | undefined;
+    text80M?: boolean | undefined;
+    text80BO?: boolean | undefined;
+    text80H?: boolean | undefined;
+    text80BL?: boolean | undefined;
+    text90T?: boolean | undefined;
+    text90L?: boolean | undefined;
+    text90R?: boolean | undefined;
+    text90M?: boolean | undefined;
+    text90BO?: boolean | undefined;
+    text90H?: boolean | undefined;
+    text90BL?: boolean | undefined;
+    text100T?: boolean | undefined;
+    text100L?: boolean | undefined;
+    text100R?: boolean | undefined;
+    text100M?: boolean | undefined;
+    text100BO?: boolean | undefined;
+    text100H?: boolean | undefined;
+    text100BL?: boolean | undefined;
+    black?: boolean | undefined;
+    white?: boolean | undefined;
+    dark10?: boolean | undefined;
+    dark20?: boolean | undefined;
+    dark30?: boolean | undefined;
+    dark40?: boolean | undefined;
+    dark50?: boolean | undefined;
+    dark60?: boolean | undefined;
+    dark70?: boolean | undefined;
+    dark80?: boolean | undefined;
+    grey10?: boolean | undefined;
+    grey20?: boolean | undefined;
+    grey30?: boolean | undefined;
+    grey40?: boolean | undefined;
+    grey50?: boolean | undefined;
+    grey60?: boolean | undefined;
+    grey70?: boolean | undefined;
+    grey80?: boolean | undefined;
+    blue10?: boolean | undefined;
+    blue20?: boolean | undefined;
+    blue30?: boolean | undefined;
+    blue40?: boolean | undefined;
+    blue50?: boolean | undefined;
+    blue60?: boolean | undefined;
+    blue70?: boolean | undefined;
+    blue80?: boolean | undefined;
+    cyan10?: boolean | undefined;
+    cyan20?: boolean | undefined;
+    cyan30?: boolean | undefined;
+    cyan40?: boolean | undefined;
+    cyan50?: boolean | undefined;
+    cyan60?: boolean | undefined;
+    cyan70?: boolean | undefined;
+    cyan80?: boolean | undefined;
+    green10?: boolean | undefined;
+    green20?: boolean | undefined;
+    green30?: boolean | undefined;
+    green40?: boolean | undefined;
+    green50?: boolean | undefined;
+    green60?: boolean | undefined;
+    green70?: boolean | undefined;
+    green80?: boolean | undefined;
+    yellow10?: boolean | undefined;
+    yellow20?: boolean | undefined;
+    yellow30?: boolean | undefined;
+    yellow40?: boolean | undefined;
+    yellow50?: boolean | undefined;
+    yellow60?: boolean | undefined;
+    yellow70?: boolean | undefined;
+    yellow80?: boolean | undefined;
+    orange10?: boolean | undefined;
+    orange20?: boolean | undefined;
+    orange30?: boolean | undefined;
+    orange40?: boolean | undefined;
+    orange50?: boolean | undefined;
+    orange60?: boolean | undefined;
+    orange70?: boolean | undefined;
+    orange80?: boolean | undefined;
+    red10?: boolean | undefined;
+    red20?: boolean | undefined;
+    red30?: boolean | undefined;
+    red40?: boolean | undefined;
+    red50?: boolean | undefined;
+    red60?: boolean | undefined;
+    red70?: boolean | undefined;
+    red80?: boolean | undefined;
+    purple10?: boolean | undefined;
+    purple20?: boolean | undefined;
+    purple30?: boolean | undefined;
+    purple40?: boolean | undefined;
+    purple50?: boolean | undefined;
+    purple60?: boolean | undefined;
+    purple70?: boolean | undefined;
+    purple80?: boolean | undefined;
+    violet10?: boolean | undefined;
+    violet20?: boolean | undefined;
+    violet30?: boolean | undefined;
+    violet40?: boolean | undefined;
+    violet50?: boolean | undefined;
+    violet60?: boolean | undefined;
+    violet70?: boolean | undefined;
+    violet80?: boolean | undefined;
+    hint?: string | undefined;
+    color?: string | {
+        default?: string | undefined;
+        focus?: string | undefined;
+        error?: string | undefined;
+        disabled?: string | undefined;
+    } | undefined;
+    allowFontScaling?: boolean | undefined;
+    autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined;
+    autoCorrect?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    blurOnSubmit?: boolean | undefined;
+    caretHidden?: boolean | undefined;
+    contextMenuHidden?: boolean | undefined;
+    defaultValue?: string | undefined;
+    editable?: boolean | undefined;
+    keyboardType?: "default" | "url" | "email-address" | "numeric" | "phone-pad" | "number-pad" | "decimal-pad" | "visible-password" | "ascii-capable" | "numbers-and-punctuation" | "name-phone-pad" | "twitter" | "web-search" | undefined;
+    maxLength?: number | undefined;
+    multiline?: boolean | undefined;
+    onBlur?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputFocusEventData>) => void) | undefined;
+    onChange?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
+    onChangeText?: ((text: string) => void) | undefined;
+    onContentSizeChange?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputContentSizeChangeEventData>) => void) | undefined;
+    onEndEditing?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputEndEditingEventData>) => void) | undefined;
+    onFocus?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputFocusEventData>) => void) | undefined;
+    onSelectionChange?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputSelectionChangeEventData>) => void) | undefined;
+    onSubmitEditing?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputSubmitEditingEventData>) => void) | undefined;
+    onTextInput?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputTextInputEventData>) => void) | undefined;
+    onScroll?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputScrollEventData>) => void) | undefined;
+    onKeyPress?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputKeyPressEventData>) => void) | undefined;
+    placeholder?: string | undefined;
+    placeholderTextColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+    returnKeyType?: "none" | "search" | "default" | "join" | "done" | "go" | "next" | "send" | "previous" | "google" | "route" | "yahoo" | "emergency-call" | undefined;
+    secureTextEntry?: boolean | undefined;
+    selectTextOnFocus?: boolean | undefined;
+    selection?: {
+        start: number;
+        end?: number | undefined;
+    } | undefined;
+    selectionColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+    style?: import("react-native").StyleProp<import("react-native").TextStyle>;
+    testID?: string | undefined;
+    inputAccessoryViewID?: string | undefined;
+    value?: string | undefined;
+    maxFontSizeMultiplier?: number | null | undefined;
+    hitSlop?: import("react-native").Insets | undefined;
+    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+    pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
+    removeClippedSubviews?: boolean | undefined;
+    nativeID?: string | undefined;
+    collapsable?: boolean | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined;
+    focusable?: boolean | undefined;
+    shouldRasterizeIOS?: boolean | undefined;
+    isTVSelectable?: boolean | undefined;
+    hasTVPreferredFocus?: boolean | undefined;
+    tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+    tvParallaxShiftDistanceX?: number | undefined;
+    tvParallaxShiftDistanceY?: number | undefined;
+    tvParallaxTiltAngle?: number | undefined;
+    tvParallaxMagnification?: number | undefined;
+    onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined;
+    accessibilityRole?: "none" | "search" | "link" | "button" | "header" | "menu" | "menuitem" | "summary" | "image" | "switch" | "text" | "keyboardkey" | "adjustable" | "imagebutton" | "alert" | "checkbox" | "combobox" | "menubar" | "progressbar" | "radio" | "radiogroup" | "scrollbar" | "spinbutton" | "tab" | "tablist" | "timer" | "toolbar" | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+    accessibilityComponentType?: "none" | "button" | "radiobutton_checked" | "radiobutton_unchecked" | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityTraits?: "none" | "search" | "link" | "key" | "button" | "header" | "summary" | "image" | "text" | "adjustable" | "selected" | "plays" | "disabled" | "frequentUpdates" | "startsMedia" | "allowsDirectInteraction" | "pageTurn" | import("react-native").AccessibilityTrait[] | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    onMagicTap?: (() => void) | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    clearButtonMode?: "always" | "never" | "while-editing" | "unless-editing" | undefined;
+    clearTextOnFocus?: boolean | undefined;
+    dataDetectorTypes?: "none" | "link" | "address" | "phoneNumber" | "calendarEvent" | "all" | import("react-native").DataDetectorTypes[] | undefined;
+    enablesReturnKeyAutomatically?: boolean | undefined;
+    keyboardAppearance?: "default" | "light" | "dark" | undefined;
+    passwordRules?: string | null | undefined;
+    rejectResponderTermination?: boolean | null | undefined;
+    selectionState?: import("react-native").DocumentSelectionState | undefined;
+    spellCheck?: boolean | undefined;
+    textContentType?: "none" | "name" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "namePrefix" | "nameSuffix" | "nickname" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "username" | "password" | "newPassword" | "oneTimeCode" | undefined;
+    scrollEnabled?: boolean | undefined;
+    autoCompleteType?: "name" | "email" | "username" | "password" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "postal-code" | "street-address" | "tel" | "off" | undefined;
+    importantForAutofill?: "auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
+    disableFullscreenUI?: boolean | undefined;
+    inlineImageLeft?: string | undefined;
+    inlineImagePadding?: number | undefined;
+    numberOfLines?: number | undefined;
+    returnKeyLabel?: string | undefined;
+    textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
+    underlineColorAndroid?: string | typeof import("react-native").OpaqueColorValue | undefined;
+    textAlignVertical?: "auto" | "center" | "top" | "bottom" | undefined;
+    showSoftInputOnFocus?: boolean | undefined;
+    ref?: ((instance: import("react-native").TextInput | null) => void) | import("react").RefObject<import("react-native").TextInput> | null | undefined;
+    key?: string | number | null | undefined;
+    label?: string | undefined;
+    labelColor?: string | {
+        default?: string | undefined;
+        focus?: string | undefined;
+        error?: string | undefined;
+        disabled?: string | undefined;
+    } | undefined;
+    labelStyle?: import("react-native").TextStyle | undefined;
+    labelProps?: (import("react-native").TextProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+        color?: string | undefined;
+        center?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        highlightString?: string | undefined;
+        highlightStyle?: import("react-native").TextStyle | undefined;
+        animated?: boolean | undefined;
+        textAlign?: string | undefined;
+    }) | (import("react-native").TextProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+        color?: string | undefined;
+        center?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        highlightString?: string | undefined;
+        highlightStyle?: import("react-native").TextStyle | undefined;
+        animated?: boolean | undefined;
+        textAlign?: string | undefined;
+    }) | (import("react-native").TextProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+        color?: string | undefined;
+        center?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        highlightString?: string | undefined;
+        highlightStyle?: import("react-native").TextStyle | undefined;
+        animated?: boolean | undefined;
+        textAlign?: string | undefined;
+    }) | (import("react-native").TextProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+        color?: string | undefined;
+        center?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        highlightString?: string | undefined;
+        highlightStyle?: import("react-native").TextStyle | undefined;
+        animated?: boolean | undefined;
+        textAlign?: string | undefined;
+    }) | undefined;
+    validationMessagePosition?: import("./types").ValidationMessagePosition | undefined;
+    floatingPlaceholder?: boolean | undefined;
+    floatingPlaceholderColor?: string | {
+        default?: string | undefined;
+        focus?: string | undefined;
+        error?: string | undefined;
+        disabled?: string | undefined;
+    } | undefined;
+    floatingPlaceholderStyle?: import("react-native").TextStyle | (false & import("react-native").TextStyle) | (number & {
+        __registeredStyleBrand: import("react-native").TextStyle;
+    } & import("react-native").TextStyle) | (import("react-native").RecursiveArray<false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | null | undefined> & import("react-native").TextStyle) | undefined;
+    enableErrors?: boolean | undefined;
+    validationMessage?: string | string[] | undefined;
+    validationMessageStyle?: import("react-native").TextStyle | undefined;
+    retainSpace?: boolean | undefined;
+    showCharCounter?: boolean | undefined;
+    charCounterStyle?: import("react-native").TextStyle | undefined;
+    leadingAccessory?: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | undefined;
+    trailingAccessory?: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | undefined;
+    validate?: "number" | Function | "required" | "email" | "url" | "price" | import("./types").Validator[] | undefined;
+    validateOnStart?: boolean | undefined;
+    validateOnChange?: boolean | undefined;
+    validateOnBlur?: boolean | undefined;
+    fieldStyle?: import("react-native").ViewStyle | undefined;
+    containerStyle?: import("react-native").ViewStyle | undefined;
+    modifiers: import("../../commons/modifiers").ExtractedStyle;
+    forwardedRef: any;
+} | {
+    margin?: boolean | undefined;
+    marginL?: boolean | undefined;
+    marginT?: boolean | undefined;
+    marginR?: boolean | undefined;
+    marginB?: boolean | undefined;
+    marginH?: boolean | undefined;
+    marginV?: boolean | undefined;
+    padding?: boolean | undefined;
+    paddingL?: boolean | undefined;
+    paddingT?: boolean | undefined;
+    paddingR?: boolean | undefined;
+    paddingB?: boolean | undefined;
+    paddingH?: boolean | undefined;
+    paddingV?: boolean | undefined;
+    text10?: boolean | undefined;
+    text20?: boolean | undefined;
+    text30?: boolean | undefined;
+    text40?: boolean | undefined;
+    text50?: boolean | undefined;
+    text60?: boolean | undefined;
+    text65?: boolean | undefined;
+    text70?: boolean | undefined;
+    text80?: boolean | undefined;
+    text90?: boolean | undefined;
+    text100?: boolean | undefined;
+    text10T?: boolean | undefined;
+    text10L?: boolean | undefined;
+    text10R?: boolean | undefined;
+    text10M?: boolean | undefined;
+    text10BO?: boolean | undefined;
+    text10H?: boolean | undefined;
+    text10BL?: boolean | undefined;
+    text20T?: boolean | undefined;
+    text20L?: boolean | undefined;
+    text20R?: boolean | undefined;
+    text20M?: boolean | undefined;
+    text20BO?: boolean | undefined;
+    text20H?: boolean | undefined;
+    text20BL?: boolean | undefined;
+    text30T?: boolean | undefined;
+    text30L?: boolean | undefined;
+    text30R?: boolean | undefined;
+    text30M?: boolean | undefined;
+    text30BO?: boolean | undefined;
+    text30H?: boolean | undefined;
+    text30BL?: boolean | undefined;
+    text40T?: boolean | undefined;
+    text40L?: boolean | undefined;
+    text40R?: boolean | undefined;
+    text40M?: boolean | undefined;
+    text40BO?: boolean | undefined;
+    text40H?: boolean | undefined;
+    text40BL?: boolean | undefined;
+    text50T?: boolean | undefined;
+    text50L?: boolean | undefined;
+    text50R?: boolean | undefined;
+    text50M?: boolean | undefined;
+    text50BO?: boolean | undefined;
+    text50H?: boolean | undefined;
+    text50BL?: boolean | undefined;
+    text60T?: boolean | undefined;
+    text60L?: boolean | undefined;
+    text60R?: boolean | undefined;
+    text60M?: boolean | undefined;
+    text60BO?: boolean | undefined;
+    text60H?: boolean | undefined;
+    text60BL?: boolean | undefined;
+    text65T?: boolean | undefined;
+    text65L?: boolean | undefined;
+    text65R?: boolean | undefined;
+    text65M?: boolean | undefined;
+    text65BO?: boolean | undefined;
+    text65H?: boolean | undefined;
+    text65BL?: boolean | undefined;
+    text70T?: boolean | undefined;
+    text70L?: boolean | undefined;
+    text70R?: boolean | undefined;
+    text70M?: boolean | undefined;
+    text70BO?: boolean | undefined;
+    text70H?: boolean | undefined;
+    text70BL?: boolean | undefined;
+    text80T?: boolean | undefined;
+    text80L?: boolean | undefined;
+    text80R?: boolean | undefined;
+    text80M?: boolean | undefined;
+    text80BO?: boolean | undefined;
+    text80H?: boolean | undefined;
+    text80BL?: boolean | undefined;
+    text90T?: boolean | undefined;
+    text90L?: boolean | undefined;
+    text90R?: boolean | undefined;
+    text90M?: boolean | undefined;
+    text90BO?: boolean | undefined;
+    text90H?: boolean | undefined;
+    text90BL?: boolean | undefined;
+    text100T?: boolean | undefined;
+    text100L?: boolean | undefined;
+    text100R?: boolean | undefined;
+    text100M?: boolean | undefined;
+    text100BO?: boolean | undefined;
+    text100H?: boolean | undefined;
+    text100BL?: boolean | undefined;
+    black?: boolean | undefined;
+    white?: boolean | undefined;
+    dark10?: boolean | undefined;
+    dark20?: boolean | undefined;
+    dark30?: boolean | undefined;
+    dark40?: boolean | undefined;
+    dark50?: boolean | undefined;
+    dark60?: boolean | undefined;
+    dark70?: boolean | undefined;
+    dark80?: boolean | undefined;
+    grey10?: boolean | undefined;
+    grey20?: boolean | undefined;
+    grey30?: boolean | undefined;
+    grey40?: boolean | undefined;
+    grey50?: boolean | undefined;
+    grey60?: boolean | undefined;
+    grey70?: boolean | undefined;
+    grey80?: boolean | undefined;
+    blue10?: boolean | undefined;
+    blue20?: boolean | undefined;
+    blue30?: boolean | undefined;
+    blue40?: boolean | undefined;
+    blue50?: boolean | undefined;
+    blue60?: boolean | undefined;
+    blue70?: boolean | undefined;
+    blue80?: boolean | undefined;
+    cyan10?: boolean | undefined;
+    cyan20?: boolean | undefined;
+    cyan30?: boolean | undefined;
+    cyan40?: boolean | undefined;
+    cyan50?: boolean | undefined;
+    cyan60?: boolean | undefined;
+    cyan70?: boolean | undefined;
+    cyan80?: boolean | undefined;
+    green10?: boolean | undefined;
+    green20?: boolean | undefined;
+    green30?: boolean | undefined;
+    green40?: boolean | undefined;
+    green50?: boolean | undefined;
+    green60?: boolean | undefined;
+    green70?: boolean | undefined;
+    green80?: boolean | undefined;
+    yellow10?: boolean | undefined;
+    yellow20?: boolean | undefined;
+    yellow30?: boolean | undefined;
+    yellow40?: boolean | undefined;
+    yellow50?: boolean | undefined;
+    yellow60?: boolean | undefined;
+    yellow70?: boolean | undefined;
+    yellow80?: boolean | undefined;
+    orange10?: boolean | undefined;
+    orange20?: boolean | undefined;
+    orange30?: boolean | undefined;
+    orange40?: boolean | undefined;
+    orange50?: boolean | undefined;
+    orange60?: boolean | undefined;
+    orange70?: boolean | undefined;
+    orange80?: boolean | undefined;
+    red10?: boolean | undefined;
+    red20?: boolean | undefined;
+    red30?: boolean | undefined;
+    red40?: boolean | undefined;
+    red50?: boolean | undefined;
+    red60?: boolean | undefined;
+    red70?: boolean | undefined;
+    red80?: boolean | undefined;
+    purple10?: boolean | undefined;
+    purple20?: boolean | undefined;
+    purple30?: boolean | undefined;
+    purple40?: boolean | undefined;
+    purple50?: boolean | undefined;
+    purple60?: boolean | undefined;
+    purple70?: boolean | undefined;
+    purple80?: boolean | undefined;
+    violet10?: boolean | undefined;
+    violet20?: boolean | undefined;
+    violet30?: boolean | undefined;
+    violet40?: boolean | undefined;
+    violet50?: boolean | undefined;
+    violet60?: boolean | undefined;
+    violet70?: boolean | undefined;
+    violet80?: boolean | undefined;
+    hint?: string | undefined;
+    color?: string | {
+        default?: string | undefined;
+        focus?: string | undefined;
+        error?: string | undefined;
+        disabled?: string | undefined;
+    } | undefined;
+    allowFontScaling?: boolean | undefined;
+    autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined;
+    autoCorrect?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    blurOnSubmit?: boolean | undefined;
+    caretHidden?: boolean | undefined;
+    contextMenuHidden?: boolean | undefined;
+    defaultValue?: string | undefined;
+    editable?: boolean | undefined;
+    keyboardType?: "default" | "url" | "email-address" | "numeric" | "phone-pad" | "number-pad" | "decimal-pad" | "visible-password" | "ascii-capable" | "numbers-and-punctuation" | "name-phone-pad" | "twitter" | "web-search" | undefined;
+    maxLength?: number | undefined;
+    multiline?: boolean | undefined;
+    onBlur?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputFocusEventData>) => void) | undefined;
+    onChange?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
+    onChangeText?: ((text: string) => void) | undefined;
+    onContentSizeChange?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputContentSizeChangeEventData>) => void) | undefined;
+    onEndEditing?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputEndEditingEventData>) => void) | undefined;
+    onFocus?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputFocusEventData>) => void) | undefined;
+    onSelectionChange?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputSelectionChangeEventData>) => void) | undefined;
+    onSubmitEditing?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputSubmitEditingEventData>) => void) | undefined;
+    onTextInput?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputTextInputEventData>) => void) | undefined;
+    onScroll?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputScrollEventData>) => void) | undefined;
+    onKeyPress?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputKeyPressEventData>) => void) | undefined;
+    placeholder?: string | undefined;
+    placeholderTextColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+    returnKeyType?: "none" | "search" | "default" | "join" | "done" | "go" | "next" | "send" | "previous" | "google" | "route" | "yahoo" | "emergency-call" | undefined;
+    secureTextEntry?: boolean | undefined;
+    selectTextOnFocus?: boolean | undefined;
+    selection?: {
+        start: number;
+        end?: number | undefined;
+    } | undefined;
+    selectionColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+    style: false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | null | undefined> | {
+        lineHeight: undefined;
+        height: number | undefined;
+        color?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        fontFamily?: string | undefined;
+        fontSize?: number | undefined;
+        fontStyle?: "normal" | "italic" | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+        letterSpacing?: number | undefined;
+        textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
+        textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
+        textDecorationStyle?: "solid" | "double" | "dotted" | "dashed" | undefined;
+        textDecorationColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        textShadowColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        textShadowOffset?: {
+            width: number;
+            height: number;
+        } | undefined;
+        textShadowRadius?: number | undefined;
+        textTransform?: "none" | "capitalize" | "uppercase" | "lowercase" | undefined;
+        testID?: string | undefined;
+        fontVariant?: import("react-native").FontVariant[] | undefined;
+        writingDirection?: "auto" | "ltr" | "rtl" | undefined;
+        backfaceVisibility?: "visible" | "hidden" | undefined;
+        backgroundColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderBottomColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderBottomEndRadius?: number | undefined;
+        borderBottomLeftRadius?: number | undefined;
+        borderBottomRightRadius?: number | undefined;
+        borderBottomStartRadius?: number | undefined;
+        borderBottomWidth?: number | undefined;
+        borderColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderEndColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderLeftColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderLeftWidth?: number | undefined;
+        borderRadius?: number | undefined;
+        borderRightColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderRightWidth?: number | undefined;
+        borderStartColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderStyle?: "solid" | "dotted" | "dashed" | undefined;
+        borderTopColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        borderTopEndRadius?: number | undefined;
+        borderTopLeftRadius?: number | undefined;
+        borderTopRightRadius?: number | undefined;
+        borderTopStartRadius?: number | undefined;
+        borderTopWidth?: number | undefined;
+        borderWidth?: number | undefined;
+        opacity?: number | undefined;
+        elevation?: number | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
+        alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
+        alignSelf?: "auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
+        aspectRatio?: number | undefined;
+        borderEndWidth?: string | number | undefined;
+        borderStartWidth?: string | number | undefined;
+        bottom?: string | number | undefined;
+        display?: "none" | "flex" | undefined;
+        end?: string | number | undefined;
+        flex?: number | undefined;
+        flexBasis?: string | number | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
+        flexGrow?: number | undefined;
+        flexShrink?: number | undefined;
+        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+        left?: string | number | undefined;
+        margin?: string | number | undefined;
+        marginBottom?: string | number | undefined;
+        marginEnd?: string | number | undefined;
+        marginHorizontal?: string | number | undefined;
+        marginLeft?: string | number | undefined;
+        marginRight?: string | number | undefined;
+        marginStart?: string | number | undefined;
+        marginTop?: string | number | undefined;
+        marginVertical?: string | number | undefined;
+        maxHeight?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        minWidth?: string | number | undefined;
+        overflow?: "visible" | "hidden" | "scroll" | undefined;
+        padding?: string | number | undefined;
+        paddingBottom?: string | number | undefined;
+        paddingEnd?: string | number | undefined;
+        paddingHorizontal?: string | number | undefined;
+        paddingLeft?: string | number | undefined;
+        paddingRight?: string | number | undefined;
+        paddingStart?: string | number | undefined;
+        paddingTop?: string | number | undefined;
+        paddingVertical?: string | number | undefined;
+        position?: "absolute" | "relative" | undefined;
+        right?: string | number | undefined;
+        start?: string | number | undefined;
+        top?: string | number | undefined;
+        width?: string | number | undefined;
+        zIndex?: number | undefined;
+        direction?: "ltr" | "rtl" | "inherit" | undefined;
+        shadowColor?: string | typeof import("react-native").OpaqueColorValue | undefined;
+        shadowOffset?: {
+            width: number;
+            height: number;
+        } | undefined;
+        shadowOpacity?: number | undefined;
+        shadowRadius?: number | undefined;
+        transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform)[] | undefined;
+        transformMatrix?: number[] | undefined;
+        rotation?: number | undefined;
+        scaleX?: number | undefined;
+        scaleY?: number | undefined;
+        translateX?: number | undefined;
+        translateY?: number | undefined;
+        textAlignVertical?: "auto" | "center" | "top" | "bottom" | undefined;
+        includeFontPadding?: boolean | undefined;
+    } | null;
+    testID?: string | undefined;
+    inputAccessoryViewID?: string | undefined;
+    value?: string | undefined;
+    maxFontSizeMultiplier?: number | null | undefined;
+    hitSlop?: import("react-native").Insets | undefined;
+    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+    pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
+    removeClippedSubviews?: boolean | undefined;
+    nativeID?: string | undefined;
+    collapsable?: boolean | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined;
+    focusable?: boolean | undefined;
+    shouldRasterizeIOS?: boolean | undefined;
+    isTVSelectable?: boolean | undefined;
+    hasTVPreferredFocus?: boolean | undefined;
+    tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+    tvParallaxShiftDistanceX?: number | undefined;
+    tvParallaxShiftDistanceY?: number | undefined;
+    tvParallaxTiltAngle?: number | undefined;
+    tvParallaxMagnification?: number | undefined;
+    onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined;
+    accessibilityRole?: "none" | "search" | "link" | "button" | "header" | "menu" | "menuitem" | "summary" | "image" | "switch" | "text" | "keyboardkey" | "adjustable" | "imagebutton" | "alert" | "checkbox" | "combobox" | "menubar" | "progressbar" | "radio" | "radiogroup" | "scrollbar" | "spinbutton" | "tab" | "tablist" | "timer" | "toolbar" | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+    accessibilityComponentType?: "none" | "button" | "radiobutton_checked" | "radiobutton_unchecked" | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityTraits?: "none" | "search" | "link" | "key" | "button" | "header" | "summary" | "image" | "text" | "adjustable" | "selected" | "plays" | "disabled" | "frequentUpdates" | "startsMedia" | "allowsDirectInteraction" | "pageTurn" | import("react-native").AccessibilityTrait[] | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    onMagicTap?: (() => void) | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    clearButtonMode?: "always" | "never" | "while-editing" | "unless-editing" | undefined;
+    clearTextOnFocus?: boolean | undefined;
+    dataDetectorTypes?: "none" | "link" | "address" | "phoneNumber" | "calendarEvent" | "all" | import("react-native").DataDetectorTypes[] | undefined;
+    enablesReturnKeyAutomatically?: boolean | undefined;
+    keyboardAppearance?: "default" | "light" | "dark" | undefined;
+    passwordRules?: string | null | undefined;
+    rejectResponderTermination?: boolean | null | undefined;
+    selectionState?: import("react-native").DocumentSelectionState | undefined;
+    spellCheck?: boolean | undefined;
+    textContentType?: "none" | "name" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "namePrefix" | "nameSuffix" | "nickname" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "username" | "password" | "newPassword" | "oneTimeCode" | undefined;
+    scrollEnabled?: boolean | undefined;
+    autoCompleteType?: "name" | "email" | "username" | "password" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "postal-code" | "street-address" | "tel" | "off" | undefined;
+    importantForAutofill?: "auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
+    disableFullscreenUI?: boolean | undefined;
+    inlineImageLeft?: string | undefined;
+    inlineImagePadding?: number | undefined;
+    numberOfLines?: number | undefined;
+    returnKeyLabel?: string | undefined;
+    textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
+    underlineColorAndroid?: string | typeof import("react-native").OpaqueColorValue | undefined;
+    textAlignVertical?: "auto" | "center" | "top" | "bottom" | undefined;
+    showSoftInputOnFocus?: boolean | undefined;
+    ref?: ((instance: import("react-native").TextInput | null) => void) | import("react").RefObject<import("react-native").TextInput> | null | undefined;
+    key?: string | number | null | undefined;
+    label?: string | undefined;
+    labelColor: string | {
+        default?: string | undefined;
+        focus?: string | undefined;
+        error?: string | undefined;
+        disabled?: string | undefined;
+    } | {
+        focus: any;
+        error: any;
+        disabled: string;
+    };
+    labelStyle?: import("react-native").TextStyle | undefined;
+    labelProps?: (import("react-native").TextProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+        color?: string | undefined;
+        center?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        highlightString?: string | undefined;
+        highlightStyle?: import("react-native").TextStyle | undefined;
+        animated?: boolean | undefined;
+        textAlign?: string | undefined;
+    }) | (import("react-native").TextProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+        color?: string | undefined;
+        center?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        highlightString?: string | undefined;
+        highlightStyle?: import("react-native").TextStyle | undefined;
+        animated?: boolean | undefined;
+        textAlign?: string | undefined;
+    }) | (import("react-native").TextProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+        color?: string | undefined;
+        center?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        highlightString?: string | undefined;
+        highlightStyle?: import("react-native").TextStyle | undefined;
+        animated?: boolean | undefined;
+        textAlign?: string | undefined;
+    }) | (import("react-native").TextProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+        color?: string | undefined;
+        center?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        highlightString?: string | undefined;
+        highlightStyle?: import("react-native").TextStyle | undefined;
+        animated?: boolean | undefined;
+        textAlign?: string | undefined;
+    }) | undefined;
+    validationMessagePosition?: import("./types").ValidationMessagePosition | undefined;
+    floatingPlaceholder?: boolean | undefined;
+    floatingPlaceholderColor: string | {
+        default?: string | undefined;
+        focus?: string | undefined;
+        error?: string | undefined;
+        disabled?: string | undefined;
+    } | {
+        focus: any;
+        error: any;
+        disabled: string;
+    };
+    floatingPlaceholderStyle: import("react-native").TextStyle | {} | (false & import("react-native").TextStyle) | (number & {
+        __registeredStyleBrand: import("react-native").TextStyle;
+    } & import("react-native").TextStyle) | (import("react-native").RecursiveArray<false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | null | undefined> & import("react-native").TextStyle);
+    enableErrors: boolean;
+    validationMessage?: string | string[] | undefined;
+    validationMessageStyle?: import("react-native").TextStyle | undefined;
+    retainSpace?: boolean | undefined;
+    showCharCounter?: boolean | undefined;
+    charCounterStyle?: import("react-native").TextStyle | undefined;
+    leadingAccessory?: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | undefined;
+    trailingAccessory?: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | undefined;
+    validate?: "number" | Function | "required" | "email" | "url" | "price" | import("./types").Validator[] | undefined;
+    validateOnStart?: boolean | undefined;
+    validateOnChange?: boolean | undefined;
+    validateOnBlur: boolean;
+    fieldStyle: import("react-native").ViewStyle | {
+        borderBottomWidth: number;
+        borderBottomColor: string;
+        paddingBottom: number;
+    };
+    containerStyle?: import("react-native").ViewStyle | undefined;
+    modifiers: import("../../commons/modifiers").ExtractedStyle;
+    forwardedRef: any;
+};
diff --git a/generatedTypes/incubator/TouchableOpacity.d.ts b/generatedTypes/incubator/TouchableOpacity.d.ts
index ee833fb496..dc89d92ee5 100644
--- a/generatedTypes/incubator/TouchableOpacity.d.ts
+++ b/generatedTypes/incubator/TouchableOpacity.d.ts
@@ -1,6 +1,8 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
-declare type TouchableOpacityProps = {
+import { LayoutChangeEvent } from 'react-native';
+import { State } from 'react-native-gesture-handler';
+import { ViewProps } from '../components/view';
+export declare type TouchableOpacityProps = {
     /**
      * Background color
      */
@@ -28,7 +30,7 @@ declare type TouchableOpacityProps = {
     /**
      * Pass controlled pressState to track gesture state changes
      */
-    pressState?: object;
+    pressState?: State;
     /**
      * If true, disable all interactions for this component.
      */
@@ -36,7 +38,9 @@ declare type TouchableOpacityProps = {
     /**
      * Pass custom style
      */
-    style?: ViewStyle;
+    style?: ViewProps['style'];
+    onLayout?: (event: LayoutChangeEvent) => void;
+    testID?: string;
 };
 declare const _default: React.ComponentClass<TouchableOpacityProps & {
     useCustomTheme?: boolean | undefined;
diff --git a/generatedTypes/incubator/index.d.ts b/generatedTypes/incubator/index.d.ts
index 94b3650bb3..6b9825e075 100644
--- a/generatedTypes/incubator/index.d.ts
+++ b/generatedTypes/incubator/index.d.ts
@@ -1,4 +1,4 @@
 export { default as TabController } from './TabController';
 export { default as TextField } from './TextField';
-export { default as TouchableOpacity } from './TouchableOpacity';
+export { default as TouchableOpacity, TouchableOpacityProps } from './TouchableOpacity';
 export { default as WheelPicker } from './WheelPicker';
diff --git a/generatedTypes/index.d.ts b/generatedTypes/index.d.ts
index feefbe9715..7d58fdef22 100644
--- a/generatedTypes/index.d.ts
+++ b/generatedTypes/index.d.ts
@@ -21,8 +21,7 @@ export {
   PaddingModifiers,
   TypographyModifiers,
   ColorsModifiers,
-  BackgroundColorModifier,
-  useToggleValue
+  BackgroundColorModifier
 } from './commons/new';
 export {default as ActionBar, ActionBarProps} from './components/actionBar';
 export {default as Avatar, AvatarPropTypes, AvatarProps} from './components/avatar';
@@ -42,7 +41,9 @@ export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as RadioButton, RadioButtonPropTypes, RadioButtonProps} from './components/radioButton/RadioButton';
 export {default as RadioGroup, RadioGroupPropTypes, RadioGroupProps} from './components/radioButton/RadioGroup';
 export {default as Switch, SwitchProps} from './components/switch';
+export {default as TabController, TabControllerProps, TabControllerItemProps} from './components/tabController';
 export {default as TabBar, TabBarProps} from './components/TabBar';
+export {default as ScrollBar, ScrollBarProps} from './components/ScrollBar';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';
 export {default as ExpandableSection, ExpandableSectionProps} from './components/expandableSection';
 export {default as Modal, ModalProps, ModalTopBarProps} from './components/modal';
@@ -113,8 +114,6 @@ export const KeyboardAwareListView;
 export const KeyboardAwareScrollView;
 export const SafeAreaInsetsManager;
 export const SafeAreaSpacerView;
-export const ScrollBar;
 export const SelectableComponent;
-export const TabController;
 export const TextField;
 export const Wizard;
diff --git a/ios/Podfile b/ios/Podfile
index 978bc157a6..3ad18f8dc6 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -1,7 +1,7 @@
 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
-platform :ios, '10.0'
+platform :ios, '11.0'
 
 target 'rnuilib' do
   pod 'ReactNativeUiLib', :path => "../lib/ReactNativeUiLib.podspec"
diff --git a/ios/rnuilib/Images.xcassets/AppIcon.appiconset/120.png b/ios/rnuilib/Images.xcassets/AppIcon.appiconset/120.png
index eb8f70b694..67a88e6145 100644
Binary files a/ios/rnuilib/Images.xcassets/AppIcon.appiconset/120.png and b/ios/rnuilib/Images.xcassets/AppIcon.appiconset/120.png differ
diff --git a/ios/rnuilib/Images.xcassets/AppIcon.appiconset/152.png b/ios/rnuilib/Images.xcassets/AppIcon.appiconset/152.png
index 7ca2521bee..d5673d8b61 100644
Binary files a/ios/rnuilib/Images.xcassets/AppIcon.appiconset/152.png and b/ios/rnuilib/Images.xcassets/AppIcon.appiconset/152.png differ
diff --git a/ios/rnuilib/Images.xcassets/AppIcon.appiconset/167.png b/ios/rnuilib/Images.xcassets/AppIcon.appiconset/167.png
index 257890ea8d..163cad22e4 100644
Binary files a/ios/rnuilib/Images.xcassets/AppIcon.appiconset/167.png and b/ios/rnuilib/Images.xcassets/AppIcon.appiconset/167.png differ
diff --git a/ios/rnuilib/Images.xcassets/AppIcon.appiconset/180.png b/ios/rnuilib/Images.xcassets/AppIcon.appiconset/180.png
index 525c14a405..fd9b2f8c0b 100644
Binary files a/ios/rnuilib/Images.xcassets/AppIcon.appiconset/180.png and b/ios/rnuilib/Images.xcassets/AppIcon.appiconset/180.png differ
diff --git a/ios/rnuilib/Images.xcassets/AppIcon.appiconset/76.png b/ios/rnuilib/Images.xcassets/AppIcon.appiconset/76.png
index f26e01d552..1491cead1b 100644
Binary files a/ios/rnuilib/Images.xcassets/AppIcon.appiconset/76.png and b/ios/rnuilib/Images.xcassets/AppIcon.appiconset/76.png differ
diff --git a/package.json b/package.json
index d3cb5ef3b5..5d7c12e327 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "pretest": "npm run lint",
     "test": "jest",
     "test:watch": "jest --watch",
-    "lint": "eslint src -c .eslintrc.js",
+    "lint": "eslint src -c .eslintrc.js --ext .tsx,.ts,.js",
     "lint:fix": "eslint src -c .eslintrc.js --fix",
     "lint:test": "mocha --compilers js:babel-core/register eslint-rules/tests/lib/rules",
     "xcode": "xed ios",
@@ -73,7 +73,7 @@
     "@testing-library/react-hooks": "^3.4.2",
     "@types/lodash": "^4.0.0",
     "@types/prop-types": "^15.5.3",
-    "@types/react-native": "0.62.2",
+    "@types/react-native": "0.63.4",
     "@types/tinycolor2": "^1.4.2",
     "@typescript-eslint/eslint-plugin": "^2.13.0",
     "@typescript-eslint/parser": "^2.13.0",
@@ -94,11 +94,11 @@
     "react": "16.13.1",
     "react-autobind": "^1.0.6",
     "react-dom": "^15.4.2",
-    "react-native": "0.63.2",
-    "react-native-gesture-handler": "1.6.1",
+    "react-native": "0.63.4",
+    "react-native-gesture-handler": "1.9.0",
     "react-native-keyboard-tracking-view": "^5.6.1",
-    "react-native-navigation": "7.0.0",
-    "react-native-reanimated": "1.13.1",
+    "react-native-navigation": "7.6.0",
+    "react-native-reanimated": "1.13.2",
     "react-test-renderer": "^16.13.1",
     "shell-utils": "^1.0.10",
     "typescript": "3.9.7"
diff --git a/src/commons/__tests__/modifiers.spec.js b/src/commons/__tests__/modifiers.spec.js
index ea959a1c0c..b53322dbed 100644
--- a/src/commons/__tests__/modifiers.spec.js
+++ b/src/commons/__tests__/modifiers.spec.js
@@ -45,19 +45,18 @@ describe('Modifiers', () => {
       expect(uut.extractTypographyValue({
         text40: true,
         text70: false
-      }),).toEqual(Typography.text40);
+      })).toEqual(Typography.text40);
     });
 
     it('should prioritize last typography modifier prop in case there is more than one', () => {
       expect(uut.extractTypographyValue({
         text40: true,
         text70: true
-      }),).toEqual(Typography.text70);
+      })).toEqual(Typography.text70);
       expect(uut.extractTypographyValue({
         text70: true,
         text40: true
-      }),).toEqual(Typography.text40);
-      
+      })).toEqual(Typography.text40);
     });
 
     it('should return value of the custom made typography', () => {
@@ -67,17 +66,20 @@ describe('Modifiers', () => {
       expect(uut.extractTypographyValue({
         text40: true,
         customTypography: true
-      }),).toEqual({...Typography.text40, ...customTypography});
+      })).toEqual({...Typography.text40, ...customTypography});
       expect(uut.extractTypographyValue({
         customTypography: true,
         text40: true
-      }),).toEqual({...customTypography, ...Typography.text40});
+      })).toEqual({...customTypography, ...Typography.text40});
     });
 
     it('should merge typography modifiers', () => {
       const bold = {fontWeight: 'bold'};
       Typography.loadTypographies({bold});
-      expect(uut.extractTypographyValue({text70: true, bold: true})).toEqual({...Typography.text70, fontWeight: 'bold'});
+      expect(uut.extractTypographyValue({text70: true, bold: true})).toEqual({
+        ...Typography.text70,
+        fontWeight: 'bold'
+      });
     });
   });
 
@@ -91,7 +93,7 @@ describe('Modifiers', () => {
         'paddingB-15': true,
         'paddingH-20': true,
         'paddingV-15': true
-      }),).toEqual({
+      })).toEqual({
         padding: 25,
         paddingLeft: 15,
         paddingTop: 10,
@@ -125,7 +127,7 @@ describe('Modifiers', () => {
         'marginB-15': true,
         'marginH-20': true,
         'marginV-15': true
-      }),).toEqual({
+      })).toEqual({
         margin: 25,
         marginLeft: 15,
         marginTop: 10,
@@ -221,7 +223,13 @@ describe('Modifiers', () => {
       expect(uut.extractPositionStyle({abs: true})).toEqual({position: 'absolute'});
     });
     it('should return absolute fill object style', () => {
-      expect(uut.extractPositionStyle({absF: true})).toEqual({position: 'absolute', top: 0, left: 0, right: 0, bottom: 0});
+      expect(uut.extractPositionStyle({absF: true})).toEqual({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      });
     });
     it('should return absolute with top value', () => {
       expect(uut.extractPositionStyle({absT: true})).toEqual({position: 'absolute', top: 0});
@@ -241,7 +249,6 @@ describe('Modifiers', () => {
     it('should return absolute with horizontal values', () => {
       expect(uut.extractPositionStyle({absH: true})).toEqual({position: 'absolute', left: 0, right: 0});
     });
-
   });
 
   describe('extractFlexStyle - flex modifier', () => {
@@ -299,7 +306,7 @@ describe('Modifiers', () => {
         'paddingL-20': true,
         'bg-red30': true,
         other: 'some-value'
-      }),).toEqual({
+      })).toEqual({
         'paddingL-20': true,
         'bg-red30': true
       });
@@ -308,7 +315,7 @@ describe('Modifiers', () => {
         'margin-50': true,
         'background-blue20': true,
         other: 'some-value'
-      }),).toEqual({
+      })).toEqual({
         'margin-50': true,
         'background-blue20': true
       });
@@ -364,9 +371,9 @@ describe('Modifiers', () => {
       expect(uut.getThemeProps.call(SampleComponent, {test: true})).toEqual({prop1: 'yes', test: true});
       expect(uut.getThemeProps.call(SampleComponent, {test: false})).toEqual({prop1: 'no', test: false});
     });
-    
+
     it('should prioritize forced theme props over user props', () => {
-      ThemeManager.setComponentForcedTheme('SampleComponent', (props) => ({foo: 'forced'}));
+      ThemeManager.setComponentForcedTheme('SampleComponent', () => ({foo: 'forced'}));
       expect(uut.getThemeProps.call(SampleComponent, {foo: 'user-value', other: 'other'})).toEqual({
         foo: 'forced',
         other: 'other'
diff --git a/src/commons/asBaseComponent.tsx b/src/commons/asBaseComponent.tsx
index 4577f1df71..a4d66c9dce 100644
--- a/src/commons/asBaseComponent.tsx
+++ b/src/commons/asBaseComponent.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import _ from 'lodash';
 //@ts-ignore
 import hoistStatics from 'hoist-non-react-statics';
 //@ts-ignore
@@ -17,7 +16,7 @@ export interface BaseComponentInjectedProps {
 // TODO: find a proper way to inject this type in the private repo
 type ThemeComponent = {
   useCustomTheme?: boolean;
-}
+};
 
 function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentType<any>): React.ComponentClass<PROPS & ThemeComponent> & STATICS {
   class BaseComponent extends UIComponent {
@@ -31,7 +30,7 @@ function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentT
 
     static getThemeProps = (props: any, context: any) => {
       return Modifiers.getThemeProps.call(WrappedComponent, props, context);
-    }
+    };
 
     static getDerivedStateFromError(error: any) {
       UIComponent.defaultProps?.onError(error, WrappedComponent.defaultProps);
@@ -46,9 +45,9 @@ function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentT
       const {forwardedRef, ...others} = themeProps;
       return (
         (this.state.error && UIComponent.defaultProps?.renderError) || (
-          <WrappedComponent {...others} modifiers={modifiers} ref={forwardedRef} />
+          <WrappedComponent {...others} modifiers={modifiers} ref={forwardedRef}/>
         )
-      )
+      );
     }
   }
 
diff --git a/src/commons/baseComponent.js b/src/commons/baseComponent.js
index f9b1c1ad6e..734a81f874 100644
--- a/src/commons/baseComponent.js
+++ b/src/commons/baseComponent.js
@@ -74,7 +74,7 @@ export default function baseComponent(usePure) {
     extractContainerStyle(props) {
       let containerStyle = {};
       if (props.containerStyle) {
-        containerStyle = _.pickBy(props.containerStyle, (value, key) => {
+        containerStyle = _.pickBy(props.containerStyle, (_value, key) => {
           return key.includes('margin') || _.includes(['alignSelf', 'transform'], key);
         });
       }
diff --git a/src/commons/modifiers.ts b/src/commons/modifiers.ts
index d0e150a29d..a823f2b434 100644
--- a/src/commons/modifiers.ts
+++ b/src/commons/modifiers.ts
@@ -245,7 +245,7 @@ export function extractFlexStyle(props: Dictionary<any>): Partial<Record<NativeF
   const keys = Object.keys(props);
   const flexProp = keys.find(item => FLEX_KEY_PATTERN.test(item));
   if (flexProp && props[flexProp] === true) {
-    let [flexKey, flexValue] = flexProp.split('-') as [keyof typeof STYLE_KEY_CONVERTERS, string];
+    const [flexKey, flexValue] = flexProp.split('-') as [keyof typeof STYLE_KEY_CONVERTERS, string];
     const convertedFlexKey = STYLE_KEY_CONVERTERS[flexKey];
     const flexValueAsNumber = _.isEmpty(flexValue) ? 1 : Number(flexValue);
 
diff --git a/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js b/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js
index 13b62fcc04..625ff68e66 100644
--- a/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js
+++ b/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js
@@ -100,7 +100,7 @@ export default class KeyboardAwareBase extends Component {
   _scrollToFocusedTextInput() {
     if (this.props.getTextInputRefs) {
       const textInputRefs = this.props.getTextInputRefs();
-      textInputRefs.some((textInputRef, index, array) => {
+      textInputRefs.some((textInputRef) => {
         const isFocusedFunc = textInputRef.isFocused();
         const isFocused = isFocusedFunc && typeof isFocusedFunc === 'function' ? isFocusedFunc() : isFocusedFunc;
         if (isFocused) {
@@ -132,7 +132,7 @@ export default class KeyboardAwareBase extends Component {
     }
   }
 
-  _onKeyboardWillHide(event) {
+  _onKeyboardWillHide() {
     const keyboardHeight = this.state.keyboardHeight;
     this.setState({keyboardHeight: 0});
 
diff --git a/src/components/actionBar/index.tsx b/src/components/actionBar/index.tsx
index 96bcee2598..72adb64a49 100644
--- a/src/components/actionBar/index.tsx
+++ b/src/components/actionBar/index.tsx
@@ -1,12 +1,11 @@
 import _ from 'lodash';
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {StyleSheet, ViewStyle} from 'react-native';
 import {Colors, Shadows} from '../../style';
 import {asBaseComponent} from '../../commons/new';
 import View from '../view';
 import Button, {ButtonProps} from '../button';
 
-
 /**
  * @description: Quick actions bar, each action support Button component props
  * @modifiers: margin, padding
@@ -15,34 +14,34 @@ import Button, {ButtonProps} from '../button';
  */
 
 export type ActionBarProps = {
-    /**
-     * action bar height
-     */
-    height?: number;
-    /**
-     * action bar background color
-     */
-    backgroundColor?: string;
-    /**
-     * actions for the action bar
-     */
-    actions: ButtonProps[];
-    /**
-     * should action be equally centered
-     */
-    centered?: boolean;
-    /**
-     * use safe area, in case action bar attached to the bottom (default: true)
-     */
-    useSafeArea?: boolean;
-    /**
-     * keep the action bar position relative instead of it absolute position
-     */
-    keepRelative?: boolean;
-    /**
-     * style the action bar
-     */
-    style?: ViewStyle;
+  /**
+   * action bar height
+   */
+  height?: number;
+  /**
+   * action bar background color
+   */
+  backgroundColor?: string;
+  /**
+   * actions for the action bar
+   */
+  actions: ButtonProps[];
+  /**
+   * should action be equally centered
+   */
+  centered?: boolean;
+  /**
+   * use safe area, in case action bar attached to the bottom (default: true)
+   */
+  useSafeArea?: boolean;
+  /**
+   * keep the action bar position relative instead of it absolute position
+   */
+  keepRelative?: boolean;
+  /**
+   * style the action bar
+   */
+  style?: ViewStyle;
 };
 
 class ActionBar extends Component<ActionBarProps> {
@@ -54,10 +53,6 @@ class ActionBar extends Component<ActionBarProps> {
     useSafeArea: true
   };
 
-  constructor(props: ActionBarProps) {
-    super(props);
-  }
-
   styles = createStyles(this.props);
 
   getAlignment(actionIndex: number) {
@@ -90,7 +85,7 @@ class ActionBar extends Component<ActionBarProps> {
 
 export default asBaseComponent<ActionBarProps>(ActionBar);
 
-function createStyles({height, backgroundColor} : any) {
+function createStyles({height, backgroundColor}: any) {
   return StyleSheet.create({
     container: {
       height
diff --git a/src/components/actionSheet/index.js b/src/components/actionSheet/index.js
index 3bcfdad004..f0d0455049 100644
--- a/src/components/actionSheet/index.js
+++ b/src/components/actionSheet/index.js
@@ -161,7 +161,7 @@ export default class ActionSheet extends BaseComponent {
 
   renderActions() {
     const {title, options, cancelButtonIndex, renderAction, optionsStyle} = this.props;
-    const optionsToRender = _.filter(options, (option, index) => index !== cancelButtonIndex);
+    const optionsToRender = _.filter(options, (_option, index) => index !== cancelButtonIndex);
 
     return (
       <View style={[_.isEmpty(title) ? styles.listNoTitle : styles.listWithTitle, optionsStyle]}>
diff --git a/src/components/avatar/index.tsx b/src/components/avatar/index.tsx
index 58a75e961a..b99cbf2d76 100644
--- a/src/components/avatar/index.tsx
+++ b/src/components/avatar/index.tsx
@@ -1,6 +1,15 @@
 import _ from 'lodash';
-import React , {PureComponent} from 'react';
-import {StyleSheet, ImageSourcePropType, StyleProp, ViewStyle, TouchableOpacity, ImagePropsBase, ImageStyle, TextStyle} from 'react-native';
+import React, {PureComponent} from 'react';
+import {
+  StyleSheet,
+  ImageSourcePropType,
+  StyleProp,
+  ViewStyle,
+  TouchableOpacity,
+  ImagePropsBase,
+  ImageStyle,
+  TextStyle
+} from 'react-native';
 import {Colors} from '../../style';
 import {forwardRef, asBaseComponent} from '../../commons/new';
 import {extractAccessibilityProps} from '../../commons/modifiers';
@@ -23,14 +32,14 @@ export enum StatusModes {
   OFFLINE = 'OFFLINE',
   AWAY = 'AWAY',
   NONE = 'NONE'
-};
+}
 
 export enum BadgePosition {
   TOP_RIGHT = 'TOP_RIGHT',
   TOP_LEFT = 'TOP_LEFT',
   BOTTOM_RIGHT = 'BOTTOM_RIGHT',
   BOTTOM_LEFT = 'BOTTOM_LEFT'
-};
+}
 
 const DEFAULT_BADGE_SIZE = 'pimpleBig';
 
@@ -46,7 +55,7 @@ export type AvatarProps = {
   /**
    * Badge location on Avatar
    */
-  badgePosition?: BadgePosition,
+  badgePosition?: BadgePosition;
   /**
    * Badge props passed down to Badge component
    */
@@ -72,17 +81,17 @@ export type AvatarProps = {
    * Listener-callback for when an image's (uri) loading
    * starts (equiv. to Image.onLoadStart()).
    */
-  onImageLoadStart?: ImagePropsBase["onLoadStart"];
+  onImageLoadStart?: ImagePropsBase['onLoadStart'];
   /**
    * Listener-callback for when an image's (uri) loading
    * either succeeds or fails (equiv. to Image.onLoadEnd()).
    */
-  onImageLoadEnd?: ImagePropsBase["onLoadEnd"];
+  onImageLoadEnd?: ImagePropsBase['onLoadEnd'];
   /**
    * Listener-callback for when an image's (uri) loading
    * fails (equiv. to Image.onError()).
    */
-  onImageLoadError?: ImagePropsBase["onError"];
+  onImageLoadError?: ImagePropsBase['onError'];
   /**
    * Label that can represent initials
    */
@@ -139,7 +148,6 @@ export type AvatarPropTypes = AvatarProps; //TODO: remove after ComponentPropTyp
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AvatarsScreen.js
  */
 class Avatar extends PureComponent<AvatarProps> {
-
   styles: ReturnType<typeof createStyles>;
 
   constructor(props: AvatarProps) {
@@ -230,7 +238,7 @@ class Avatar extends PureComponent<AvatarProps> {
       return BADGE_SIZES[badgeSize] || BADGE_SIZES[DEFAULT_BADGE_SIZE];
     }
     return badgeSize;
-  }
+  };
 
   getBadgePosition = (): object => {
     const {size, badgePosition} = this.props;
@@ -242,7 +250,7 @@ class Avatar extends PureComponent<AvatarProps> {
     const badgeAlignment = {position: 'absolute', [badgeLocation[0]]: shift, [badgeLocation[1]]: shift};
 
     return badgeAlignment;
-  }
+  };
 
   renderBadge() {
     const {testID, badgeProps} = this.props;
@@ -344,9 +352,11 @@ class Avatar extends PureComponent<AvatarProps> {
         <View
           style={[this.getInitialsContainer(), {backgroundColor}, hasImage && this.styles.initialsContainerWithInset]}
         >
-          {!_.isUndefined(label) && <Text numberOfLines={1} style={[{fontSize}, this.styles.initials, {color}]} testID={`${testID}.label`}>
-            {label}
-          </Text>}
+          {!_.isUndefined(label) && (
+            <Text numberOfLines={1} style={[{fontSize}, this.styles.initials, {color}]} testID={`${testID}.label`}>
+              {label}
+            </Text>
+          )}
         </View>
         {this.renderImage()}
         {this.renderBadge()}
@@ -368,7 +378,8 @@ function createStyles(props: AvatarProps) {
     },
     initials: {
       color: labelColor,
-      backgroundColor: 'transparent'
+      backgroundColor: 'transparent',
+      lineHeight: undefined
     },
     ribbon: {
       backgroundColor: Colors.blue30,
@@ -382,4 +393,4 @@ function createStyles(props: AvatarProps) {
 
 export {Avatar}; // For tests
 
-export default asBaseComponent<AvatarProps, typeof Avatar>(forwardRef(Avatar))
+export default asBaseComponent<AvatarProps, typeof Avatar>(forwardRef(Avatar));
diff --git a/src/components/badge/index.tsx b/src/components/badge/index.tsx
index 91ed14e295..439bda565c 100644
--- a/src/components/badge/index.tsx
+++ b/src/components/badge/index.tsx
@@ -1,15 +1,24 @@
 import _ from 'lodash';
 import React, {PureComponent} from 'react';
-import {ImageSourcePropType, ImageStyle, StyleProp, StyleSheet, Text, TextStyle, TouchableOpacityProps, ViewStyle, ViewProps} from 'react-native';
+import {
+  ImageSourcePropType,
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  TouchableOpacityProps,
+  ViewStyle,
+  ViewProps
+} from 'react-native';
 import {View as AnimatableView} from 'react-native-animatable';
 import {extractAccessibilityProps, extractAnimationProps} from '../../commons/modifiers';
 import {asBaseComponent} from '../../commons/new';
-import {BorderRadiuses, Colors, Typography} from '../../style';
+import {BorderRadiuses, Colors, Spacings, Typography} from '../../style';
 import TouchableOpacity from '../touchableOpacity';
 import Image from '../image';
 import View from '../view';
 
-
 const LABEL_FORMATTER_VALUES = [1, 2, 3, 4] as const;
 
 // TODO: depreciate enum badge sizes, use only number for size
@@ -20,77 +29,78 @@ export enum BADGE_SIZES {
   small = 16,
   default = 20,
   large = 24
-};
+}
 
-type LabelFormatterValues = typeof LABEL_FORMATTER_VALUES[number]
-export type BadgeSizes = keyof typeof BADGE_SIZES
+type LabelFormatterValues = typeof LABEL_FORMATTER_VALUES[number];
+export type BadgeSizes = keyof typeof BADGE_SIZES;
 
-export type BadgeProps = ViewProps & TouchableOpacityProps & {
-  /**
-   * Text to show inside the badge.
-   * Not passing a label (undefined) will present a pimple badge.
-   */
-  label?: string;
-  /**
-   * Color of the badge background
-   */
-  backgroundColor?: string;
-  /**
-   * the badge size (default, small)
-   */
-  size: BadgeSizes | number;
-  /**
-   * Press handler
-   */
-  onPress?: (props: any) => void;
-  /**
-   * Defines how far a touch event can start away from the badge.
-   */
-  hitSlop?: ViewProps['hitSlop'];
-  /**
-   * width of border around the badge
-   */
-  borderWidth?: number;
-  /**
-   * radius of border around the badge
-   */
-  borderRadius?: number;
-  /**
-   * color of border around the badge
-   */
-  borderColor?: ImageStyle['borderColor'];
-  /**
-   * Additional styles for the top container
-   */
-  containerStyle?: StyleProp<ViewStyle>
-  /**
-   * Additional styles for the badge label
-   */
-  labelStyle?: TextStyle;
-  /**
-   * Receives a number from 1 to 4, representing the label's max digit length.
-   * Beyond the max number for that digit length, a "+" will show at the end.
-   * If set to a value not included in LABEL_FORMATTER_VALUES, no formatting will occur.
-   * Example: labelLengthFormater={2}, label={124}, label will present "99+".
-   */
-  labelFormatterLimit?: LabelFormatterValues;
-  /**
-   * Renders an icon badge
-   */
-  icon?: ImageSourcePropType;
-  /**
-   * Additional styling to badge icon
-   */
-  iconStyle?: object;
-  /**
-   * Additional props passed to icon
-   */
-  iconProps?: object;
-  /**
-   * Use to identify the badge in tests
-   */
-  testId?: string;
-}
+export type BadgeProps = ViewProps &
+  TouchableOpacityProps & {
+    /**
+     * Text to show inside the badge.
+     * Not passing a label (undefined) will present a pimple badge.
+     */
+    label?: string;
+    /**
+     * Color of the badge background
+     */
+    backgroundColor?: string;
+    /**
+     * the badge size (default, small)
+     */
+    size: BadgeSizes | number;
+    /**
+     * Press handler
+     */
+    onPress?: (props: any) => void;
+    /**
+     * Defines how far a touch event can start away from the badge.
+     */
+    hitSlop?: ViewProps['hitSlop'];
+    /**
+     * width of border around the badge
+     */
+    borderWidth?: number;
+    /**
+     * radius of border around the badge
+     */
+    borderRadius?: number;
+    /**
+     * color of border around the badge
+     */
+    borderColor?: ImageStyle['borderColor'];
+    /**
+     * Additional styles for the top container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Additional styles for the badge label
+     */
+    labelStyle?: TextStyle;
+    /**
+     * Receives a number from 1 to 4, representing the label's max digit length.
+     * Beyond the max number for that digit length, a "+" will show at the end.
+     * If set to a value not included in LABEL_FORMATTER_VALUES, no formatting will occur.
+     * Example: labelLengthFormater={2}, label={124}, label will present "99+".
+     */
+    labelFormatterLimit?: LabelFormatterValues;
+    /**
+     * Renders an icon badge
+     */
+    icon?: ImageSourcePropType;
+    /**
+     * Additional styling to badge icon
+     */
+    iconStyle?: object;
+    /**
+     * Additional props passed to icon
+     */
+    iconProps?: object;
+    /**
+     * Use to identify the badge in tests
+     */
+    testId?: string;
+  };
 
 /**
  * @description: Round colored badge, typically used to show a number
@@ -100,7 +110,6 @@ export type BadgeProps = ViewProps & TouchableOpacityProps & {
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BadgesScreen.js
  */
 class Badge extends PureComponent<BadgeProps> {
-
   styles: ReturnType<typeof createStyles>;
 
   static displayName = 'Badge';
@@ -143,6 +152,15 @@ class Badge extends PureComponent<BadgeProps> {
       height: badgeHeight,
       minWidth: badgeHeight
     };
+    if (icon && label) {
+      style.paddingRight = 6;
+      style.paddingLeft = 4;
+      style.height = Spacings.s5;
+      if (borderWidth) {
+        style.height += borderWidth * 2;
+      }
+      return style;
+    }
 
     const isPimple = label === undefined;
     if (isPimple || icon) {
@@ -166,7 +184,7 @@ class Badge extends PureComponent<BadgeProps> {
   getFormattedLabel() {
     const {labelFormatterLimit, label} = this.props;
 
-      if (_.isNaN(label)) {
+    if (_.isNaN(label)) {
       return label;
     }
 
@@ -213,7 +231,8 @@ class Badge extends PureComponent<BadgeProps> {
   }
 
   renderIcon() {
-    const {icon, iconStyle, iconProps, borderColor} = this.props;
+    const {icon, iconStyle, iconProps, borderColor, label} = this.props;
+    const flex = label ? 0 : 1;
     return (
       <Image
         source={icon!}
@@ -222,7 +241,7 @@ class Badge extends PureComponent<BadgeProps> {
         borderColor={borderColor}
         {...iconProps}
         style={{
-          flex: 1,
+          flex,
           ...iconStyle
         }}
       />
@@ -237,6 +256,7 @@ class Badge extends PureComponent<BadgeProps> {
       containerStyle,
       hitSlop,
       icon,
+      label,
       onPress,
       testId,
       testID,
@@ -245,7 +265,7 @@ class Badge extends PureComponent<BadgeProps> {
     const backgroundStyle = backgroundColor && {backgroundColor};
     const sizeStyle = this.getBadgeSizeStyle();
     const borderStyle = this.getBorderStyling();
-    const animationProps =  extractAnimationProps();
+    const animationProps = extractAnimationProps();
     const Container = !_.isEmpty(animationProps) ? AnimatableView : onPress ? TouchableOpacity : View;
 
     if (!_.isEmpty(animationProps)) {
@@ -255,7 +275,14 @@ class Badge extends PureComponent<BadgeProps> {
     return (
       // The extra View wrapper is to break badge's flex-ness
       // @ts-ignore
-      <View style={containerStyle} {...others} backgroundColor={undefined} borderWidth={undefined} {...this.getAccessibilityProps()}>
+      <View
+        style={containerStyle}
+        {...others}
+        backgroundColor={undefined}
+        // @ts-expect-error
+        borderWidth={undefined}
+        {...this.getAccessibilityProps()}
+      >
         <Container
           testID={testID || testId}
           pointerEvents={'none'}
@@ -264,8 +291,10 @@ class Badge extends PureComponent<BadgeProps> {
           activeOpacity={activeOpacity}
           hitSlop={hitSlop}
           {...animationProps}
+          row
         >
-          {icon ? this.renderIcon() : this.renderLabel()}
+          {icon && this.renderIcon()}
+          {label && this.renderLabel()}
         </Container>
       </View>
     );
@@ -297,4 +326,4 @@ function createStyles(props: BadgeProps) {
 }
 export {Badge}; // For tests
 
-export default asBaseComponent<BadgeProps, typeof Badge>(Badge)
+export default asBaseComponent<BadgeProps, typeof Badge>(Badge);
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
index cac1ca8f09..506384c5ec 100644
--- a/src/components/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -26,7 +26,7 @@ export enum ButtonSize {
   large = 'large'
 }
 
-export enum AnimationDirection {
+export enum ButtonAnimationDirection {
   center = 'center',
   left = 'left',
   right = 'right'
@@ -146,7 +146,7 @@ export type ButtonProps = TouchableOpacityProps &
     /**
      * the direction of the animation ('left' and 'right' will effect the button's own alignment)
      */
-    animateTo?: AnimationDirection;
+    animateTo?: ButtonAnimationDirection;
   };
 export type ButtonPropTypes = ButtonProps; //TODO: remove after ComponentPropTypes deprecation;
 
@@ -196,7 +196,7 @@ class Button extends PureComponent<Props, ButtonState> {
 
   static sizes = ButtonSize;
 
-  static animationDirection = AnimationDirection;
+  static animationDirection = ButtonAnimationDirection;
 
   // This redundant constructor for some reason fix tests :/
   // eslint-disable-next-line
@@ -325,31 +325,31 @@ class Button extends PureComponent<Props, ButtonState> {
     CONTAINER_STYLE_BY_SIZE[Button.sizes.xSmall] = round
       ? {height: this.state.size, width: this.state.size, padding: PADDINGS.XSMALL}
       : {
-          paddingVertical: PADDINGS.XSMALL,
-          paddingHorizontal: HORIZONTAL_PADDINGS.XSMALL,
-          minWidth: MIN_WIDTH.XSMALL
-        };
+        paddingVertical: PADDINGS.XSMALL,
+        paddingHorizontal: HORIZONTAL_PADDINGS.XSMALL,
+        minWidth: MIN_WIDTH.XSMALL
+      };
     CONTAINER_STYLE_BY_SIZE[Button.sizes.small] = round
       ? {height: this.state.size, width: this.state.size, padding: PADDINGS.SMALL}
       : {
-          paddingVertical: PADDINGS.SMALL,
-          paddingHorizontal: HORIZONTAL_PADDINGS.SMALL,
-          minWidth: MIN_WIDTH.SMALL
-        };
+        paddingVertical: PADDINGS.SMALL,
+        paddingHorizontal: HORIZONTAL_PADDINGS.SMALL,
+        minWidth: MIN_WIDTH.SMALL
+      };
     CONTAINER_STYLE_BY_SIZE[Button.sizes.medium] = round
       ? {height: this.state.size, width: this.state.size, padding: PADDINGS.MEDIUM}
       : {
-          paddingVertical: PADDINGS.MEDIUM,
-          paddingHorizontal: HORIZONTAL_PADDINGS.MEDIUM,
-          minWidth: MIN_WIDTH.MEDIUM
-        };
+        paddingVertical: PADDINGS.MEDIUM,
+        paddingHorizontal: HORIZONTAL_PADDINGS.MEDIUM,
+        minWidth: MIN_WIDTH.MEDIUM
+      };
     CONTAINER_STYLE_BY_SIZE[Button.sizes.large] = round
       ? {height: this.state.size, width: this.state.size, padding: PADDINGS.LARGE}
       : {
-          paddingVertical: PADDINGS.LARGE,
-          paddingHorizontal: HORIZONTAL_PADDINGS.LARGE,
-          minWidth: MIN_WIDTH.LARGE
-        };
+        paddingVertical: PADDINGS.LARGE,
+        paddingHorizontal: HORIZONTAL_PADDINGS.LARGE,
+        minWidth: MIN_WIDTH.LARGE
+      };
 
     if (outline) {
       _.forEach(CONTAINER_STYLE_BY_SIZE, style => {
@@ -470,7 +470,7 @@ class Button extends PureComponent<Props, ButtonState> {
       if (typeof iconSource === 'function') {
         return iconSource(iconStyle);
       } else {
-        return <Image source={iconSource} supportRTL={supportRTL} style={iconStyle} />;
+        return <Image source={iconSource} supportRTL={supportRTL} style={iconStyle}/>;
       }
     }
     return null;
diff --git a/src/components/card/CardSection.tsx b/src/components/card/CardSection.tsx
index 341d0a4f1f..8b4ba53f6b 100644
--- a/src/components/card/CardSection.tsx
+++ b/src/components/card/CardSection.tsx
@@ -8,7 +8,6 @@ import Text, {TextProps} from '../text';
 import Image, {ImageProps} from '../image';
 import asCardChild, {asCardChildProps} from './asCardChild';
 
-
 type ContentType = TextProps & {text?: string};
 
 export type CardSectionProps = ViewProps & {
@@ -37,7 +36,7 @@ export type CardSectionProps = ViewProps & {
    * Will be used for the background when provided
    */
   imageSource?: ImageSourcePropType;
-  source?: ImageSourcePropType;
+  source?: ImageSourcePropType; // TODO: remove after deprecation
   /**
    * The style for the background image
    */
@@ -61,52 +60,36 @@ class CardSection extends PureComponent<Props> {
     super(props);
 
     if (props.imageSource) {
-      LogService.deprecationWarn({component: 'CardSection', oldProp: 'imageSource', newProp: 'source'});
+      LogService.deprecationWarn({component: 'CardSection', oldProp: 'source', newProp: 'imageSource'});
     }
   }
 
   renderContent = () => {
-    const {
-      content,
-      leadingIcon,
-      trailingIcon,
-      contentStyle,
-      testID
-    } = this.props;
+    const {content, leadingIcon, trailingIcon, contentStyle, testID} = this.props;
     return (
       <>
-        {leadingIcon && (
-          <Image testID={`${testID}.leadingIcon`} {...leadingIcon} />
-        )}
+        {leadingIcon && <Image testID={`${testID}.leadingIcon`} {...leadingIcon}/>}
         <View testID={`${testID}.contentContainer`} style={[contentStyle]}>
-          {_.map(
-            content,
+          {_.map(content,
             // @ts-ignore
             ({text, ...others} = {}, index) => {
               return (
                 !_.isUndefined(text) && (
-                  <Text
-                    testID={`${testID}.text.${index}`}
-                    key={index}
-                    {...others}
-                  >
+                  <Text testID={`${testID}.text.${index}`} key={index} {...others}>
                     {text}
                   </Text>
                 )
               );
-            }
-          )}
+            })}
         </View>
-        {trailingIcon && (
-          <Image testID={`${testID}.trailingIcon`} {...trailingIcon} />
-        )}
+        {trailingIcon && <Image testID={`${testID}.trailingIcon`} {...trailingIcon}/>}
       </>
     );
   };
 
   renderImage = () => {
     const {source, imageSource, imageStyle, imageProps, testID} = this.props;
-    const finalSource = source || imageSource;
+    const finalSource = imageSource || source;
 
     // not actually needed, instead of adding ts-ignore
     if (finalSource) {
@@ -130,7 +113,7 @@ class CardSection extends PureComponent<Props> {
       style,
       ...others
     } = this.props;
-    const finalSource = source || imageSource;
+    const finalSource = imageSource || source;
 
     return (
       <View style={[styles.container, borderStyle, style]} {...others}>
diff --git a/src/components/card/asCardChild.tsx b/src/components/card/asCardChild.tsx
index f5f6e4b5c4..c30cf78264 100644
--- a/src/components/card/asCardChild.tsx
+++ b/src/components/card/asCardChild.tsx
@@ -1,15 +1,9 @@
 import React from 'react';
 import CardContext from './CardContext';
 
-function asCardChild<T>(
-  WrappedComponent: React.ComponentType<any>
-): React.ComponentType<T> {
+function asCardChild<T>(WrappedComponent: React.ComponentType<any>): React.ComponentType<T> {
   const cardChild = (props: any) => {
-    return (
-      <CardContext.Consumer>
-        {(context) => <WrappedComponent context={context} {...props} />}
-      </CardContext.Consumer>
-    );
+    return <CardContext.Consumer>{context => <WrappedComponent context={context} {...props}/>}</CardContext.Consumer>;
   };
 
   cardChild.displayName = WrappedComponent.displayName;
diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx
index 8a7135aba4..d5ad55e90d 100644
--- a/src/components/carousel/index.tsx
+++ b/src/components/carousel/index.tsx
@@ -11,7 +11,7 @@ import * as presenter from './CarouselPresenter';
 import {CarouselProps, CarouselState, PageControlPosition} from './types';
 export {CarouselProps};
 
-interface DefaultProps extends Partial<CarouselProps> {}
+type DefaultProps = Partial<CarouselProps>
 
 /**
  * @description: Carousel for scrolling pages horizontally
@@ -180,7 +180,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     this.startAutoPlay();
   }
 
-  goToPage(pageIndex: number, animated: boolean = true) {
+  goToPage(pageIndex: number, animated = true) {
     this.setState({currentPage: this.getCalcIndex(pageIndex)}, () => this.updateOffset(animated));
   }
 
@@ -203,10 +203,8 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     if (containerWidth) {
       const spacings = pageWidth === containerWidth ? 0 : this.getItemSpacings(this.props);
       const initialBreak = pageWidth - (containerWidth - pageWidth - spacings) / 2;
-      const snapToOffsets = _.times(
-        presenter.getChildrenLength(this.props),
-        index => initialBreak + index * pageWidth + this.getContainerMarginHorizontal()
-      );
+      const snapToOffsets = _.times(presenter.getChildrenLength(this.props),
+        index => initialBreak + index * pageWidth + this.getContainerMarginHorizontal());
       return snapToOffsets;
     }
   };
diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx
index 6374366b8c..97115696cc 100644
--- a/src/components/checkbox/index.tsx
+++ b/src/components/checkbox/index.tsx
@@ -1,14 +1,22 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {Animated, Easing, StyleSheet, StyleProp, TouchableOpacityProps, ViewStyle, TextStyle} from 'react-native';
-import {Colors} from '../../style';
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  StyleProp,
+  TouchableOpacityProps,
+  ViewStyle,
+  TextStyle,
+  ImageStyle
+} from 'react-native';
+import {Colors, Spacings} from '../../style';
 //@ts-ignore
 import Assets from '../../assets';
 import {asBaseComponent} from '../../commons/new';
 import TouchableOpacity from '../touchableOpacity';
 import Text from '../text';
 import View from '../view';
-import {Spacings} from '../../style';
 
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = Colors.blue30;
@@ -89,7 +97,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
 
   styles: {
     container: StyleProp<ViewStyle>;
-    selectedIcon: StyleProp<ViewStyle>;
+    selectedIcon: StyleProp<ImageStyle>;
     checkboxLabel: StyleProp<TextStyle>;
   };
 
@@ -172,11 +180,15 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   getTintColor = () => {
     const {outline, disabled, iconColor} = this.props;
     if (outline) {
-      if (disabled) return DEFAULT_DISABLED_COLOR;
-      else return iconColor || DEFAULT_COLOR;
+      if (disabled) {
+        return DEFAULT_DISABLED_COLOR;
+      } else {
+        return iconColor || DEFAULT_COLOR;
+      }
+    } else if (disabled) {
+      return Colors.white;
     } else {
-      if (disabled) return Colors.white;
-      else return iconColor || Colors.white;
+      return iconColor || Colors.white;
     }
   };
 
@@ -188,7 +200,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   }
 
   renderCheckbox() {
-    const {selectedIcon, color, iconColor, label, disabled, testID, style, containerStyle, ...others} = this.props;
+    const {selectedIcon, label, testID, style, containerStyle, ...others} = this.props;
 
     return (
       //@ts-ignore
@@ -250,7 +262,7 @@ function createStyles(props: CheckboxProps) {
     container: {
       width: size,
       height: size,
-      borderRadius: borderRadius,
+      borderRadius,
       alignItems: 'center',
       justifyContent: 'center',
       borderColor: color
diff --git a/src/components/colorPicker/ColorPalette.js b/src/components/colorPicker/ColorPalette.js
index 954dfaf82c..0a3f3bb84c 100644
--- a/src/components/colorPicker/ColorPalette.js
+++ b/src/components/colorPicker/ColorPalette.js
@@ -12,7 +12,6 @@ import PageControl from '../pageControl';
 import ColorSwatch, {SWATCH_SIZE} from './ColorSwatch';
 import ScrollBar from '../scrollBar';
 
-
 const VERTICAL_PADDING = 16;
 const HORIZONTAL_PADDING = 20;
 const MINIMUM_MARGIN = 16;
@@ -102,7 +101,7 @@ export default class ColorPalette extends PureBaseComponent {
       this.initLocalVariables();
       this.setState({orientation: Constants.orientation}); // only to trigger render
     }
-  }
+  };
 
   initLocalVariables() {
     this.itemsRefs = undefined;
@@ -134,7 +133,7 @@ export default class ColorPalette extends PureBaseComponent {
     return containerWidth || Constants.screenWidth;
   }
 
-  getUniqueColors = memoize((colors) => {
+  getUniqueColors = memoize(colors => {
     const c = _.map(colors, color => {
       if (Colors.isTransparent(color)) {
         return color;
@@ -190,7 +189,7 @@ export default class ColorPalette extends PureBaseComponent {
 
     if (scrollable && this.selectedColorIndex !== undefined) {
       const childRef = this.itemsRefs[this.selectedColorIndex];
-      
+
       if (childRef) {
         const handle = findNodeHandle(childRef);
         if (handle) {
@@ -198,7 +197,7 @@ export default class ColorPalette extends PureBaseComponent {
             e => {
               console.warn(e);
             },
-            (x, y, w, h) => {
+            (x, _y, w, _h) => {
               if (x + w > this.containerWidth) {
                 this.scrollBar.current.scrollTo({
                   x: x + w + HORIZONTAL_PADDING - this.containerWidth,
@@ -232,11 +231,11 @@ export default class ColorPalette extends PureBaseComponent {
     }, 0);
   };
 
-  getHorizontalMargins = (index) => {
+  getHorizontalMargins = index => {
     const isFirst = index === 0;
     const isOnLeft = isFirst || index % this.itemsPerRow === 0;
     const isOnRight = index % this.itemsPerRow === this.itemsPerRow - 1;
-    
+
     let marginLeft;
     let marginRight;
 
@@ -252,7 +251,7 @@ export default class ColorPalette extends PureBaseComponent {
     return {marginLeft, marginRight};
   };
 
-  getSwatchStyle = (index) => {
+  getSwatchStyle = index => {
     const sizeHasChanged = this.colors.length !== this.currentColorsCount;
     const isNextToLastIndex = index === this.colors.length - 2;
 
diff --git a/src/components/drawer/index.tsx b/src/components/drawer/index.tsx
index 8e748ab3f1..61f7247c22 100644
--- a/src/components/drawer/index.tsx
+++ b/src/components/drawer/index.tsx
@@ -10,7 +10,6 @@ import {Colors} from '../../style';
 import View from '../view';
 import Swipeable, {SwipeableProps} from './Swipeable';
 
-
 const DEFAULT_BG = Colors.blue30;
 const DEFAULT_BOUNCINESS = 0;
 
@@ -160,11 +159,11 @@ class Drawer extends PureComponent<Props> {
 
   private getLeftActionsContainerStyle = memoize((leftItem, rightItems) => {
     return this.getActionsContainerStyle(Constants.isRTL ? rightItems : [leftItem]);
-  })
+  });
 
   private getRightActionsContainerStyle = memoize((rightItems, leftItem) => {
     return this.getActionsContainerStyle(Constants.isRTL ? [leftItem] : rightItems);
-  })
+  });
 
   private getActionsContainerStyle(items: ItemProps[]) {
     return {backgroundColor: _.get(_.first(items), 'background', DEFAULT_BG)};
@@ -203,7 +202,7 @@ class Drawer extends PureComponent<Props> {
       this.closeDrawer();
     }
     _.invoke(item, 'onPress', this.props);
-  }
+  };
 
   private onSwipeableWillOpen = () => {
     _.invoke(this.props, 'onSwipeableWillOpen', this.props);
@@ -220,7 +219,7 @@ class Drawer extends PureComponent<Props> {
       }
       this.animateItem(options);
     }
-  }
+  };
 
   private animateItem({rowWidth, leftWidth, dragX, released, resetItemPosition}: any) {
     const toValue = resetItemPosition ? 0 : dragX ? dragX - leftWidth : rowWidth * 0.6 - leftWidth;
@@ -273,7 +272,7 @@ class Drawer extends PureComponent<Props> {
 
   private onAccessibilityAction = (event: AccessibilityActionEvent) => {
     const actions = this.getAccessibilityActions(true);
-    const action = _.find(actions, (o) => {
+    const action = _.find(actions, o => {
       // return o.text === event.nativeEvent.action;
       return o.name === event.nativeEvent.actionName;
     });
@@ -283,18 +282,18 @@ class Drawer extends PureComponent<Props> {
   /** Renders */
 
   // TODO: enable support for rendering more than one left item
-  private renderLeftActions = (progress: Animated.Value/* , dragX: Animated.Value */) => {
+  private renderLeftActions = (progress: Animated.Value /* , dragX: Animated.Value */) => {
     const {leftItem} = this.props;
     const leftItems = leftItem ? [leftItem] : undefined;
-    return this.renderActions(leftItems, progress/* , dragX */);
+    return this.renderActions(leftItems, progress /* , dragX */);
   };
 
-  private renderRightActions = (progress: Animated.Value/* , dragX: Animated.Value */) => {
+  private renderRightActions = (progress: Animated.Value /* , dragX: Animated.Value */) => {
     const {rightItems} = this.props;
-    return this.renderActions(rightItems, progress/* , dragX */);
+    return this.renderActions(rightItems, progress /* , dragX */);
   };
 
-  private renderActions(items: ItemProps[] | undefined, progress: Animated.Value/* , dragX: Animated.Value */) {
+  private renderActions(items: ItemProps[] | undefined, progress: Animated.Value /* , dragX: Animated.Value */) {
     if (items) {
       return (
         // @ts-ignore
diff --git a/src/components/expandableSection/index.tsx b/src/components/expandableSection/index.tsx
index 21fd2ea8fa..86e06aa6fe 100644
--- a/src/components/expandableSection/index.tsx
+++ b/src/components/expandableSection/index.tsx
@@ -1,8 +1,7 @@
-import _ from 'lodash';
 import React from 'react';
 import {LayoutAnimation, StyleSheet} from 'react-native';
 import View from '../view';
-import TouchableOpacity from '../touchableOpacity'
+import TouchableOpacity from '../touchableOpacity';
 
 export type ExpandableSectionProps = {
   /**
@@ -36,13 +35,13 @@ export type ExpandableSectionProps = {
 function ExpandableSection(props: ExpandableSectionProps) {
   const {expanded, sectionHeader, children, top} = props;
 
-const onPress = () => {
-  props.onPress?.();
-  LayoutAnimation.configureNext({...LayoutAnimation.Presets.easeInEaseOut, duration: 300});
-  }
+  const onPress = () => {
+    props.onPress?.();
+    LayoutAnimation.configureNext({...LayoutAnimation.Presets.easeInEaseOut, duration: 300});
+  };
 
   return (
-    <View style={styles.container}> 
+    <View style={styles.container}>
       {top && expanded && children}
       <TouchableOpacity onPress={onPress}>{sectionHeader}</TouchableOpacity>
       {!top && expanded && children}
diff --git a/src/components/fader/index.tsx b/src/components/fader/index.tsx
index cf9e37debf..dea64a31f1 100644
--- a/src/components/fader/index.tsx
+++ b/src/components/fader/index.tsx
@@ -5,8 +5,16 @@ import View from '../view';
 import Image from '../image';
 
 export enum FaderPosition {
+  /**
+   * @deprecated please use START instead
+   */
   LEFT = 'LEFT',
+  START = 'START',
+  /**
+   * @deprecated please use END instead
+   */
   RIGHT = 'RIGHT',
+  END = 'END',
   TOP = 'TOP',
   BOTTOM = 'BOTTOM'
 }
@@ -17,7 +25,7 @@ export type FaderProps = {
    */
   visible?: boolean;
   /**
-   * The position of the fader (the image is different), defaults to Fader.position.RIGHT
+   * The position of the fader (the image is different), defaults to Fader.position.END
    */
   position?: FaderPosition;
   /**
@@ -39,15 +47,17 @@ function Fader(props: FaderProps) {
 
   const fadeSize = getFadeSize();
   const getStyles = useCallback(() => {
-    const position = props.position || FaderPosition.RIGHT;
+    const position = props.position || FaderPosition.END;
     let containerStyle, imageStyle, imageSource;
     switch (position) {
       case FaderPosition.LEFT:
+      case FaderPosition.START:
         containerStyle = {...staticStyles.containerLeft, width: fadeSize};
         imageStyle = {height: '100%', width: fadeSize};
         imageSource = require('./gradientLeft.png');
         break;
       case FaderPosition.RIGHT:
+      case FaderPosition.END:
         containerStyle = {...staticStyles.containerRight, width: fadeSize};
         imageStyle = {height: '100%', width: fadeSize};
         imageSource = require('./gradientRight.png');
@@ -80,6 +90,7 @@ function Fader(props: FaderProps) {
     <View pointerEvents={'none'} style={styles.containerStyle}>
       {(props.visible || _.isUndefined(props.visible)) && (
         <Image
+          supportRTL
           source={styles.imageSource}
           tintColor={props.tintColor}
           style={styles.imageStyle}
diff --git a/src/components/picker/PickerModal.js b/src/components/picker/PickerModal.js
index ce53b082e3..121f746616 100644
--- a/src/components/picker/PickerModal.js
+++ b/src/components/picker/PickerModal.js
@@ -39,7 +39,7 @@ class PickerModal extends BaseComponent {
     scrollContentHeight: undefined
   };
 
-  keyExtractor = (item, index) => index.toString();
+  keyExtractor = (_item, index) => index.toString();
 
   generateStyles() {
     this.styles = createStyles(this.props);
diff --git a/src/components/radioButton/RadioButton.tsx b/src/components/radioButton/RadioButton.tsx
index 2cf09b7aa0..67a85326ef 100644
--- a/src/components/radioButton/RadioButton.tsx
+++ b/src/components/radioButton/RadioButton.tsx
@@ -23,59 +23,64 @@ import {RadioGroupContextProps} from './RadioGroupContext';
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = Colors.blue30;
 
-export type RadioButtonProps = RadioGroupContextProps & ViewProps & {
-  /**
-   * The identifier value of the radio button. must be different than other RadioButtons in the same group
-   */
-  value?: string | number | boolean;
-  /**
-   * When using RadioButton without a RadioGroup, use this prop to toggle selection
-   */
-  selected?: boolean;
-  /**
-   * Invoked when pressing the button
-   */
-  onPress?: (selected: boolean) => void;
-  /**
-   * Whether the radio button should be disabled
-   */
-  disabled?: boolean;
-  /**
-   * The color of the radio button
-   */
-  color?: string;
-  /**
-   * The size of the radio button, affect both width & height
-   */
-  size?: number;
-  /**
-   * The radio button border radius
-   */
-  borderRadius?: number;
-  /**
-   * A label for the radio button description
-   */
-  label?: string;
-  /**
-   * Label style
-   */
-  labelStyle?: TextStyle;
-  /**
-   * Icon image source
-   */
-  iconSource?: ImageSourcePropType;
-  /**
-   * Icon image style
-   */
-  iconStyle?: ImageStyle;
-  /**
-   * Should the icon be on the right side of the label
-   */
-  iconOnRight?: boolean;
-   /**
+export type RadioButtonProps = RadioGroupContextProps &
+  ViewProps & {
+    /**
+     * The identifier value of the radio button. must be different than other RadioButtons in the same group
+     */
+    value?: string | number | boolean;
+    /**
+     * When using RadioButton without a RadioGroup, use this prop to toggle selection
+     */
+    selected?: boolean;
+    /**
+     * Invoked when pressing the button
+     */
+    onPress?: (selected: boolean) => void;
+    /**
+     * Whether the radio button should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * The color of the radio button
+     */
+    color?: string;
+    /**
+     * The size of the radio button, affect both width & height
+     */
+    size?: number;
+    /**
+     * The radio button border radius
+     */
+    borderRadius?: number;
+    /**
+     * A label for the radio button description
+     */
+    label?: string;
+    /**
+     * Label style
+     */
+    labelStyle?: TextStyle;
+    /**
+     * Icon image source
+     */
+    iconSource?: ImageSourcePropType;
+    /**
+     * Icon image style
+     */
+    iconStyle?: ImageStyle;
+    /**
+     * Should the icon be on the right side of the label
+     */
+    iconOnRight?: boolean;
+    /**
      * Should the content be rendered right to the button
      */
     contentOnRight?: boolean;
+    /**
+     * Additional styling for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
   };
 export type RadioButtonPropTypes = RadioButtonProps; //TODO: remove after ComponentPropTypes deprecation;
 
@@ -244,7 +249,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
   }
 
   render() {
-    const {onPress, onValueChange, contentOnRight, ...others} = this.props;
+    const {onPress, onValueChange, contentOnRight, containerStyle, ...others} = this.props;
     const Container = onPress || onValueChange ? TouchableOpacity : View;
 
     return (
@@ -254,6 +259,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
         centerV
         activeOpacity={1}
         {...others}
+        style={containerStyle}
         onPress={this.onPress}
         {...this.getAccessibilityProps()}
       >
diff --git a/src/components/radioButton/RadioGroup.tsx b/src/components/radioButton/RadioGroup.tsx
index 5354eb734f..5ab1e1eabd 100644
--- a/src/components/radioButton/RadioGroup.tsx
+++ b/src/components/radioButton/RadioGroup.tsx
@@ -56,7 +56,7 @@ class RadioGroup extends PureComponent<Props, RadioGroupState> {
 
     return {
       value: initialValue
-    }
+    };
   };
 
   static getDerivedStateFromProps: GetDerivedStateFromProps<Props, RadioGroupState> = (props, state) => {
diff --git a/src/components/scrollBar/ScrollBarGradient.js b/src/components/scrollBar/ScrollBarGradient.tsx
similarity index 66%
rename from src/components/scrollBar/ScrollBarGradient.js
rename to src/components/scrollBar/ScrollBarGradient.tsx
index d608a41041..15d505240a 100644
--- a/src/components/scrollBar/ScrollBarGradient.js
+++ b/src/components/scrollBar/ScrollBarGradient.tsx
@@ -1,6 +1,6 @@
 // TODO: use this component inside ScrollBar
 import React, {useRef, useEffect, useMemo} from 'react';
-import {Animated} from 'react-native';
+import {Animated, ImageSourcePropType} from 'react-native';
 
 import {Colors} from '../../style';
 import {Constants} from '../../helpers';
@@ -9,6 +9,43 @@ import Image from '../image';
 
 const AnimatedImage = Animated.createAnimatedComponent(Image);
 
+export interface ScrollBarGradientProps {
+  /**
+   * Is the gradient visible
+   */
+  visible?: boolean;
+  /**
+   * Should the gradient be on the left (reverse)
+   */
+  left?: boolean;
+  /**
+   * The gradient's width (default is 76)
+   */
+  gradientWidth?: number;
+  /**
+   * The gradient's height (default 100%)
+   */
+  gradientHeight?: number;
+  /**
+   * The gradient's margins (default is 0)
+   */
+  gradientMargins?: number;
+  // TODO: deprecate
+  /**
+   * The gradient's height (default 100%)
+   * @deprecated
+   */
+  height?: number;
+  /**
+   * The gradient's color (default is white)
+   */
+  gradientColor?: string;
+  /**
+   * Image source for the gradient (default is assets/gradientOverlay.png)
+   */
+  gradientImage?: ImageSourcePropType;
+}
+
 const ScrollBarGradient = ({
   visible,
   left,
@@ -18,7 +55,7 @@ const ScrollBarGradient = ({
   height,
   gradientColor = Colors.white,
   gradientImage = require('./assets/gradientOverlay.png')
-}) => {
+}: ScrollBarGradientProps) => {
   const gradientOpacity = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
diff --git a/src/components/scrollBar/index.js b/src/components/scrollBar/index.tsx
similarity index 71%
rename from src/components/scrollBar/index.js
rename to src/components/scrollBar/index.tsx
index eb86086b1e..b176ce0e80 100644
--- a/src/components/scrollBar/index.js
+++ b/src/components/scrollBar/index.tsx
@@ -1,69 +1,84 @@
 import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, {useCallback} from 'react';
-import {Animated, ScrollView, FlatList} from 'react-native';
+import React, {Component, useCallback} from 'react';
+import {
+  Animated,
+  ScrollView,
+  FlatList,
+  FlatListProps,
+  ImageSourcePropType,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+  LayoutChangeEvent
+} from 'react-native';
 import {Constants} from '../../helpers';
 import {Colors} from '../../style';
-import {BaseComponent, forwardRef} from '../../commons';
+import {asBaseComponent, forwardRef, ForwardRefInjectedProps} from '../../commons/new';
 import View from '../view';
 import Image from '../image';
 
-const GRADIENT_WIDTH = 76;
-const defaultImage = () => require('./assets/gradientOverlay.png');
-
-/**
- * @description: Scrollable container with animated gradient overlay for horizontal scroll
- * @extends: ScrollView / FlatList
- */
-
-class ScrollBar extends BaseComponent {
-  static displayName = 'ScrollBar';
 
-  static propTypes = {
-    ...ScrollView.propTypes,
-    ...FlatList.propTypes,
-    /**
+export interface ScrollBarProps extends FlatListProps<any> {
+  /**
      * Whether to use a FlatList. NOTE: you must pass 'data' and 'renderItem' props as well
      */
-    useList: PropTypes.bool,
+    useList?: boolean,
     /**
      * The element to use as a container, instead of a View
      */
-    containerView: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
+    containerView?: React.ComponentClass,
     /**
      * The props to pass the container
      */
-    containerProps: PropTypes.object,
+    containerProps?: object,
     /**
      * The component's height
      */
-    height: PropTypes.number,
+    height?: number,
     /**
      * The gradient's height, defaults to the component's height
      */
-    gradientHeight: PropTypes.number,
+    gradientHeight?: number,
     /**
      * The gradient's width
      */
-    gradientWidth: PropTypes.number,
+    gradientWidth?: number,
     /**
      * The gradient's margins for the edge
      */
-    gradientMargins: PropTypes.number,
+    gradientMargins?: number,
     /**
      * The gradient's tint color
      */
-    gradientColor: PropTypes.string,
+    gradientColor?: string,
     /**
      * The gradient's image, instead of the default image.
      * NOTE: pass an image for the right-hand side and it will be flipped to match the left-hand side
      */
-    gradientImage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    gradientImage?: ImageSourcePropType,
     /**
      * The index to currently focus on
      */
-    focusIndex: PropTypes.number
-  };
+    focusIndex?: number
+}
+
+type Props = ScrollBarProps & ForwardRefInjectedProps;
+
+type State = {
+  gradientOpacity: Animated.Value,
+  gradientOpacityLeft: Animated.Value
+};
+
+
+const GRADIENT_WIDTH = 76;
+const defaultImage = () => require('./assets/gradientOverlay.png');
+
+/**
+ * @description: Scrollable container with animated gradient overlay for horizontal scroll
+ * @extends: ScrollView / FlatList
+ */
+
+class ScrollBar extends Component<Props, State> {
+  static displayName = 'ScrollBar';
 
   static defaultProps = {
     gradientWidth: GRADIENT_WIDTH,
@@ -72,27 +87,31 @@ class ScrollBar extends BaseComponent {
     focusIndex: 0
   };
 
-  constructor(props) {
+  static Item: typeof Item;
+
+  constructor(props: Props) {
     super(props);
 
     this.state = {
       gradientOpacity: new Animated.Value(0),
       gradientOpacityLeft: new Animated.Value(0)
     };
-
-    this.scrollContentWidth = undefined;
-    this.itemsLayouts = {};
-    this.contentOffset = 0;
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  private scrollbar: any = undefined;
+  private itemsLayouts: any = {};
+  private contentOffset = 0;
+  private scrollContentWidth = 0;
+  private containerWidth = 0;
+
+  componentDidUpdate(prevProps: Props) {
     const {focusIndex} = this.props;
-    if (focusIndex && prevProps.focusIndex !== focusIndex) {
+    if (prevProps.focusIndex !== focusIndex) {
       this.focusIndex(focusIndex);
     }
   }
 
-  focusIndex = index => {
+  focusIndex = (index = 0) => {
     const focusedItemLayout = this.itemsLayouts[index];
     if (focusedItemLayout) {
       const {x, width} = focusedItemLayout;
@@ -105,7 +124,7 @@ class ScrollBar extends BaseComponent {
     }
   };
 
-  animateGradientOpacity = (offsetX, contentWidth, containerWidth) => {
+  animateGradientOpacity = (offsetX: number, contentWidth: number, containerWidth: number) => {
     const overflow = contentWidth - containerWidth;
     const newValue = offsetX > 0 && offsetX >= overflow - 1 ? 0 : 1;
     const newValueLeft = offsetX > 0 ? 1 : 0;
@@ -124,7 +143,7 @@ class ScrollBar extends BaseComponent {
     ]).start();
   };
 
-  onScroll = event => {
+  onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     const {layoutMeasurement, contentOffset, contentSize} = event.nativeEvent;
     this.contentOffset = contentOffset.x;
     const offsetX = contentOffset.x;
@@ -136,7 +155,7 @@ class ScrollBar extends BaseComponent {
     _.invoke(this.props, 'onScroll', event);
   };
 
-  onContentSizeChange = (contentWidth, contentHeight) => {
+  onContentSizeChange = (contentWidth: number, contentHeight: number) => {
     if (this.scrollContentWidth !== contentWidth) {
       this.scrollContentWidth = contentWidth;
 
@@ -149,34 +168,37 @@ class ScrollBar extends BaseComponent {
     }
   };
 
-  onLayout = ({nativeEvent}) => {
-    this.containerWidth = nativeEvent.layout.width;
+  onLayout = (event: LayoutChangeEvent) => {
+    this.containerWidth = event.nativeEvent.layout.width;
 
     // 1 - for race condition, in case onContentSizeChange() is called before
     // 0 - for containerWidth change, when onContentSizeChange() is called first
     this.setState({gradientOpacity: new Animated.Value(this.scrollContentWidth > this.containerWidth ? 1 : 0)});
   };
 
-  onItemLayout = ({layout, index}) => {
+  onItemLayout = ({layout, index}: any) => {
     this.itemsLayouts[index] = layout;
-    if (_.keys(this.itemsLayouts).length === this.props.children.length) {
-      this.focusIndex(this.props.focusIndex);
+
+    const {children, focusIndex} = this.props;
+    if (children && _.keys(this.itemsLayouts).length === _.keys(children).length) {
+      this.focusIndex(focusIndex);
     }
   };
 
   renderScrollable() {
     const {useList, forwardedRef, children} = this.props;
-    const Component = useList ? FlatList : ScrollView;
+    const Component: any = useList ? FlatList : ScrollView;
 
     return (
       <Component
         scrollEventThrottle={100}
-        {...this.getThemeProps()}
-        ref={r => {
+        {...this.props}
+        ref={(r: any) => {
           this.scrollbar = r;
           if (_.isFunction(forwardedRef)) {
             forwardedRef(r);
           } else if (_.isObject(forwardedRef)) {
+            //@ts-ignore
             forwardedRef.current = r;
           }
         }}
@@ -197,9 +219,9 @@ class ScrollBar extends BaseComponent {
     );
   }
 
-  renderGradient(left) {
+  renderGradient(left: boolean) {
     const {gradientOpacity, gradientOpacityLeft} = this.state;
-    const {gradientWidth, gradientHeight, gradientMargins, height, gradientColor, gradientImage} = this.getThemeProps();
+    const {gradientWidth, gradientHeight, gradientMargins, height, gradientColor, gradientImage} = this.props;
     const imageTransform = Constants.isRTL ? (left ? undefined : [{scaleX: -1}]) : left ? [{scaleX: -1}] : undefined;
     const heightToUse = gradientHeight || height || '100%';
     return (
@@ -229,23 +251,23 @@ class ScrollBar extends BaseComponent {
   }
 
   render() {
-    const {containerView, containerProps} = this.getThemeProps();
-    const Container = containerView || View;
+    const {containerView, containerProps} = this.props;
+    const Container: any = containerView || View;
 
     return (
       <Container row {...containerProps} onLayout={this.onLayout}>
         {this.renderScrollable()}
-        {this.renderGradient()}
+        {this.renderGradient(false)}
         {this.renderGradient(true)}
       </Container>
     );
   }
 }
 
-const Item = ({children, index, onLayout}) => {
+const Item = ({children, index, onLayout}: any) => {
   const onItemLayout = useCallback(({nativeEvent: {layout}}) => {
     onLayout({layout, index});
-  });
+  }, [children]);
 
   return (
     <View flexG onLayout={onItemLayout}>
@@ -256,4 +278,5 @@ const Item = ({children, index, onLayout}) => {
 
 Item.displayName = 'IGNORE';
 ScrollBar.Item = Item;
-export default forwardRef(ScrollBar);
+export default asBaseComponent<ScrollBarProps, typeof ScrollBar>(forwardRef(ScrollBar));
+
diff --git a/src/components/sharedTransition/SourceElement.js b/src/components/sharedTransition/SourceElement.js
index 5295e5ddb9..ca67763120 100644
--- a/src/components/sharedTransition/SourceElement.js
+++ b/src/components/sharedTransition/SourceElement.js
@@ -19,7 +19,7 @@ class SourceElement extends Component {
     const {setSharedData, setSource} = this.context;
     setSharedData(data);
 
-    this.element.measure((x, y, width, height, pageX, pageY) => {
+    this.element.measure((_x, _y, width, height, pageX, pageY) => {
       const sourceLayout = {x: pageX, y: pageY, width, height};
       setSource(sourceLayout, this.props.children);
     });
diff --git a/src/components/sharedTransition/TargetElement.js b/src/components/sharedTransition/TargetElement.js
index ce30b782ce..697fbe7052 100644
--- a/src/components/sharedTransition/TargetElement.js
+++ b/src/components/sharedTransition/TargetElement.js
@@ -11,7 +11,7 @@ class TargetElement extends Component {
 
     if (!this.targetLayout) {
       setTimeout(() => {
-        this.element.measure((x, y, width, height, pageX, pageY) => {
+        this.element.measure((_x, _y, width, height, pageX, pageY) => {
           this.targetLayout = {x: pageX, y: pageY, width, height};
           setTarget(this.targetLayout);
         });
diff --git a/src/components/slider/index.js b/src/components/slider/index.js
index 403b75036b..524da53c93 100644
--- a/src/components/slider/index.js
+++ b/src/components/slider/index.js
@@ -176,15 +176,15 @@ export default class Slider extends PureBaseComponent {
 
   /* Gesture Recognizer */
 
-  handleMoveShouldSetPanResponder = (e, gestureState) => {
+  handleMoveShouldSetPanResponder = () => {
     return true;
   };
-  handlePanResponderGrant = (e, gestureState) => {
+  handlePanResponderGrant = () => {
     this.updateThumbStyle(true);
     this._dx = 0;
     this.onSeekStart();
   };
-  handlePanResponderMove = (e, gestureState) => {
+  handlePanResponderMove = (_e, gestureState) => {
     if (this.props.disabled) {
       return;
     }
@@ -192,7 +192,7 @@ export default class Slider extends PureBaseComponent {
     this.update(dx - this._dx);
     this._dx = dx;
   };
-  handlePanResponderEnd = (e, gestureState) => {
+  handlePanResponderEnd = () => {
     this.updateThumbStyle(false);
     this.bounceToStep();
     this.onSeekEnd();
diff --git a/src/components/stackAggregator/index.js b/src/components/stackAggregator/index.js
index f0b780670d..208f7ab2dc 100644
--- a/src/components/stackAggregator/index.js
+++ b/src/components/stackAggregator/index.js
@@ -10,7 +10,6 @@ import TouchableOpacity from '../touchableOpacity';
 import Button from '../button';
 import Card from '../card';
 
-
 const PEEP = 8;
 const DURATION = 300;
 const MARGIN_BOTTOM = 24;
@@ -50,12 +49,12 @@ export default class StackAggregator extends PureBaseComponent {
      * A callback for item press
      */
     onItemPress: PropTypes.func
-  }
+  };
 
   static defaultProps = {
     collapsed: true,
     itemBorderRadius: 0
-  }
+  };
 
   constructor(props) {
     super(props);
@@ -73,7 +72,7 @@ export default class StackAggregator extends PureBaseComponent {
     this.animatedContentOpacity = new Animated.Value(this.state.collapsed ? 0 : 1);
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(_prevProps, prevState) {
     if (prevState.collapsed !== this.state.collapsed) {
       LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     }
@@ -84,7 +83,7 @@ export default class StackAggregator extends PureBaseComponent {
   }
 
   getAnimatedScales() {
-    return React.Children.map(this.props.children, (item, index) => {
+    return React.Children.map(this.props.children, (_item, index) => {
       return new Animated.Value(this.getItemScale(index));
     });
   }
@@ -95,7 +94,7 @@ export default class StackAggregator extends PureBaseComponent {
         return 0.95;
       }
       if (index === this.itemsCount - 1) {
-        return 0.90;
+        return 0.9;
       }
     }
     return 1;
@@ -104,7 +103,7 @@ export default class StackAggregator extends PureBaseComponent {
   animate = () => {
     this.animateValues();
     this.animateCards();
-  }
+  };
 
   animateValues() {
     const {collapsed} = this.state;
@@ -131,7 +130,7 @@ export default class StackAggregator extends PureBaseComponent {
     ]).start();
   }
 
-  animateCards() {    
+  animateCards() {
     for (let index = 0; index < this.itemsCount; index++) {
       const newScale = this.getItemScale(index);
 
@@ -146,20 +145,20 @@ export default class StackAggregator extends PureBaseComponent {
 
   close = () => {
     this.setState({collapsed: true}, () => this.animate());
-  }
+  };
 
   open = () => {
     this.setState({collapsed: false}, () => this.animate());
-  }
+  };
 
   getTop(index) {
     let start = 0;
-    
+
     if (index === this.itemsCount - 2) {
       start += PEEP;
     }
     if (index === this.itemsCount - 1) {
-      start += (PEEP * 2);
+      start += PEEP * 2;
     }
 
     return start;
@@ -168,10 +167,10 @@ export default class StackAggregator extends PureBaseComponent {
   getStyle(index) {
     const {collapsed} = this.state;
     const top = this.getTop(index);
-    
+
     if (collapsed) {
       return {
-        position: index !== 0 ? 'absolute' : undefined, 
+        position: index !== 0 ? 'absolute' : undefined,
         top
       };
     }
@@ -183,22 +182,22 @@ export default class StackAggregator extends PureBaseComponent {
 
   onLayout = event => {
     const height = event.nativeEvent.layout.height;
-    
+
     if (height) {
       this.setState({firstItemHeight: height});
     }
-  }
+  };
 
-  onItemPress = (index) => {
+  onItemPress = index => {
     _.invoke(this.props, 'onItemPress', index);
-  }
+  };
 
   renderItem = (item, index) => {
     const {contentContainerStyle, itemBorderRadius} = this.props;
     const {firstItemHeight, collapsed} = this.state;
 
     return (
-      <Animated.View 
+      <Animated.View
         key={index}
         onLayout={index === 0 ? this.onLayout : undefined}
         style={[
@@ -208,9 +207,7 @@ export default class StackAggregator extends PureBaseComponent {
             borderRadius: Constants.isIOS ? itemBorderRadius : undefined,
             alignSelf: 'center',
             zIndex: this.itemsCount - index,
-            transform: [
-              {scaleX: this.animatedScaleArray[index]}
-            ],
+            transform: [{scaleX: this.animatedScaleArray[index]}],
             width: Constants.screenWidth - 40,
             height: collapsed ? firstItemHeight : undefined
           }
@@ -229,7 +226,7 @@ export default class StackAggregator extends PureBaseComponent {
         </Card>
       </Animated.View>
     );
-  }
+  };
 
   render() {
     const {children, containerStyle, buttonProps} = this.props;
@@ -238,23 +235,21 @@ export default class StackAggregator extends PureBaseComponent {
     return (
       <View style={containerStyle}>
         <View style={{marginBottom: PEEP * 3}}>
-          <Animated.View 
+          <Animated.View
             style={{
               position: 'absolute',
               right: 0,
               opacity: this.animatedOpacity,
-              transform: [
-                {scale: this.animatedScale}
-              ]
+              transform: [{scale: this.animatedScale}]
             }}
           >
-            <Button 
-              label={'Show less'} 
+            <Button
+              label={'Show less'}
               iconSource={icon}
               link
-              size={'small'} 
+              size={'small'}
               {...buttonProps}
-              marginH-24 
+              marginH-24
               marginB-20
               onPress={this.close}
             />
@@ -264,19 +259,19 @@ export default class StackAggregator extends PureBaseComponent {
             return this.renderItem(item, index);
           })}
 
-          {collapsed && 
-            <TouchableOpacity 
-              onPress={this.open} 
-              activeOpacity={1} 
+          {collapsed && (
+            <TouchableOpacity
+              onPress={this.open}
+              activeOpacity={1}
               style={[
-                this.styles.touchable, 
+                this.styles.touchable,
                 {
-                  height: firstItemHeight ? firstItemHeight + (PEEP * 2) : undefined,
+                  height: firstItemHeight ? firstItemHeight + PEEP * 2 : undefined,
                   zIndex: this.itemsCount
                 }
               ]}
             />
-          }
+          )}
         </View>
       </View>
     );
@@ -286,7 +281,7 @@ export default class StackAggregator extends PureBaseComponent {
 function createStyles() {
   return StyleSheet.create({
     touchable: {
-      position: 'absolute', 
+      position: 'absolute',
       width: '100%'
     },
     containerShadow: {
@@ -297,7 +292,7 @@ function createStyles() {
       shadowOffset: {height: 5, width: 0}
     },
     card: {
-      overflow: 'hidden', 
+      overflow: 'hidden',
       flexShrink: 1
     }
   });
diff --git a/src/components/stateScreen/index.js b/src/components/stateScreen/index.js
index 6949022750..babc8a5fc4 100644
--- a/src/components/stateScreen/index.js
+++ b/src/components/stateScreen/index.js
@@ -23,7 +23,7 @@ export default class StateScreen extends BaseComponent {
      * The image source that's showing at the top. use an image that was required locally
      */
     imageSource: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
-    source: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+    source: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), // TODO: remove after deprecation
     /**
      * To to show as the title
      */
@@ -54,13 +54,13 @@ export default class StateScreen extends BaseComponent {
 
     }
     if (props.imageSource) {
-      LogService.deprecationWarn({component: 'StateScreen', oldProp: 'imageSource', newProp: 'source'});
+      LogService.deprecationWarn({component: 'StateScreen', oldProp: 'source', newProp: 'imageSource'});
     }
   }
 
   generateStyles() {
     const {source, imageSource} = this.props;
-    const finalSource = source || imageSource;
+    const finalSource = imageSource || source;
 
     const isRemoteImage = _.isObject(finalSource) && Boolean(finalSource.uri);
     this.styles = createStyles(isRemoteImage);
@@ -69,7 +69,7 @@ export default class StateScreen extends BaseComponent {
   render() {
     // TODO: remove testId and imageSource after deprecation
     const {title, subtitle, source, imageSource, ctaLabel, onCtaPress, testId, testID} = this.props;
-    const finalSource = source || imageSource;
+    const finalSource = imageSource || source;
 
     return (
       <View style={this.styles.container} testID={testID || testId}>
diff --git a/src/components/switch/index.tsx b/src/components/switch/index.tsx
index 37f640d412..3d1400b2e6 100644
--- a/src/components/switch/index.tsx
+++ b/src/components/switch/index.tsx
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {StyleSheet, Animated, Easing, StyleProp, ViewStyle} from 'react-native';
+import {StyleSheet, Animated, Easing, StyleProp, ViewStyle, ColorValue} from 'react-native';
 import {Constants} from '../../helpers';
 import {Colors, BorderRadiuses} from '../../style';
 import {asBaseComponent} from '../../commons/new';
@@ -35,19 +35,19 @@ export type SwitchProps = {
   /**
    * The Switch background color when it's turned on
    */
-  onColor?: string;
+  onColor?: ColorValue;
   /**
    * The Switch background color when it's turned off
    */
-  offColor?: string;
+  offColor?: ColorValue;
   /**
    * The Switch background color when it's disabled
    */
-  disabledColor?: string;
+  disabledColor?: ColorValue;
   /**
    * The Switch's thumb color
    */
-  thumbColor?: string;
+  thumbColor?: ColorValue;
   /**
    * The Switch's thumb size (width & height)
    */
@@ -55,7 +55,7 @@ export type SwitchProps = {
   /**
    * The Switch's thumb style
    */
-  thumbStyle?: object | number | []; 
+  thumbStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
   testID?: string; 
 }
@@ -176,7 +176,7 @@ function createStyles({
   disabledColor = Colors.dark70,
   thumbColor = Colors.white,
   thumbSize = DEFAULT_THUMB_SIZE
-}) {
+}: SwitchProps) {
   return StyleSheet.create({
     switch: {
       width,
diff --git a/src/components/tabBar/TabBarItem.tsx b/src/components/tabBar/TabBarItem.tsx
index bb143af8e6..4901ae16ec 100644
--- a/src/components/tabBar/TabBarItem.tsx
+++ b/src/components/tabBar/TabBarItem.tsx
@@ -1,138 +1,150 @@
 import _ from 'lodash';
 import React, {PureComponent} from 'react';
-import {StyleSheet, Animated, Easing, LayoutChangeEvent, ViewStyle, TextStyle} from 'react-native';
-import {Colors, Typography} from '../../style';
-import {asBaseComponent, BaseComponentInjectedProps} from '../../commons/new';
-import Image from '../image';
-import TouchableOpacity from '../touchableOpacity';
+import {StyleSheet, Animated, Easing, LayoutChangeEvent, LayoutRectangle, StyleProp, ViewStyle, TextStyle} from 'react-native';
+import {LogService} from '../../services';
+import {Constants} from '../../helpers';
+import {Colors, Typography, Spacings} from '../../style';
+import {asBaseComponent} from '../../commons/new';
 import View from '../view';
+import TouchableOpacity from '../touchableOpacity';
 import Text from '../text';
-// @ts-ignore
+import Image from '../image';
 import Badge, {BadgeProps} from '../badge';
 
 
-export type TabBarItemProps = BaseComponentInjectedProps & {
+const INDICATOR_HEIGHT = 2;
+const INDICATOR_BG_COLOR = Colors.primary;
+const HORIZONTAL_PADDING = Constants.isTablet ? Spacings.s7 : Spacings.s5;
+
+export interface TabBarItemProps {
   /**
    * icon of the tab
    */
-  icon?: number,
+  icon?: number;
   /**
    * icon tint color
    */
-  iconColor?: string,
+  iconColor?: string;
   /**
    * icon selected tint color
    */
-  iconSelectedColor?: string,
+  iconSelectedColor?: string;
   /**
    * label of the tab
    */
-  label?: string,
+  label?: string;
   /**
    * custom label style
    */
-  labelStyle?: TextStyle,
+  labelStyle?: StyleProp<TextStyle>;
   /**
    * Badge component props to display next the item label
    */
-  badge?: BadgeProps,
+  badge?: BadgeProps; //TODO: remove after deprecation
+  badgeProps?: BadgeProps;
   /**
    * maximum number of lines the label can break
    */
-  maxLines?: number,
+  maxLines?: number;
   /**
    * custom selected tab label style
    */
-  selectedLabelStyle: TextStyle,
+  selectedLabelStyle?: StyleProp<TextStyle>;
   /**
    * whether the tab is selected or not
    */
-  selected?: boolean,
+  selected?: boolean;
   /**
    * whether the tab will have a divider on its right
    */
-  showDivider?: boolean,
+  showDivider?: boolean;
   /**
    * A fixed width for the item
    */
-  width?: number,
+  width?: number;
+  /**
+   * tabBar's background color
+   */
+  backgroundColor?: string;
   /**
    * ignore of the tab
    */
-  ignore?: boolean,
+  ignore?: boolean;
   /**
    * callback for when pressing a tab
    */
-  onPress?: (props: any) => void,
+  onPress?: () => void;
   /**
    * whether to change the text to uppercase
    */
-  uppercase?: boolean,
+  uppercase?: boolean;
   /**
    * Apply background color on press for TouchableOpacity
    */
-  activeBackgroundColor?: string,
-  indicatorStyle?: ViewStyle, // for inner use
-  style?: ViewStyle,
-  testID?: string
-};
-
-export type State = {
-  indicatorOpacity?: Animated.Value
+  activeBackgroundColor?: string;
+  accessibilityLabel?: string;
+  indicatorStyle?: StyleProp<ViewStyle>; // for inner use
+  style?: ViewStyle;
+  testID?: string;
 }
 
-
-const INDICATOR_BG_COLOR = Colors.blue30;
-const INDICATOR_HEIGHT = 2;
-const INDICATOR_SPACINGS = 16;
+interface State {
+  indicatorOpacity: Animated.Value;
+  selected?: boolean;
+}
 
 /**
  * @description: TabBar.Item, inner component of TabBar for configuring the tabs
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabBarScreen.js
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabBarScreen.tsx
  * @extends: TouchableOpacity
  * @extendsLink: https://facebook.github.io/react-native/docs/touchableopacity
  */
 class TabBarItem extends PureComponent<TabBarItemProps, State> {
   static displayName = 'TabBar.Item';
 
-  static defaultProps = {
-    test: true, // this will enable by the new tab bar design
+  static defaultProps: Partial<TabBarItemProps> = {
     maxLines: 1
   };
 
+  layout?: LayoutRectangle;
+
   constructor(props: TabBarItemProps) {
     super(props);
 
     this.state = {
-      indicatorOpacity: props.selected ? new Animated.Value(1) : new Animated.Value(0)
+      indicatorOpacity: props.selected ? new Animated.Value(1) : new Animated.Value(0),
+      selected: props.selected
     };
-  }
 
-  styles = createStyles();
-  layout: any = undefined;
+    if (!_.isEmpty(props.badge)) {
+      LogService.deprecationWarn({component: 'TabBarItem', oldProp: 'badge', newProp: 'badgeProps'});
+    }
+  }
 
-  componentDidUpdate(prevProps: TabBarItemProps)  {
+  componentDidUpdate(prevProps: TabBarItemProps) {
     if (prevProps.selected !== this.props.selected) {
       this.animate(this.props.selected);
     }
   }
 
   animate(newValue?: boolean) {
-    if (this.state.indicatorOpacity) {
-      Animated.timing(this.state.indicatorOpacity, {
-        toValue: newValue ? 1 : 0,
-        easing: Easing.ease,
-        duration: 150,
-        useNativeDriver: true
-      }).start();
-    }
+    Animated.timing(this.state.indicatorOpacity, {
+      toValue: newValue ? 1 : 0,
+      easing: Easing.ease,
+      duration: 150,
+      useNativeDriver: true
+    }).start(this.onAnimateCompleted);
   }
 
-  getFlattenStyle(style: object) {
+  onAnimateCompleted = () => {
+    this.setState({selected: this.props.selected});
+  };
+
+  getFlattenStyle(style: StyleProp<TextStyle>) {
     return StyleSheet.flatten(style);
   }
 
-  getStylePropValue(flattenStyle: object, propName: string) {
+  getStylePropValue(flattenStyle: StyleProp<TextStyle>, propName: string) {
     let prop;
     if (flattenStyle) {
       const propObject: any = _.pick(flattenStyle, [propName]);
@@ -141,7 +153,7 @@ class TabBarItem extends PureComponent<TabBarItemProps, State> {
     return prop;
   }
 
-  getColorFromStyle(style: any) {
+  getColorFromStyle(style: StyleProp<TextStyle>) {
     const flattenStyle = this.getFlattenStyle(style);
     return this.getStylePropValue(flattenStyle, 'color');
   }
@@ -155,7 +167,7 @@ class TabBarItem extends PureComponent<TabBarItemProps, State> {
   };
 
   render() {
-    const {indicatorOpacity} = this.state;
+    const {indicatorOpacity, selected} = this.state;
     const {
       children,
       indicatorStyle,
@@ -164,39 +176,46 @@ class TabBarItem extends PureComponent<TabBarItemProps, State> {
       iconSelectedColor,
       label,
       labelStyle,
+      badgeProps,
       badge,
       uppercase,
       maxLines,
-      selected,
       selectedLabelStyle,
       showDivider,
       width,
       onPress,
       activeBackgroundColor,
-      style,
-      testID
+      backgroundColor,
+      testID,
+      accessibilityLabel,
+      style
     } = this.props;
 
-    const iconTint = iconColor || this.getColorFromStyle(labelStyle) || this.getColorFromStyle(this.styles.label);
+    const iconTint = iconColor || this.getColorFromStyle(labelStyle) || this.getColorFromStyle(styles.label);
     const iconSelectedTint =
       iconSelectedColor ||
       this.getColorFromStyle(selectedLabelStyle) ||
-      this.getColorFromStyle(this.styles.selectedLabel);
+      this.getColorFromStyle(styles.selectedLabel);
+    const badgeFinalProps = badgeProps || badge;
+    const badgeSize = _.get(badgeFinalProps, 'size', 'small');
 
     return (
       <TouchableOpacity
         activeOpacity={1}
         onPress={onPress}
-        style={[style, width ? {width} : {flex: 1}]}
+        style={[width ? {width} : {flex: 1}, style]}
         testID={testID}
+        backgroundColor={backgroundColor}
         activeBackgroundColor={activeBackgroundColor}
         onLayout={this.onLayout}
-        accessibilityStates={selected ? ['selected'] : []}
+        accessibilityState={selected ? {selected: true} : undefined}
+        accessibilityRole={'tab'}
+        accessibilityLabel={accessibilityLabel}
       >
-        <View row flex center style={[showDivider && this.styles.divider, {paddingHorizontal: 16}]}>
+        <View row flex center style={[showDivider && styles.divider, styles.contentContainer]}>
           {icon && (
             <Image
-              style={!_.isEmpty(label) && {marginRight: 6}}
+              style={!_.isEmpty(label) && styles.icon}
               source={icon}
               tintColor={selected ? iconSelectedTint : iconTint}
             />
@@ -205,54 +224,57 @@ class TabBarItem extends PureComponent<TabBarItemProps, State> {
             <Text
               numberOfLines={maxLines}
               uppercase={uppercase}
-              style={[labelStyle || this.styles.label, selected && (selectedLabelStyle || this.styles.selectedLabel)]}
-              accessibilityLabel={`${label} tab`}
+              style={[labelStyle || styles.label, selected && (selectedLabelStyle || styles.selectedLabel)]}
             >
               {label}
             </Text>
           )}
           {children}
-          {badge && (
+          {!_.isNil(badgeFinalProps) && (
             <Badge
               backgroundColor={Colors.red30}
-              // @ts-ignore
-              size={'small'}
-              {...badge}
-              containerStyle={[this.styles.badge, badge.containerStyle]}
+              {...badgeFinalProps}
+              size={badgeSize}
+              containerStyle={[styles.badge, badgeFinalProps.containerStyle]}
             />
           )}
         </View>
-        <Animated.View style={[{opacity: indicatorOpacity}, this.styles.indicator, indicatorStyle]}/>
+        <Animated.View style={[{opacity: indicatorOpacity}, styles.indicator, indicatorStyle]}/>
       </TouchableOpacity>
     );
   }
 }
 
-function createStyles() {
-  return StyleSheet.create({
-    label: {
-      color: Colors.dark30,
-      ...Typography.text80
-    },
-    selectedLabel: {
-      color: Colors.blue30,
-      ...Typography.text80,
-      fontWeight: 'bold'
-    },
-    divider: {
-      borderRightWidth: 1,
-      borderRightColor: Colors.dark70,
-      marginVertical: 14 // NOTE: will not cut long text at the top and bottom in iOS if TabBar not high enough
-    },
-    indicator: {
-      backgroundColor: INDICATOR_BG_COLOR,
-      height: INDICATOR_HEIGHT,
-      marginHorizontal: INDICATOR_SPACINGS
-    },
-    badge: {
-      marginLeft: 4
-    }
-  });
-}
+export default asBaseComponent<TabBarItemProps>(TabBarItem);
 
-export default asBaseComponent<TabBarItemProps, State>(TabBarItem);
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingHorizontal: HORIZONTAL_PADDING
+  },
+  label: {
+    color: Colors.primary,
+    ...Typography.text80
+  },
+  selectedLabel: {
+    color: Colors.primary,
+    ...Typography.text80,
+    fontWeight: 'bold'
+  },
+  divider: {
+    borderRightWidth: 1,
+    borderRightColor: Colors.dark70,
+    marginVertical: 14 // NOTE: will not cut long text at the top and bottom in iOS if TabBar not high enough
+  },
+  indicator: {
+    backgroundColor: INDICATOR_BG_COLOR,
+    height: INDICATOR_HEIGHT,
+    marginHorizontal: HORIZONTAL_PADDING
+  },
+  badge: {
+    marginLeft: Spacings.s1
+  },
+  icon: {
+    marginRight: 6
+  }
+});
diff --git a/src/components/tabBar/index.tsx b/src/components/tabBar/index.tsx
index 7e19fd6b02..3775454bc1 100644
--- a/src/components/tabBar/index.tsx
+++ b/src/components/tabBar/index.tsx
@@ -1,136 +1,148 @@
 import _ from 'lodash';
-import React, {Component} from 'react';
-import {
-  Platform,
-  StyleSheet,
-  Animated,
-  ScrollView,
-  NativeSyntheticEvent,
-  NativeScrollEvent,
-  ViewStyle
-} from 'react-native';
+import React, {Component, ElementRef, RefObject} from 'react';
+import {Platform, StyleSheet, ScrollView, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
 import {Constants} from '../../helpers';
 import {Colors} from '../../style';
-import {asBaseComponent, BaseComponentInjectedProps} from '../../commons/new';
-import View, {ViewProps} from '../view';
-import Image from '../image';
+import {asBaseComponent} from '../../commons/new';
+import View from '../view';
+import ScrollBar, {ScrollBarProps} from '../scrollBar';
 import TabBarItem, {TabBarItemProps} from './TabBarItem';
 
 
-export type TabBarProps = BaseComponentInjectedProps & ViewProps & {
-    /**
-     * Show Tab Bar bottom shadow
-     */
-    enableShadow?: boolean,
-    /**
-     * The minimum number of tabs to render
-     */
-    minTabsForScroll?: number,
-    /**
-     * current selected tab index
-     */
-    selectedIndex?: number,
-    /**
-     * callback for when index has change (will not be called on ignored items)
-     */
-    onChangeIndex?: (props: any) => void,
-    /**
-     * callback for when tab selected
-     */
-    onTabSelected?: (props: any) => void,
-    /**
-     * custom style for the selected indicator
-     */
-    indicatorStyle?: ViewStyle,
-    /**
-     * The background color
-     */
-    backgroundColor: string,
-    /**
-     * Tab Bar height
-     */
-    height?: number,
-    children: React.ReactNode,
-    style?: ViewStyle,
-    testID?: string
-}
-
-export type State = {
-  gradientOpacity: Animated.Value,
-  scrollEnabled?: boolean,
-  currentIndex?: number
-};
-
-
 const MIN_TABS_FOR_SCROLL = 1;
 const DEFAULT_BACKGROUND_COLOR = Colors.white;
 const DEFAULT_HEIGHT = 48;
-const GRADIENT_WIDTH = 74;
-const INDICATOR_HEIGHT = 2;
-const gradientImage = () => require('./assets/gradient.png');
+
+type TabBarProps = ScrollBarProps /* & TabBarItemProps */ & {
+  /**
+   * Show Tab Bar bottom shadow
+   */
+  enableShadow?: boolean;
+  /**
+   * The minimum number of tabs to render in scroll mode
+   */
+  minTabsForScroll?: number;
+  /**
+   * current selected tab index
+   */
+  selectedIndex?: number;
+  /**
+   * callback for when index has change (will not be called on ignored items)
+   */
+  onChangeIndex?: (index: number) => void;
+  /**
+   * callback for when tab selected
+   */
+  onTabSelected?: (index: number) => void;
+  /**
+   * custom style for the selected indicator
+   */
+  indicatorStyle?: StyleProp<ViewStyle>;
+  /**
+   * Tab Bar height
+   */
+  height?: number;
+  /**
+   * Pass when container width is different than the screen width
+   */
+  containerWidth?: number;
+  /**
+   * The background color
+   */
+  backgroundColor?: string;
+  /**
+   * set darkTheme style
+   */
+  darkTheme?: boolean;
+  children?: React.ReactNode;
+  style?: ViewStyle;
+  testID?: string
+}
+
+interface State {
+  scrollEnabled: boolean;
+  currentIndex: number;
+}
 
 /**
  * @description: TabBar Component
  * @modifiers: alignment, flex, padding, margin, background, typography, color (list of supported modifiers)
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabBarScreen.js
- * @extends: ScrollView
- * @extendsLink: https://facebook.github.io/react-native/docs/scrollview
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabBarScreen.tsx
+ * @extends: ScrollBar
+ * @extendsLink:https://github.com/wix/react-native-ui-lib/blob/master/src/components/scrollBar/index.js
  * @notes: This is screen width component.
  */
 class TabBar extends Component<TabBarProps, State> {
   static displayName = 'TabBar';
 
-  static defaultProps = {
-    selectedIndex: 0,
-    backgroundColor: DEFAULT_BACKGROUND_COLOR
+  static defaultProps: Partial<TabBarProps> = {
+    selectedIndex: 0
   };
 
-  static Item: typeof TabBarItem;
+  static Item = TabBarItem;
+
+  scrollContentWidth?: number;
+  contentOffset: {
+    x: number;
+    y: number;
+  }
+  scrollBar: RefObject<ScrollView>;
+  itemsRefs: ElementRef<typeof TabBarItem>[];
 
   constructor(props: TabBarProps) {
     super(props);
 
     this.state = {
-      gradientOpacity: new Animated.Value(0),
       scrollEnabled: false,
-      currentIndex: props.selectedIndex
+      currentIndex: props.selectedIndex || 0
     };
-  }
 
-  styles = createStyles(this.props);
-  scrollContainerWidth: number = Constants.screenWidth;
-  scrollContentWidth = 0;
-  contentOffset: any = {x: 0, y: 0};
-  itemsRefs: any[] = [];
-  scrollView?: any = undefined;
+    this.contentOffset = {x: 0, y: 0};
+    this.scrollBar = React.createRef();
+    this.itemsRefs = [];
+  }
 
   componentDidUpdate(prevProps: TabBarProps, prevState: State) {
+    const prevChildrenCount = React.Children.count(prevProps.children);
+    if (this.childrenCount !== prevChildrenCount) {
+      this.updateIndicator(0);
+    }
     // TODO: since we're implementing an uncontrolled component here, we should verify the selectedIndex has changed
     // between this.props and nextProps (basically the meaning of selectedIndex should be initialIndex)
-    const {selectedIndex} = this.props;
     const isIndexManuallyChanged =
-      selectedIndex !== prevState.currentIndex && prevProps.selectedIndex !== selectedIndex;
-    if (isIndexManuallyChanged && selectedIndex !== undefined) {
-      this.updateIndicator(selectedIndex);
-    } else {
-      const prevChildrenCount = React.Children.count(prevProps.children);
-      if (this.childrenCount < prevChildrenCount) {
-        this.updateIndicator(0);
-      }
+      this.props.selectedIndex !== prevState.currentIndex && prevProps.selectedIndex !== this.props.selectedIndex;
+    if (isIndexManuallyChanged) {
+      this.updateIndicator(this.props.selectedIndex);
     }
   }
 
+  // generateStyles() {
+  //   this.styles = createStyles(this.props);
+  // }
+
   get childrenCount() {
     return React.Children.count(this.props.children);
   }
 
+  get scrollContainerWidth() {
+    return this.props.containerWidth || Constants.screenWidth;
+  }
+
   isIgnored(index: number) {
     const child = React.Children.toArray(this.props.children)[index];
     return _.get(child, 'props.ignore');
   }
 
-  updateIndicator(index: number) {
-    if (!this.isIgnored(index)) {
+  hasOverflow() {
+    return this.scrollContentWidth && this.scrollContentWidth > this.scrollContainerWidth;
+  }
+
+  shouldBeMarked = (index: number) => {
+    return this.state.currentIndex === index && !this.isIgnored(index) && this.childrenCount > 1;
+  };
+
+  updateIndicator(index?: number) {
+    if (index !== undefined && !this.isIgnored(index)) {
       this.setState({currentIndex: index}, () => {
         this.scrollToSelected();
       });
@@ -138,16 +150,14 @@ class TabBar extends Component<TabBarProps, State> {
   }
 
   scrollToSelected(animated = true) {
-    if (this.itemsRefs && this.state.currentIndex) {
-      const childRef = this.itemsRefs[this.state.currentIndex];
-      const childLayout = childRef.getLayout();
-
-      if (childLayout && this.hasOverflow()) {
-        if (childLayout.x + childLayout.width - this.contentOffset.x > this.scrollContainerWidth) {
-          this.scrollView.scrollTo({x: childLayout.x - this.scrollContainerWidth + childLayout.width, y: 0, animated});
-        } else if (childLayout.x - this.contentOffset.x < 0) {
-          this.scrollView.scrollTo({x: childLayout.x, y: 0, animated});
-        }
+    const childRef: any = this.itemsRefs[this.state.currentIndex];
+    const childLayout = childRef.getLayout();
+
+    if (childLayout && this.hasOverflow()) {
+      if (childLayout.x + childLayout.width - this.contentOffset.x > this.scrollContainerWidth) {
+        this.scrollBar?.current?.scrollTo?.({x: childLayout.x - this.scrollContainerWidth + childLayout.width, y: 0, animated});
+      } else if (childLayout.x - this.contentOffset.x < 0) {
+        this.scrollBar?.current?.scrollTo?.({x: childLayout.x, y: 0, animated});
       }
     }
   }
@@ -172,143 +182,103 @@ class TabBar extends Component<TabBarProps, State> {
     }, 0);
   };
 
-  getStylePropValue(flattenStyle: object, propName: string) {
-    let prop;
-    if (flattenStyle) {
-      const propObject: any = _.pick(flattenStyle, [propName]);
-      prop = propObject[propName];
-    }
-    return prop;
-  }
-
-  animateGradientOpacity = (x: number, contentWidth: number, containerWidth: number) => {
-    const overflow = contentWidth - containerWidth;
-    const newValue = x > 0 && x >= overflow - 1 ? 0 : 1;
-
-    Animated.spring(this.state.gradientOpacity, {
-      toValue: newValue,
-      speed: 20,
-      useNativeDriver: true
-    }).start();
-  };
-
   onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const {layoutMeasurement, contentOffset, contentSize} = event.nativeEvent;
+    const {contentOffset} = event.nativeEvent;
     this.contentOffset = contentOffset;
-    const x = contentOffset.x;
-    const contentWidth = contentSize.width;
-    const containerWidth = layoutMeasurement.width;
-
-    this.animateGradientOpacity(x, contentWidth, containerWidth);
   };
 
   onContentSizeChange = (width: number) => {
     if (this.scrollContentWidth !== width) {
+      this.scrollContentWidth = width;
       const {minTabsForScroll} = this.props;
       const minChildrenCount = minTabsForScroll || MIN_TABS_FOR_SCROLL;
-
-      this.scrollContentWidth = width;
-
       if (this.hasOverflow() && this.childrenCount > minChildrenCount) {
-        this.setState({gradientOpacity: new Animated.Value(1), scrollEnabled: true});
+        this.setState({scrollEnabled: true});
       }
     }
   };
 
-  hasOverflow() {
-    if (this.scrollContentWidth) {
-      if (this.scrollContentWidth > this.scrollContainerWidth) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  renderGradient(height: number, tintColor: string) {
-    const width = GRADIENT_WIDTH;
-
-    if (this.hasOverflow()) {
-      return (
-        <Animated.View
-          pointerEvents="none"
-          style={{
-            width,
-            height: height - INDICATOR_HEIGHT,
-            position: 'absolute',
-            right: 0,
-            opacity: this.state.gradientOpacity
-          }}
-        >
-          <Image
-            source={gradientImage()}
-            style={{width, height: height - INDICATOR_HEIGHT, tintColor}}
-            resizeMode={'stretch'}
-            supportRTL
-          />
-        </Animated.View>
-      );
-    }
-  }
-
   renderTabBar() {
-    const {height, backgroundColor} = this.props;
+    const {height, backgroundColor = DEFAULT_BACKGROUND_COLOR, containerView, containerProps, gradientMargins} = this.props;
     const {scrollEnabled} = this.state;
     const containerHeight = height || DEFAULT_HEIGHT;
 
     return (
-      <View row>
-        <ScrollView
-          ref={r => (this.scrollView = r)}
-          style={{height: containerHeight}}
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          scrollEnabled={scrollEnabled}
-          scrollEventThrottle={16}
-          onScroll={this.onScroll}
-          onContentSizeChange={this.onContentSizeChange}
-          contentContainerStyle={{minWidth: '100%'}}
+      <ScrollBar
+        // @ts-ignore
+        ref={this.scrollBar}
+        contentContainerStyle={styles.scrollBarContainer}
+        scrollEnabled={scrollEnabled}
+        scrollEventThrottle={16}
+        onScroll={this.onScroll}
+        onContentSizeChange={this.onContentSizeChange}
+        height={containerHeight}
+        gradientColor={backgroundColor}
+        containerView={containerView}
+        containerProps={containerProps}
+        gradientMargins={gradientMargins}
+      >
+        <View
+          row
+          style={[
+            styles.tabBar,
+            {
+              height: containerHeight,
+              backgroundColor
+            }
+          ]}
         >
-          <View row style={this.styles.tabBar}>
-            {this.renderChildren()}
-          </View>
-        </ScrollView>
-        {this.renderGradient(containerHeight, backgroundColor)}
-      </View>
+          {this.renderChildren()}
+        </View>
+      </ScrollBar>
     );
   }
 
-  shouldBeMarked = (index: number) => {
-    return this.state.currentIndex === index && !this.isIgnored(index) && this.childrenCount > 1;
-  };
-
   renderChildren() {
     this.itemsRefs = [];
-    const {indicatorStyle} = this.props;
+    const {indicatorStyle, darkTheme} = this.props;
 
     const children = React.Children.map(this.props.children, (child, index) => {
-      if (React.isValidElement(child)) {
-        return React.cloneElement(child, {
-          indicatorStyle,
-          selected: this.shouldBeMarked(index),
-          onPress: () => {
-            this.onItemPress(index, child.props);
-          },
-          ref: (r: any) => {
-            this.itemsRefs[index] = r;
-          }
-        });
-      }
+      // @ts-ignore
+      const accessLabel = child?.props.accessibilityLabel || child.props.label || '';
+
+      //TODO: review it again, all types here should be correct. As from React.Children.map it gets definitely child: React.ReactNode, and React.cloneElement does not accept it.
+      // But seems it's work in a real life, so maybe it is just trouble with types compatibility
+      //@ts-ignore
+      return React.cloneElement(child, {
+        indicatorStyle,
+        darkTheme,
+        selected: this.shouldBeMarked(index),
+        onPress: () => {
+          // @ts-ignore
+          this.onItemPress(index, child.props);
+        },
+        ref: (r: any) => {
+          this.itemsRefs[index] = r;
+        },
+        accessibilityLabel: `${accessLabel} ${index + 1} out of ${this.childrenCount}`
+      });
     });
     return children;
   }
 
   render() {
-    const {enableShadow, style} = this.props;
+    const {enableShadow, style, backgroundColor = DEFAULT_BACKGROUND_COLOR} = this.props;
 
     return (
+      // @ts-ignore
       <View
         useSafeArea
-        style={[this.styles.container, enableShadow && this.styles.containerShadow, style, {height: undefined}]}
+        style={[
+          styles.container,
+          enableShadow && styles.containerShadow,
+          style,
+          {
+            height: undefined,
+            width: this.scrollContainerWidth,
+            backgroundColor
+          }
+        ]}
       >
         {this.renderTabBar()}
       </View>
@@ -316,36 +286,34 @@ class TabBar extends Component<TabBarProps, State> {
   }
 }
 
-function createStyles({backgroundColor = DEFAULT_BACKGROUND_COLOR}) {
-  return StyleSheet.create({
-    container: {
-      zIndex: 100
-    },
-    containerShadow: {
-      ...Platform.select({
-        ios: {
-          shadowColor: Colors.dark10,
-          shadowOpacity: 0.05,
-          shadowRadius: 2,
-          shadowOffset: {height: 6, width: 0}
-        },
-        android: {
-          elevation: 5,
-          backgroundColor: Colors.white
-        }
-      })
-    },
-    tabBar: {
-      flex: 1,
-      height: DEFAULT_HEIGHT,
-      backgroundColor
-    },
-    shadowImage: {
-      width: '100%'
-    }
-  });
-}
-
-TabBar.Item = TabBarItem;
-
-export default asBaseComponent<TabBarProps, {Item: typeof TabBarItem}>(TabBar);
+export default asBaseComponent<TabBarProps, typeof TabBar>(TabBar);
+
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 100
+  },
+  containerShadow: {
+    ...Platform.select({
+      ios: {
+        shadowColor: Colors.dark10,
+        shadowOpacity: 0.05,
+        shadowRadius: 2,
+        shadowOffset: {height: 6, width: 0}
+      },
+      android: {
+        elevation: 5,
+        backgroundColor: Colors.white
+      }
+    })
+  },
+  tabBar: {
+    flex: 1
+  },
+  shadowImage: {
+    width: '100%'
+  },
+  scrollBarContainer: {
+    minWidth: '100%'
+  }
+});
diff --git a/src/components/tabController/FadedScrollView.tsx b/src/components/tabController/FadedScrollView.tsx
new file mode 100644
index 0000000000..df0c2c16fb
--- /dev/null
+++ b/src/components/tabController/FadedScrollView.tsx
@@ -0,0 +1,60 @@
+import React, {useCallback} from 'react';
+import {ViewProps, ScrollView, ScrollViewProps, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
+import Fader from '../fader';
+import withScrollEnabler, {WithScrollEnablerProps} from '../../commons/withScrollEnabler';
+import withScrollReached, {WithScrollReachedProps} from '../../commons/withScrollReached';
+import forwardRef, {ForwardRefInjectedProps} from '../../commons/forwardRef';
+
+export type FadedScrollViewProps = ViewProps &
+  ScrollViewProps & {
+    children?: React.ReactNode | React.ReactNode[];
+  };
+
+type ScrollReachedProps = FadedScrollViewProps & WithScrollReachedProps;
+type ScrollEnabledProps = ScrollReachedProps & WithScrollEnablerProps;
+type Props = ScrollEnabledProps & ForwardRefInjectedProps;
+
+const FADER_SIZE = 76;
+
+const FadedScrollView = (props: Props) => {
+  const {scrollEnablerProps, scrollReachedProps, children, onScroll: propsOnScroll, ...other} = props;
+  const showStart = scrollEnablerProps.scrollEnabled && !scrollReachedProps.isScrollAtStart;
+  const showEnd = scrollEnablerProps.scrollEnabled && !scrollReachedProps.isScrollAtEnd;
+
+  const onScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    scrollReachedProps.onScroll(event);
+      propsOnScroll?.(event);
+  },
+  [scrollReachedProps.onScroll, propsOnScroll]);
+
+  if (children) {
+    return (
+      <>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          scrollEventThrottle={16}
+          decelerationRate={'fast'}
+          {...other}
+          scrollEnabled={scrollEnablerProps.scrollEnabled}
+          onContentSizeChange={scrollEnablerProps.onContentSizeChange}
+          onLayout={scrollEnablerProps.onLayout}
+          onScroll={onScroll}
+          ref={props.forwardedRef}
+        >
+          {children}
+        </ScrollView>
+        <Fader visible={showStart} position={Fader.position.START} size={FADER_SIZE}/>
+        <Fader visible={showEnd} position={Fader.position.END} size={FADER_SIZE}/>
+      </>
+    );
+  }
+
+  return null;
+};
+
+// TODO: fix withScrollEnabler props (add <>)
+export default withScrollReached<FadedScrollViewProps>(withScrollEnabler(forwardRef<Props>(FadedScrollView)), {
+  horizontal: true,
+  threshold: 50
+});
diff --git a/src/components/tabController/PageCarousel.js b/src/components/tabController/PageCarousel.tsx
similarity index 70%
rename from src/components/tabController/PageCarousel.js
rename to src/components/tabController/PageCarousel.tsx
index 839668c09d..123bddd4c0 100644
--- a/src/components/tabController/PageCarousel.js
+++ b/src/components/tabController/PageCarousel.tsx
@@ -14,7 +14,7 @@ const {Code, block, call} = Animated;
 class PageCarousel extends PureComponent {
   static displayName = 'TabController.PageCarousel';
   static contextType = TabBarContext;
-  carousel = React.createRef();
+  carousel = React.createRef<Animated.ScrollView>();
 
   onScroll = Animated.event([{nativeEvent: {contentOffset: {x: this.context.carouselOffset}}}], {
     useNativeDriver: true
@@ -23,16 +23,16 @@ class PageCarousel extends PureComponent {
   componentDidMount() {
     if (Constants.isAndroid) {
       setTimeout(() => {
-        this.scrollToPage(this.context.selectedIndex, false);
+        this.scrollToPage(this.context.selectedIndex);
       }, 0);
     }
   }
 
-  onTabChange = ([index]) => {
-    this.scrollToPage(index, true);
+  onTabChange = ([index]: readonly number[]) => {
+    this.scrollToPage(index);
   };
 
-  scrollToPage = (pageIndex, animated) => {
+  scrollToPage = (pageIndex: number) => {
     const {pageWidth} = this.context;
     const node = _.invoke(this.carousel, 'current.getNode');
     if (node) {
@@ -40,13 +40,20 @@ class PageCarousel extends PureComponent {
     }
   };
 
-  renderCodeBlock = () => {
+  renderCodeBlock = _.memoize(() => {
     const {targetPage, containerWidth} = this.context;
-    return block([
-      Animated.onChange(targetPage, [call([targetPage], this.onTabChange)]),
-      Animated.onChange(containerWidth, [call([targetPage], this.onTabChange)])
-    ]);
-  };
+
+    return (
+      <Code>
+        {() =>
+          block([
+            Animated.onChange(targetPage, [call([targetPage], this.onTabChange)]),
+            Animated.onChange(containerWidth, [call([targetPage], this.onTabChange)])
+          ])
+        }
+      </Code>
+    );
+  });
 
   render() {
     const {selectedIndex, pageWidth} = this.context;
@@ -60,10 +67,10 @@ class PageCarousel extends PureComponent {
           showsHorizontalScrollIndicator={false}
           onScroll={this.onScroll}
           scrollEventThrottle={16}
-          contentOffset={{x: selectedIndex * pageWidth}} // iOS only
+          contentOffset={{x: selectedIndex * pageWidth, y: 0}} // iOS only
         />
 
-        <Code>{this.renderCodeBlock}</Code>
+        {this.renderCodeBlock()}
       </>
     );
   }
diff --git a/src/components/tabController/ReanimatedObject.js b/src/components/tabController/ReanimatedObject.js
deleted file mode 100644
index a91ca9c6e7..0000000000
--- a/src/components/tabController/ReanimatedObject.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// TODO: consider removing this file if no still using it
-import Reanimated, {Easing} from 'react-native-reanimated';
-
-const {Clock, Value, cond, stopClock, startClock, clockRunning, timing, block, set} = Reanimated;
-
-export default class ReanimatedObject {
-  constructor(config) {
-    this.clock = new Clock();
-    this.state = {
-      finished: new Value(0),
-      position: new Value(0),
-      time: new Value(0),
-      frameTime: new Value(0)
-    };
-    this.config = {
-      duration: 300,
-      toValue: new Value(0),
-      easing: Easing.bezier(0.23, 1, 0.32, 1),
-      ...config
-    };
-    this.prevValue = new Value(0);
-    this.value = new Value(0);
-    this.nextValue = new Value(0);
-  }
-
-  getTransitionBlock() {
-    return block([
-      cond(clockRunning(this.clock),
-        [set(this.config.toValue, this.nextValue), set(this.value, this.state.position)],
-        [
-          set(this.state.finished, 0),
-          set(this.state.time, 0),
-          set(this.state.frameTime, 0),
-          set(this.config.toValue, this.nextValue),
-          startClock(this.clock)
-        ],),
-      timing(this.clock, this.state, this.config),
-      cond(this.state.finished, [stopClock(this.clock), set(this.prevValue, this.state.position)])
-    ]);
-  }
-}
diff --git a/src/components/tabController/TabBar.js b/src/components/tabController/TabBar.js
deleted file mode 100644
index 1793d69629..0000000000
--- a/src/components/tabController/TabBar.js
+++ /dev/null
@@ -1,477 +0,0 @@
-// TODO: support commented props
-// TODO: disable scroll when content width is shorter than screen width
-import React, {PureComponent} from 'react';
-import {StyleSheet, ScrollView, ViewPropTypes, Platform, Text as RNText} from 'react-native';
-import Reanimated from 'react-native-reanimated';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-
-import TabBarContext from './TabBarContext';
-import TabBarItem from './TabBarItem';
-// import ReanimatedObject from './ReanimatedObject';
-import {asBaseComponent, forwardRef} from '../../commons';
-import View from '../../components/view';
-import ScrollBarGradient from '../scrollBar/ScrollBarGradient';
-import {Colors, Spacings, Typography} from '../../style';
-import {Constants} from '../../helpers';
-import {LogService} from '../../services';
-
-const {Code, Value, interpolate, block, set} = Reanimated;
-
-const DEFAULT_HEIGHT = 48;
-const INDICATOR_INSET = Spacings.s4;
-const DEFAULT_BACKGROUND_COLOR = Colors.white;
-
-const DEFAULT_LABEL_STYLE = {
-  ...Typography.text80,
-  fontWeight: '400',
-  letterSpacing: 0
-};
-
-const DEFAULT_SELECTED_LABEL_STYLE = {
-  ...Typography.text80,
-  fontWeight: '700',
-  letterSpacing: 0
-};
-
-/**
- * @description: TabController's TabBar component
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
- */
-class TabBar extends PureComponent {
-  static displayName = 'TabController.TabBar';
-  static contextType = TabBarContext;
-
-  static propTypes = {
-    /**
-     * The list of tab bar items
-     */
-    items: PropTypes.arrayOf(PropTypes.shape(TabBarItem.propTypes)),
-    /**
-     * Tab Bar height
-     */
-    height: PropTypes.number,
-    /**
-     * Show Tab Bar bottom shadow
-     */
-    enableShadow: PropTypes.bool,
-    /**
-     * custom shadow style
-     */
-    shadowStyle: ViewPropTypes.style,
-    // /**
-    //  * The minimum number of tabs to render in scroll mode
-    //  */
-    // minTabsForScroll: PropTypes.number,
-    /**
-     * custom style for the selected indicator
-     */
-    indicatorStyle: ViewPropTypes.style,
-    /**
-     * custom label style
-     */
-    labelStyle: RNText.propTypes.style,
-    /**
-     * custom selected label style
-     */
-    selectedLabelStyle: RNText.propTypes.style,
-    /**
-     * the default label color
-     */
-    labelColor: PropTypes.string,
-    /**
-     * the selected label color
-     */
-    selectedLabelColor: PropTypes.string,
-    /**
-     * whether to change the text to uppercase
-     */
-    uppercase: PropTypes.bool,
-    /**
-     * icon tint color
-     */
-    iconColor: PropTypes.string,
-    /**
-     * icon selected tint color
-     */
-    selectedIconColor: PropTypes.string,
-    /**
-     * TODO: rename to feedbackColor
-     * Apply background color on press for TouchableOpacity
-     */
-    activeBackgroundColor: PropTypes.string,
-    /**
-     * The TabBar background Color
-     */
-    backgroundColor: PropTypes.string,
-    /**
-     * The TabBar container width
-     */
-    containerWidth: PropTypes.number,
-    /**
-     * Pass to center selected item
-     */
-    centerSelected: PropTypes.bool
-  };
-
-  static defaultProps = {
-    labelStyle: DEFAULT_LABEL_STYLE,
-    selectedLabelStyle: DEFAULT_SELECTED_LABEL_STYLE,
-    backgroundColor: DEFAULT_BACKGROUND_COLOR
-
-    // containerWidth: Constants.screenWidth
-  };
-
-  constructor(props, context) {
-    super(props, context);
-
-    if (this.props.children) {
-      LogService.warn('uilib: Please pass the "items" prop to TabController.TabBar instead of children');
-    }
-
-    const itemsCount = this.getItemsCount();
-
-    this.tabBar = React.createRef();
-    this.tabBarScrollOffset = 0;
-
-    this._itemsWidths = _.times(itemsCount, () => null);
-    this._itemsOffsets = _.times(itemsCount, () => null);
-    this._indicatorOffset = new Value(0);
-    this._indicatorWidth = new Value(0);
-
-    this._indicatorTransitionStyle = {
-      width: this._indicatorWidth,
-      left: this._indicatorOffset
-    };
-
-    this.state = {
-      scrollEnabled: false,
-      itemsWidths: undefined
-    };
-
-    if ((props.items || this.children) && !context.items) {
-      this.registerTabItems();
-    }
-  }
-
-  get containerWidth() {
-    return this.props.containerWidth || Constants.screenWidth;
-  }
-
-  get children() {
-    return _.filter(this.props.children, (child) => !!child);
-  }
-
-
-  get centerOffset() {
-    const {centerSelected} = this.props;
-    const guesstimateCenterValue = 60;
-    return centerSelected ? this.containerWidth / 2 - guesstimateCenterValue : 0;
-  }
-
-  get items() {
-    const {items: contextItems} = this.context;
-    const {items: propsItems} = this.props;
-    return contextItems || propsItems;
-  }
-
-  getItemsCount() {
-    if (this.items) {
-      return _.size(this.items);
-    } else {
-      return React.Children.count(this.children);
-    }
-  }
-
-  getSnapBreakpoints() {
-    const {centerSelected} = this.props;
-    const {itemsWidths, itemsOffsets} = this.state;
-
-    if (itemsWidths && centerSelected) {
-      return _.times(itemsWidths.length, (index) => {
-        const screenCenter = this.containerWidth / 2;
-        const itemOffset = itemsOffsets[index];
-        const itemWidth = itemsWidths[index];
-        return itemOffset - screenCenter + itemWidth / 2;
-      });
-    }
-  }
-
-  registerTabItems() {
-    const {registerTabItems} = this.context;
-    const {items} = this.props;
-    const ignoredItems = [];
-    let itemsCount;
-
-    if (items) {
-      itemsCount = _.size(items);
-      _.forEach(items, (item, index) => {
-        if (item.ignore) {
-          ignoredItems.push(index);
-        }
-      });
-      // TODO: deprecate with props.children
-    } else {
-      itemsCount = React.Children.count(this.children);
-      React.Children.toArray(this.children).forEach((child, index) => {
-        if (child.props.ignore) {
-          ignoredItems.push(index);
-        }
-      });
-    }
-
-    registerTabItems(itemsCount, ignoredItems);
-  }
-
-  // TODO: move this logic into a ScrollPresenter or something
-  focusSelected = ([index], animated = true) => {
-    const {centerSelected} = this.props;
-    const itemOffset = this._itemsOffsets[index];
-    const itemWidth = this._itemsWidths[index];
-    const screenCenter = this.containerWidth / 2;
-
-    let targetOffset;
-
-    if (itemOffset && itemWidth) {
-      if (centerSelected) {
-        targetOffset = itemOffset - screenCenter + itemWidth / 2;
-      } else if (itemOffset < this.tabBarScrollOffset) {
-        targetOffset = itemOffset - itemWidth;
-      } else if (itemOffset + itemWidth > this.tabBarScrollOffset + this.containerWidth) {
-        const offsetChange = Math.max(0, itemOffset - (this.tabBarScrollOffset + this.containerWidth));
-        targetOffset = this.tabBarScrollOffset + offsetChange + itemWidth;
-      }
-      
-      if (!_.isUndefined(targetOffset)) {
-
-        if (Constants.isRTL && Constants.isAndroid) {
-          const scrollingWidth = Math.max(0, this.contentWidth - this.containerWidth);
-          targetOffset = scrollingWidth - targetOffset;
-        }
-
-        this.tabBar.current.scrollTo({x: targetOffset, animated});
-      }
-    }
-  };
-
-  onItemLayout = ({width}, itemIndex) => {
-    this._itemsWidths[itemIndex] = width;
-    if (!_.includes(this._itemsWidths, null)) {
-      this.setItemsLayouts();
-    }
-  };
-
-  setItemsLayouts = () => {
-    const {selectedIndex} = this.context;
-    // It's important to calculate itemOffsets for RTL support
-    this._itemsOffsets = _.times(this._itemsWidths.length, (i) => _.chain(this._itemsWidths).take(i).sum().value() + this.centerOffset);
-    const itemsOffsets = _.map(this._itemsOffsets, (offset) => offset + INDICATOR_INSET);
-    const itemsWidths = _.map(this._itemsWidths, (width) => width - INDICATOR_INSET * 2);
-    this.contentWidth = _.sum(this._itemsWidths);
-    const scrollEnabled = this.contentWidth > this.containerWidth;
-
-    this.setState({itemsWidths, itemsOffsets, scrollEnabled});
-    this.focusSelected([selectedIndex], false);
-  };
-
-  onScroll = ({nativeEvent: {contentOffset}}) => {
-    const {fadeLeft, fadeRight} = this.state;
-    this.tabBarScrollOffset = contentOffset.x;
-    if (Constants.isRTL && Constants.isAndroid) {
-      const scrollingWidth = Math.max(0, this.contentWidth - this.containerWidth);
-      this.tabBarScrollOffset = scrollingWidth - this.tabBarScrollOffset;
-    }
-    const stateUpdate = {};
-    // TODO: extract this logic to scrollbar presenter or something
-    const leftThreshold = 50;
-    if (this.tabBarScrollOffset > leftThreshold && !fadeLeft) {
-      stateUpdate.fadeLeft = true;
-    } else if (this.tabBarScrollOffset <= leftThreshold && fadeLeft) {
-      stateUpdate.fadeLeft = false;
-    }
-
-    const rightThreshold = (this.contentWidth - this.containerWidth);
-    if (this.tabBarScrollOffset < rightThreshold && !fadeRight) {
-      stateUpdate.fadeRight = true;
-    } else if (this.tabBarScrollOffset >= rightThreshold && fadeRight) {
-      stateUpdate.fadeRight = false;
-    }
-
-    if (!_.isEmpty(stateUpdate)) {
-      this.setState(stateUpdate);
-    }
-  };
-
-
-  renderSelectedIndicator() {
-    const {itemsWidths} = this.state;
-    const {indicatorStyle} = this.props;
-    if (itemsWidths) {
-      return <Reanimated.View style={[styles.selectedIndicator, indicatorStyle, this._indicatorTransitionStyle]}/>;
-    }
-  }
-
-  renderTabBarItems() {
-    const {itemStates} = this.context;
-    const {
-      labelColor,
-      selectedLabelColor,
-      labelStyle,
-      selectedLabelStyle,
-      uppercase,
-      iconColor,
-      selectedIconColor,
-      activeBackgroundColor
-    } = this.props;
-
-    if (_.isEmpty(itemStates)) {
-      return;
-    }
-
-    if (this.items) {
-      return _.map(this.items, (item, index) => {
-        return (
-          <TabBarItem
-            labelColor={labelColor}
-            selectedLabelColor={selectedLabelColor}
-            labelStyle={labelStyle}
-            selectedLabelStyle={selectedLabelStyle}
-            uppercase={uppercase}
-            iconColor={iconColor}
-            selectedIconColor={selectedIconColor}
-            activeBackgroundColor={activeBackgroundColor}
-            key={item.label}
-            // width={this._itemsWidths[index]}
-            {...item}
-            {...this.context}
-            index={index}
-            state={itemStates[index]}
-            onLayout={this.onItemLayout}
-          />
-        );
-      });
-    } else {
-      // TODO: Remove once props.children is deprecated
-      if (this.tabBarItems) {
-        return this.tabBarItems;
-      }
-
-      this.tabBarItems = React.Children.map(this.children, (child, index) => {
-        return React.cloneElement(child, {
-          labelColor,
-          selectedLabelColor,
-          labelStyle,
-          selectedLabelStyle,
-          uppercase,
-          iconColor,
-          selectedIconColor,
-          activeBackgroundColor,
-          ...child.props,
-          ...this.context,
-          index,
-          state: itemStates[index],
-          onLayout: this.onItemLayout
-        });
-      });
-      return this.tabBarItems;
-    }
-  }
-
-  renderCodeBlock = () => {
-    const {currentPage, targetPage} = this.context;
-    const {itemsWidths, itemsOffsets} = this.state;
-    const nodes = [];
-
-    nodes.push(set(this._indicatorOffset,
-      interpolate(currentPage, {
-        inputRange: itemsOffsets.map((v, i) => i),
-        outputRange: itemsOffsets
-      })));
-    nodes.push(set(this._indicatorWidth,
-      interpolate(currentPage, {inputRange: itemsWidths.map((v, i) => i), outputRange: itemsWidths})));
-
-    nodes.push(Reanimated.onChange(targetPage, Reanimated.call([targetPage], this.focusSelected)));
-
-    return block(nodes);
-  };
-
-  getShadowStyle() {
-    const {enableShadow, shadowStyle} = this.props;
-    return enableShadow && (shadowStyle || styles.containerShadow); 
-  }
-
-  render() {
-    const {height, containerStyle, testID, backgroundColor} = this.props;
-    const {itemsWidths, scrollEnabled, fadeLeft, fadeRight} = this.state;
-    return (
-      <View
-        style={[styles.container, this.getShadowStyle(), {width: this.containerWidth}, containerStyle]}
-      >
-        <ScrollView
-          ref={this.tabBar}
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{minWidth: this.containerWidth}}
-          scrollEnabled={scrollEnabled}
-          onScroll={this.onScroll}
-          scrollEventThrottle={16}
-          testID={testID}
-          snapToOffsets={this.getSnapBreakpoints()}
-          decelerationRate={'fast'}
-        >
-          <View style={[styles.tabBar, height && {height}, {paddingHorizontal: this.centerOffset, backgroundColor}]}>
-            {this.renderTabBarItems()}
-          </View>
-          {this.renderSelectedIndicator()}
-        </ScrollView>
-        {_.size(itemsWidths) > 1 && <Code>{this.renderCodeBlock}</Code>}
-        <ScrollBarGradient left visible={fadeLeft}/>
-        <ScrollBarGradient visible={fadeRight}/>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    zIndex: 100
-  },
-  tabBar: {
-    flex: 1,
-    height: DEFAULT_HEIGHT,
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
-  tabBarScrollContent: {
-    minWidth: Constants.screenWidth
-  },
-  tab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  selectedIndicator: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    width: 70,
-    height: 2,
-    backgroundColor: Colors.blue30
-  },
-  containerShadow: {
-    ...Platform.select({
-      ios: {
-        shadowColor: Colors.dark10,
-        shadowOpacity: 0.05,
-        shadowRadius: 2,
-        shadowOffset: {height: 6, width: 0}
-      },
-      android: {
-        elevation: 5,
-        backgroundColor: Colors.white
-      }
-    })
-  }
-});
-
-export default asBaseComponent(forwardRef(TabBar));
diff --git a/src/components/tabController/TabBar.tsx b/src/components/tabController/TabBar.tsx
new file mode 100644
index 0000000000..14b63ad243
--- /dev/null
+++ b/src/components/tabController/TabBar.tsx
@@ -0,0 +1,456 @@
+// TODO: support commented props
+// TODO: disable scroll when content width is shorter than screen width
+import React, {useEffect, useState, useCallback, useMemo, useRef, useContext} from 'react';
+import {
+  StyleSheet,
+  ScrollView,
+  Platform,
+  TextProps,
+  StyleProp,
+  ViewStyle,
+  LayoutRectangle,
+  NativeSyntheticEvent,
+  NativeScrollEvent
+} from 'react-native';
+import Reanimated from 'react-native-reanimated';
+import _ from 'lodash';
+
+import TabBarContext from './TabBarContext';
+import TabBarItem, {TabControllerItemProps} from './TabBarItem';
+import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../../commons/new';
+import View from '../../components/view';
+import {Colors, Spacings, Typography} from '../../style';
+import {Constants} from '../../helpers';
+import {LogService} from '../../services';
+import FadedScrollView from './FadedScrollView';
+
+const {Code, Value, interpolate, block, set} = Reanimated;
+
+const DEFAULT_HEIGHT = 48;
+const INDICATOR_INSET = Spacings.s4;
+const DEFAULT_BACKGROUND_COLOR = Colors.white;
+
+const DEFAULT_LABEL_STYLE = {
+  ...Typography.text80,
+  fontWeight: '400',
+  letterSpacing: 0
+};
+
+const DEFAULT_SELECTED_LABEL_STYLE = {
+  ...Typography.text80,
+  fontWeight: '700',
+  letterSpacing: 0
+};
+
+export interface TabControllerBarProps {
+  /**
+   * The list of tab bar items
+   */
+  items?: TabControllerItemProps[];
+  /**
+   * Tab Bar height
+   */
+  height?: number;
+  /**
+   * Show Tab Bar bottom shadow
+   */
+  enableShadow?: boolean;
+  /**
+   * custom shadow style
+   */
+  shadowStyle?: StyleProp<ViewStyle>;
+  // /**
+  //  * The minimum number of tabs to render in scroll mode
+  //  */
+  // minTabsForScroll?: number;
+  /**
+   * custom style for the selected indicator
+   */
+  indicatorStyle?: StyleProp<ViewStyle>;
+  /**
+   * custom label style
+   */
+  labelStyle?: TextProps;
+  /**
+   * custom selected label style
+   */
+  selectedLabelStyle?: TextProps;
+  /**
+   * the default label color
+   */
+  labelColor?: string;
+  /**
+   * the selected label color
+   */
+  selectedLabelColor?: string;
+  /**
+   * whether to change the text to uppercase
+   */
+  uppercase?: boolean;
+  /**
+   * icon tint color
+   */
+  iconColor?: string;
+  /**
+   * icon selected tint color
+   */
+  selectedIconColor?: string;
+  /**
+   * TODO: rename to feedbackColor
+   * Apply background color on press for TouchableOpacity
+   */
+  activeBackgroundColor?: string;
+  /**
+   * The TabBar background Color
+   */
+  backgroundColor?: string;
+  /**
+   * The TabBar container width
+   */
+  containerWidth?: number;
+  /**
+   * Pass to center selected item
+   */
+  centerSelected?: boolean;
+  /**
+   * Additional styles for the container
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Used as a testing identifier
+   */
+  testID?: string;
+}
+
+type ChildProps = React.ReactElement<TabControllerItemProps>;
+
+interface Props extends TabControllerBarProps, BaseComponentInjectedProps, ForwardRefInjectedProps {
+  children?: ChildProps[] | ChildProps;
+}
+
+/**
+ * @description: TabController's TabBar component
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
+ */
+const TabBar = (props: Props) => {
+  const {
+    items: propsItems,
+    height,
+    enableShadow,
+    shadowStyle: propsShadowStyle,
+    // minTabsForScroll,
+    indicatorStyle,
+    labelStyle,
+    selectedLabelStyle,
+    labelColor,
+    selectedLabelColor,
+    uppercase,
+    iconColor,
+    selectedIconColor,
+    activeBackgroundColor,
+    backgroundColor,
+    containerWidth: propsContainerWidth,
+    centerSelected: propsCenterSelected,
+    containerStyle,
+    testID,
+    children: propsChildren
+  } = props;
+
+  const context = useContext(TabBarContext);
+  // @ts-ignore // TODO: typescript
+  const {itemStates, items: contextItems, selectedIndex, currentPage, targetPage, registerTabItems} = context;
+
+  const children = useRef<Props['children']>(_.filter(propsChildren, (child: ChildProps) => !!child));
+
+  const _registerTabItems = () => {
+    const ignoredItems: number[] = [];
+    let itemsCount;
+
+    if (propsItems) {
+      itemsCount = _.size(propsItems);
+      _.forEach(propsItems, (item, index) => {
+        if (item.ignore) {
+          ignoredItems.push(index);
+        }
+      });
+      // TODO: deprecate with props.children
+    } else {
+      itemsCount = React.Children.count(children.current);
+      // @ts-ignore TODO: typescript - not sure if this can be solved
+      React.Children.toArray(children.current).forEach((child: ChildProps, index: number) => {
+        if (child.props.ignore) {
+          ignoredItems.push(index);
+        }
+      });
+    }
+
+    registerTabItems(itemsCount, ignoredItems);
+  };
+
+  useEffect(() => {
+    if (propsChildren) {
+      LogService.warn('uilib: Please pass the "items" prop to TabController.TabBar instead of children');
+    }
+
+    if ((propsItems || children.current) && !contextItems) {
+      _registerTabItems();
+    }
+  }, []);
+
+  const [itemsWidths, setItemsWidths] = useState<number[]>([]);
+  const [itemsOffsets, setItemsOffsets] = useState<number[]>([]);
+  const [scrollEnabled, setScrollEnabled] = useState<boolean>(false);
+  const tabBar = useRef<ScrollView>(null);
+  const tabBarScrollOffset = useRef<number>(0);
+  const contentWidth = useRef<number>(0);
+
+  const containerWidth: number = useMemo(() => {
+    return propsContainerWidth || Constants.screenWidth;
+  }, [propsContainerWidth]);
+  const items = useMemo(() => {
+    return contextItems || propsItems;
+  }, [contextItems, propsItems]);
+
+  const itemsCount = useRef<number>(items ? _.size(items) : React.Children.count(children.current));
+  const _itemsWidths = useRef<(number | null | undefined)[]>(_.times(itemsCount.current, () => null));
+  const _itemsOffsets = useRef<(number | null | undefined)[]>(_.times(itemsCount.current, () => null));
+
+  const onScroll = useCallback(({nativeEvent: {contentOffset}}: NativeSyntheticEvent<NativeScrollEvent>) => {
+    tabBarScrollOffset.current = contentOffset.x;
+    if (Constants.isRTL && Constants.isAndroid) {
+      const scrollingWidth = Math.max(0, contentWidth.current - containerWidth);
+      tabBarScrollOffset.current = scrollingWidth - tabBarScrollOffset.current;
+    }
+  },
+  [containerWidth]);
+
+  const snapBreakpoints = useMemo(() => {
+    return itemsWidths && itemsOffsets && itemsWidths.length > 0 && itemsOffsets.length > 0 && propsCenterSelected
+      ? _.times(itemsWidths.length, index => {
+        const screenCenter = containerWidth / 2;
+        const itemOffset = itemsOffsets[index];
+        const itemWidth = itemsWidths[index];
+        return itemOffset - screenCenter + itemWidth / 2;
+      })
+      : undefined;
+  }, [itemsWidths, itemsOffsets, propsCenterSelected, containerWidth]);
+
+  const guesstimateCenterValue = 60;
+  const centerOffset = propsCenterSelected ? containerWidth / 2 - guesstimateCenterValue : 0;
+
+  // TODO: move this logic into a ScrollPresenter or something
+  const focusSelected = useCallback(([index]: readonly number[], animated = true) => {
+    const itemOffset = _itemsOffsets.current[index];
+    const itemWidth = _itemsWidths.current[index];
+    const screenCenter = containerWidth / 2;
+
+    let targetOffset;
+
+    if (!_.isNil(itemOffset) && !_.isNil(itemWidth)) {
+      if (propsCenterSelected) {
+        targetOffset = itemOffset - screenCenter + itemWidth / 2;
+      } else if (itemOffset < tabBarScrollOffset.current) {
+        targetOffset = itemOffset - itemWidth;
+      } else if (itemOffset + itemWidth > tabBarScrollOffset.current + containerWidth) {
+        const offsetChange = Math.max(0, itemOffset - (tabBarScrollOffset.current + containerWidth));
+        targetOffset = tabBarScrollOffset.current + offsetChange + itemWidth;
+      }
+
+      if (!_.isUndefined(targetOffset)) {
+        if (Constants.isRTL && Constants.isAndroid) {
+          const scrollingWidth = Math.max(0, contentWidth.current - containerWidth);
+          targetOffset = scrollingWidth - targetOffset;
+        }
+
+        if (tabBar?.current) {
+          tabBar.current.scrollTo({x: targetOffset, animated});
+        }
+      }
+    }
+  },
+  [containerWidth]);
+
+  function getItemsOffsets() {
+    return _.times(_itemsWidths.current.length,
+      i => _.chain(_itemsWidths.current).take(i).sum().value() + centerOffset);
+  }
+
+  const setItemsLayouts = useCallback(() => {
+    // It's important to calculate itemOffsets for RTL support
+    _itemsOffsets.current = getItemsOffsets();
+    const itemsOffsets = _.map(_itemsOffsets.current, offset => (offset ? offset : 0) + INDICATOR_INSET);
+    const itemsWidths = _.map(_itemsWidths.current, width => (width ? width : 0) - INDICATOR_INSET * 2);
+    contentWidth.current = _.sum(_itemsWidths.current);
+    const scrollEnabled = contentWidth.current > containerWidth;
+
+    setItemsWidths(itemsWidths);
+    setItemsOffsets(itemsOffsets);
+    setScrollEnabled(scrollEnabled);
+    focusSelected([selectedIndex], false);
+  }, [containerWidth, selectedIndex]);
+
+  const onItemLayout = useCallback(({width}: Partial<LayoutRectangle>, itemIndex: number) => {
+    _itemsWidths.current[itemIndex] = width;
+    if (!_.includes(_itemsWidths.current, null)) {
+      setItemsLayouts();
+    }
+  },
+  [setItemsLayouts]);
+
+  const _renderTabBarItems = _.map(items, (item, index) => {
+    return (
+      <TabBarItem
+        labelColor={labelColor}
+        selectedLabelColor={selectedLabelColor}
+        labelStyle={labelStyle}
+        selectedLabelStyle={selectedLabelStyle}
+        uppercase={uppercase}
+        iconColor={iconColor}
+        selectedIconColor={selectedIconColor}
+        activeBackgroundColor={activeBackgroundColor}
+        key={item.label}
+        // width={_itemsWidths.current[index]}
+        {...item}
+        {...context}
+        index={index}
+        state={itemStates[index]}
+        onLayout={onItemLayout}
+      />
+    );
+  });
+
+  // TODO: Remove once props.children is deprecated
+  const _renderTabBarItemsFromChildren = !children.current
+    ? null
+    : React.Children.map(children.current, (child: Partial<ChildProps>, index: number) => {
+      // @ts-ignore TODO: typescript - not sure if this can be easily solved
+      return React.cloneElement(child, {
+        labelColor,
+        selectedLabelColor,
+        labelStyle,
+        selectedLabelStyle,
+        uppercase,
+        iconColor,
+        selectedIconColor,
+        activeBackgroundColor,
+        ...child.props,
+        ...context,
+        index,
+        state: itemStates[index],
+        onLayout: onItemLayout
+      });
+    });
+
+  const renderTabBarItems = _.isEmpty(itemStates) ? null : items ? _renderTabBarItems : _renderTabBarItemsFromChildren;
+
+  const _indicatorWidth = new Value(0); // TODO: typescript?
+  const _indicatorOffset = new Value(0); // TODO: typescript?
+
+  const _indicatorTransitionStyle = {
+    // StyleProp<ViewStyle> TODO:
+    width: _indicatorWidth,
+    left: _indicatorOffset
+  };
+
+  const renderSelectedIndicator =
+    itemsWidths && itemsWidths.length > 0 ? (
+      <Reanimated.View style={[styles.selectedIndicator, indicatorStyle, _indicatorTransitionStyle]}/>
+    ) : undefined;
+
+  const renderCodeBlock = () => {
+    const nodes: any[] = [];
+
+    nodes.push(set(_indicatorOffset,
+      interpolate(currentPage, {
+        inputRange: itemsOffsets.map((_v, i) => i),
+        outputRange: itemsOffsets
+      })));
+    nodes.push(set(_indicatorWidth,
+      interpolate(currentPage, {inputRange: itemsWidths.map((_v, i) => i), outputRange: itemsWidths})));
+
+    nodes.push(Reanimated.onChange(targetPage, Reanimated.call([targetPage], focusSelected)));
+
+    return <Code>{() => block(nodes)}</Code>;
+  };
+
+  const shadowStyle = enableShadow ? propsShadowStyle || styles.containerShadow : undefined;
+  return (
+    <View style={[styles.container, shadowStyle, {width: containerWidth}, containerStyle]}>
+      <FadedScrollView
+        // @ts-ignore TODO: typescript
+        ref={tabBar}
+        horizontal
+        contentContainerStyle={{minWidth: containerWidth}}
+        scrollEnabled={scrollEnabled}
+        onScroll={onScroll}
+        testID={testID}
+        snapToOffsets={snapBreakpoints}
+      >
+        <View
+          style={[
+            styles.tabBar,
+            !_.isUndefined(height) && {height},
+            {paddingHorizontal: centerOffset, backgroundColor}
+          ]}
+        >
+          {renderTabBarItems}
+        </View>
+        {renderSelectedIndicator}
+      </FadedScrollView>
+      {_.size(itemsWidths) > 1 && renderCodeBlock()}
+    </View>
+  );
+};
+
+TabBar.displayName = 'TabController.TabBar';
+TabBar.defaultProps = {
+  labelStyle: DEFAULT_LABEL_STYLE,
+  selectedLabelStyle: DEFAULT_SELECTED_LABEL_STYLE,
+  backgroundColor: DEFAULT_BACKGROUND_COLOR
+
+  // containerWidth: Constants.screenWidth
+};
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 100
+  },
+  tabBar: {
+    flex: 1,
+    height: DEFAULT_HEIGHT,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  tabBarScrollContent: {
+    minWidth: Constants.screenWidth
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  selectedIndicator: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: 70,
+    height: 2,
+    backgroundColor: Colors.blue30
+  },
+  containerShadow: {
+    ...Platform.select({
+      ios: {
+        shadowColor: Colors.dark10,
+        shadowOpacity: 0.05,
+        shadowRadius: 2,
+        shadowOffset: {height: 6, width: 0}
+      },
+      android: {
+        elevation: 5,
+        backgroundColor: Colors.white
+      }
+    })
+  }
+});
+
+export default asBaseComponent<TabControllerBarProps>(forwardRef<Props>(TabBar));
diff --git a/src/components/tabController/TabBarContext.js b/src/components/tabController/TabBarContext.ts
similarity index 100%
rename from src/components/tabController/TabBarContext.js
rename to src/components/tabController/TabBarContext.ts
diff --git a/src/components/tabController/TabBarItem.js b/src/components/tabController/TabBarItem.js
deleted file mode 100644
index d75fad359b..0000000000
--- a/src/components/tabController/TabBarItem.js
+++ /dev/null
@@ -1,276 +0,0 @@
-// TODO: support commented props
-import React, {PureComponent} from 'react';
-import {StyleSheet, /* processColor, */ Text as RNText} from 'react-native';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import Reanimated from 'react-native-reanimated';
-import {State} from 'react-native-gesture-handler';
-import {interpolateColor} from 'react-native-redash';
-import {Colors, Typography, Spacings} from '../../style';
-import Badge from '../../components/badge';
-import {TouchableOpacity} from '../../incubator';
-
-const {cond, eq, call, block, event, and} = Reanimated;
-
-const DEFAULT_LABEL_COLOR = Colors.black;
-const DEFAULT_SELECTED_LABEL_COLOR = Colors.blue30;
-
-/**
- * @description: TabController's TabBarItem
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
- * @notes: Must be rendered as a direct child of TabController.TabBar.
- */
-export default class TabBarItem extends PureComponent {
-  static displayName = 'TabController.TabBarItem';
-
-  static propTypes = {
-    /**
-     * label of the tab
-     */
-    label: PropTypes.string,
-    /**
-     * custom label style
-     */
-    labelStyle: RNText.propTypes.style,
-    /**
-     * custom selected label style
-     */
-    selectedLabelStyle: RNText.propTypes.style,
-    /**
-     * the default label color
-     */
-    labelColor: PropTypes.string,
-    /**
-     * the selected label color
-     */
-    selectedLabelColor: PropTypes.string,
-    /**
-     * icon of the tab
-     */
-    icon: PropTypes.number,
-    /**
-     * icon tint color
-     */
-    iconColor: PropTypes.string,
-    /**
-     * icon selected tint color
-     */
-    selectedIconColor: PropTypes.string,
-    /**
-     * Badge component props to display next the item label
-     */
-    badge: PropTypes.shape(Badge.propTypes),
-    // /**
-    //  * maximun number of lines the label can break
-    //  */
-    // maxLines: PropTypes.number,
-    // /**
-    //  * whether the tab will have a divider on its right
-    //  */
-    // showDivider: PropTypes.bool,
-    /**
-     * A fixed width for the item
-     */
-    width: PropTypes.number,
-    /**
-     * ignore of the tab
-     */
-    ignore: PropTypes.bool, // eslint-disable-line
-    /**
-     * callback for when pressing a tab
-     */
-    onPress: PropTypes.func,
-    /**
-     * whether to change the text to uppercase
-     */
-    uppercase: PropTypes.bool,
-    /**
-     * The active opacity when pressing a tab
-     */
-    activeOpacity: PropTypes.number,
-    /**
-     * TODO: rename to feedbackColor
-     * Apply background color on press for TouchableOpacity
-     */
-    activeBackgroundColor: PropTypes.string,
-
-    // INTERNAL PROPS
-    index: PropTypes.number,
-    state: PropTypes.object,
-    currentPage: PropTypes.object,
-    onLayout: PropTypes.func
-  };
-
-  static defaultProps = {
-    activeOpacity: 1,
-    onPress: _.noop
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.itemWidth = this.props.width;
-    this.state = {};
-    this.itemRef = React.createRef();
-
-    if (this.itemWidth) {
-      const {index, onLayout} = this.props;
-      onLayout({width: this.itemWidth}, index);
-    }
-  }
-
-
-  onStateChange = event([
-    {
-      nativeEvent: {state: this.props.state}
-    }
-  ],
-  {useNativeDriver: true});
-
-  onLayout = ({
-    nativeEvent: {
-      layout: {width, x}
-    }
-  }) => {
-    const {index, onLayout} = this.props;
-    if (!this.itemWidth) {
-      this.itemWidth = width;
-      this.itemRef.current.setNativeProps({style: {width, paddingHorizontal: null, flex: null}});
-      if (onLayout) {
-        onLayout({width}, index);
-      }
-    }
-  };
-
-  onPress = () => {
-    const {index, onPress} = this.props;
-    onPress(index);
-  };
-
-  getItemStyle() {
-    const {state, style: propsStyle} = this.props;
-    const opacity = block([
-      cond(eq(state, State.END), call([], this.onPress)),
-      cond(eq(state, State.BEGAN), this.props.activeOpacity, 1)
-    ]);
-
-    const style = {
-      opacity
-    };
-
-    if (this.props.width) {
-      style.flex = undefined;
-      style.width = this.itemWidth;
-      style.paddingHorizontal = undefined;
-    }
-
-    return [style, propsStyle];
-  }
-
-  getLabelStyle() {
-    const {index, currentPage, targetPage, labelColor, selectedLabelColor, ignore} = this.props;
-
-    const labelStyle = this.props.labelStyle;
-    const selectedLabelStyle = this.props.selectedLabelStyle;
-    let fontWeight, letterSpacing, fontFamily;
-
-    if (labelStyle.fontWeight || selectedLabelStyle.fontWeight) {
-      fontWeight = cond(and(eq(targetPage, index) /* , defined(itemWidth) */),
-        selectedLabelStyle.fontWeight || 'normal',
-        labelStyle.fontWeight || 'normal');
-    }
-
-    if (labelStyle.letterSpacing || selectedLabelStyle.letterSpacing) {
-      letterSpacing = cond(and(eq(targetPage, index) /* , defined(itemWidth) */),
-        selectedLabelStyle.letterSpacing || 0,
-        labelStyle.letterSpacing || 0);
-    }
-
-    if (labelStyle.fontFamily || selectedLabelStyle.fontFamily) {
-      fontFamily = cond(and(eq(targetPage, index) /* , defined(itemWidth) */),
-        selectedLabelStyle.fontFamily,
-        labelStyle.fontFamily);
-    }
-
-    const inactiveColor = labelColor || DEFAULT_LABEL_COLOR;
-    const activeColor = !ignore ? selectedLabelColor || DEFAULT_SELECTED_LABEL_COLOR : inactiveColor;
-
-    // Animated color
-    const color = interpolateColor(currentPage, {
-      inputRange: [index - 1, index, index + 1],
-      outputRange: [inactiveColor, activeColor, inactiveColor]
-    });
-
-    return [
-      labelStyle,
-      _.omitBy({
-        fontFamily,
-        fontWeight,
-        letterSpacing,
-        color
-      },
-      _.isUndefined)
-    ];
-  }
-
-  getIconStyle() {
-    const {index, currentPage, iconColor, selectedIconColor, labelColor, selectedLabelColor, ignore} = this.props;
-
-    const activeColor = selectedIconColor || selectedLabelColor || DEFAULT_SELECTED_LABEL_COLOR;
-    const inactiveColor = iconColor || labelColor || DEFAULT_LABEL_COLOR;
-
-    const tintColor = cond(eq(currentPage, index),
-      // TODO: using processColor here broke functionality,
-      // not using it seem to not be very performant
-      activeColor,
-      ignore ? activeColor : inactiveColor);
-
-    return {
-      tintColor
-    };
-  }
-
-  render() {
-    const {label, icon, badge, state, uppercase, activeOpacity, activeBackgroundColor, testID} = this.props;
-
-    return (
-      <TouchableOpacity
-        ref={this.itemRef}
-        pressState={state}
-        style={[styles.tabItem, this.getItemStyle()]}
-        onLayout={this.onLayout}
-        feedbackColor={activeBackgroundColor}
-        activeOpacity={activeOpacity}
-        onPress={this.onPress}
-        testID={testID}
-      >
-        {icon && <Reanimated.Image source={icon} style={[label && styles.tabItemIconWithLabel, this.getIconStyle()]}/>}
-        {!_.isEmpty(label) && (
-          <Reanimated.Text style={[styles.tabItemLabel, this.getLabelStyle()]}>
-            {uppercase ? _.toUpper(label) : label}
-          </Reanimated.Text>
-        )}
-        {badge && <Badge backgroundColor={Colors.red30} size={'default'} {...badge} containerStyle={styles.badge}/>}
-      </TouchableOpacity>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  tabItem: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: Spacings.s4
-  },
-  tabItemLabel: {
-    ...Typography.text80
-  },
-  tabItemIconWithLabel: {
-    marginRight: 10
-  },
-  badge: {
-    marginLeft: Spacings.s1
-  }
-});
diff --git a/src/components/tabController/TabBarItem.tsx b/src/components/tabController/TabBarItem.tsx
new file mode 100644
index 0000000000..80029118d4
--- /dev/null
+++ b/src/components/tabController/TabBarItem.tsx
@@ -0,0 +1,324 @@
+// TODO: support commented props
+import React, {PureComponent} from 'react';
+import {
+  StyleSheet,
+  /* processColor, */ TextStyle,
+  LayoutRectangle,
+  LayoutChangeEvent,
+  StyleProp,
+  ViewStyle
+} from 'react-native';
+import _ from 'lodash';
+import Reanimated from 'react-native-reanimated';
+import {State} from 'react-native-gesture-handler';
+import {interpolateColor} from 'react-native-redash';
+import {Colors, Typography, Spacings} from '../../style';
+import Badge, {BadgeProps, BADGE_SIZES} from '../../components/badge';
+import {TouchableOpacity} from '../../incubator';
+
+const {cond, eq, call, block, event, and} = Reanimated;
+
+const DEFAULT_LABEL_COLOR = Colors.black;
+const DEFAULT_SELECTED_LABEL_COLOR = Colors.blue30;
+
+export interface TabControllerItemProps {
+  /**
+   * label of the tab
+   */
+  label?: string;
+  /**
+   * custom label style
+   */
+  labelStyle?: TextStyle;
+  /**
+   * custom selected label style
+   */
+  selectedLabelStyle?: TextStyle;
+  /**
+   * the default label color
+   */
+  labelColor?: string;
+  /**
+   * the selected label color
+   */
+  selectedLabelColor?: string;
+  /**
+   * icon of the tab
+   */
+  icon?: number;
+  /**
+   * icon tint color
+   */
+  iconColor?: string;
+  /**
+   * icon selected tint color
+   */
+  selectedIconColor?: string;
+  /**
+   * Badge component props to display next the item label
+   */
+  badge?: BadgeProps;
+  /**
+   * maximun number of lines the label can break
+   */
+  // maxLines?: number;
+  /**
+   * whether the tab will have a divider on its right
+   */
+  // showDivider?: boolean;
+  /**
+   * A fixed width for the item
+   */
+  width?: number;
+  /**
+   * ignore of the tab
+   */
+  ignore?: boolean;
+  /**
+   * callback for when pressing a tab
+   */
+  onPress?: (index: number) => void;
+  /**
+   * whether to change the text to uppercase
+   */
+  uppercase?: boolean;
+  /**
+   * The active opacity when pressing a tab
+   */
+  activeOpacity?: number;
+  /**
+   * TODO: rename to feedbackColor
+   * Apply background color on press for TouchableOpacity
+   */
+  activeBackgroundColor?: string;
+  /**
+   * Pass custom style
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Used as a testing identifier
+   */
+  testID?: string;
+}
+
+interface Props extends TabControllerItemProps {
+  index: number;
+  targetPage: any; // TODO: typescript?
+  state: State;
+  currentPage: Reanimated.Adaptable<number>;
+  onLayout: (layout: Partial<LayoutRectangle>, index: number) => void;
+}
+
+/**
+ * @description: TabController's TabBarItem
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
+ * @notes: Must be rendered as a direct child of TabController.TabBar.
+ */
+export default class TabBarItem extends PureComponent<Props> {
+  static displayName = 'TabController.TabBarItem';
+
+  static defaultProps = {
+    activeOpacity: 1,
+    onPress: _.noop
+  };
+
+  private itemWidth?: number;
+  private itemRef = React.createRef<any>();
+
+  constructor(props: Props) {
+    super(props);
+
+    this.itemWidth = this.props.width;
+
+    if (this.itemWidth) {
+      const {index, onLayout} = this.props;
+      onLayout({width: this.itemWidth}, index);
+    }
+  }
+
+  onStateChange = event(
+    [
+      {
+        nativeEvent: {state: this.props.state}
+      }
+    ],
+    {useNativeDriver: true}
+  );
+
+  onLayout = ({
+    nativeEvent: {
+      layout: {width}
+    }
+  }: LayoutChangeEvent) => {
+    const {index, onLayout} = this.props;
+    if (!this.itemWidth && this.itemRef && this.itemRef.current) {
+      this.itemWidth = width;
+      // @ts-ignore
+      this.itemRef.current.setNativeProps({style: {width, paddingHorizontal: null, flex: null}});
+      if (onLayout) {
+        onLayout({width}, index);
+      }
+    }
+  };
+
+  onPress = () => {
+    const {index, onPress} = this.props;
+    onPress?.(index);
+  };
+
+  getItemStyle() {
+    const {state, style: propsStyle, activeOpacity = TabBarItem.defaultProps.activeOpacity} = this.props;
+    const opacity = block([
+      cond(eq(state, State.END), call([], this.onPress)),
+      cond(eq(state, State.BEGAN), activeOpacity, 1)
+    ]);
+
+    const style: any = {
+      opacity
+    };
+
+    if (this.props.width) {
+      style.flex = undefined;
+      style.width = this.itemWidth;
+      style.paddingHorizontal = undefined;
+    }
+
+    return [style, propsStyle];
+  }
+
+  getLabelStyle() {
+    const {
+      index,
+      currentPage,
+      targetPage,
+      labelColor,
+      selectedLabelColor,
+      ignore,
+      labelStyle,
+      selectedLabelStyle
+    } = this.props;
+
+    let fontWeight, letterSpacing, fontFamily;
+
+    if (labelStyle?.fontWeight || selectedLabelStyle?.fontWeight) {
+      fontWeight = cond(
+        // @ts-ignore TODO: typescript - add or delete and?
+        and(eq(targetPage, index) /* , defined(itemWidth) */),
+        selectedLabelStyle?.fontWeight || 'normal',
+        labelStyle?.fontWeight || 'normal'
+      );
+    }
+
+    if (labelStyle?.letterSpacing || selectedLabelStyle?.letterSpacing) {
+      letterSpacing = cond(
+        // @ts-ignore TODO: typescript - add or delete and?
+        and(eq(targetPage, index) /* , defined(itemWidth) */),
+        selectedLabelStyle?.letterSpacing || 0,
+        labelStyle?.letterSpacing || 0
+      );
+    }
+
+    if (labelStyle?.fontFamily || selectedLabelStyle?.fontFamily) {
+      fontFamily = cond(
+        // @ts-ignore TODO: typescript - add or delete and?
+        and(eq(targetPage, index) /* , defined(itemWidth) */),
+        // @ts-ignore
+        selectedLabelStyle.fontFamily,
+        labelStyle?.fontFamily
+      );
+    }
+
+    const inactiveColor = labelColor || DEFAULT_LABEL_COLOR;
+    const activeColor = !ignore ? selectedLabelColor || DEFAULT_SELECTED_LABEL_COLOR : inactiveColor;
+
+    // Animated color
+    const color = interpolateColor(currentPage, {
+      inputRange: [index - 1, index, index + 1],
+      outputRange: [inactiveColor, activeColor, inactiveColor]
+    });
+
+    return [
+      labelStyle,
+      _.omitBy(
+        {
+          fontFamily,
+          fontWeight,
+          letterSpacing,
+          color
+        },
+        _.isUndefined
+      )
+    ];
+  }
+
+  getIconStyle() {
+    const {index, currentPage, iconColor, selectedIconColor, labelColor, selectedLabelColor, ignore} = this.props;
+
+    const activeColor = selectedIconColor || selectedLabelColor || DEFAULT_SELECTED_LABEL_COLOR;
+    const inactiveColor = iconColor || labelColor || DEFAULT_LABEL_COLOR;
+
+    const tintColor = cond(
+      eq(currentPage, index),
+      // TODO: using processColor here broke functionality,
+      // not using it seem to not be very performant
+      activeColor,
+      ignore ? activeColor : inactiveColor
+    );
+
+    return {
+      tintColor
+    };
+  }
+
+  render() {
+    const {label, icon, badge, state, uppercase, activeOpacity, activeBackgroundColor, testID} = this.props;
+
+    return (
+      <TouchableOpacity
+        ref={this.itemRef}
+        pressState={state}
+        style={[styles.tabItem, this.getItemStyle()]}
+        onLayout={this.onLayout}
+        feedbackColor={activeBackgroundColor}
+        activeOpacity={activeOpacity}
+        onPress={this.onPress}
+        testID={testID}
+      >
+        {icon && (
+          <Reanimated.Image
+            source={icon}
+            style={[!_.isUndefined(label) && styles.tabItemIconWithLabel, this.getIconStyle()]}
+          />
+        )}
+        {!_.isEmpty(label) && (
+          <Reanimated.Text style={[styles.tabItemLabel, this.getLabelStyle()]}>
+            {uppercase ? _.toUpper(label) : label}
+          </Reanimated.Text>
+        )}
+        {badge && (
+          // @ts-ignore
+          <Badge backgroundColor={Colors.red30} size={BADGE_SIZES.default} {...badge} containerStyle={styles.badge}/>
+        )}
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  tabItem: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: Spacings.s4
+  },
+  tabItemLabel: {
+    ...Typography.text80
+  },
+  tabItemIconWithLabel: {
+    marginRight: 10
+  },
+  badge: {
+    marginLeft: Spacings.s1
+  }
+});
diff --git a/src/components/tabController/TabPage.js b/src/components/tabController/TabPage.tsx
similarity index 60%
rename from src/components/tabController/TabPage.js
rename to src/components/tabController/TabPage.tsx
index 4936364ec2..7c7cd811e6 100644
--- a/src/components/tabController/TabPage.js
+++ b/src/components/tabController/TabPage.tsx
@@ -1,6 +1,5 @@
 import React, {PureComponent} from 'react';
 import {StyleSheet} from 'react-native';
-import PropTypes from 'prop-types';
 import Reanimated from 'react-native-reanimated';
 import _ from 'lodash';
 import TabBarContext from './TabBarContext';
@@ -8,35 +7,40 @@ import {Constants} from '../../helpers';
 
 const {Code, Value, cond, set, and, call, block, eq} = Reanimated;
 
+export interface TabControllerPageProps {
+  /**
+   * The index of the the TabPage
+   */
+  index: number;
+  /**
+   * Whether this page should be loaded lazily
+   */
+  lazy?: boolean;
+  /**
+   * How long to wait till lazy load complete (good for showing loader screens)
+   */
+  lazyLoadTime?: number;
+  /**
+   * Render a custom loading page when lazy loading
+   */
+  renderLoading?: () => JSX.Element;
+  /**
+   * Used as a testing identifier
+   */
+  testID?: string;
+}
+
 /**
  * @description: TabController's TabPage
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
  */
-export default class TabPage extends PureComponent {
+export default class TabPage extends PureComponent<TabControllerPageProps> {
   static displayName = 'TabController.TabPage';
 
   static contextType = TabBarContext;
 
-  static propTypes = {
-    /**
-     * The index of the the TabPage
-     */
-    index: PropTypes.number.isRequired,
-    /**
-     * Whether this page should be loaded lazily
-     */
-    lazy: PropTypes.bool,
-    /**
-     * How long to wait till lazy load complete (good for showing loader screens)
-     */
-    lazyLoadTime: PropTypes.number,
-    /**
-     * Render a custom loading page when lazy loading
-     */
-    renderLoading: PropTypes.elementType
-  };
-
   static defaultProps = {
+    lazy: false,
     activeOpacity: 0.6,
     lazyLoadTime: 300,
     renderLoading: _.noop
@@ -64,16 +68,25 @@ export default class TabPage extends PureComponent {
     }, this.props.lazyLoadTime); // tab bar indicator transition time
   };
 
-  renderCodeBlock = () => {
+  renderCodeBlock = _.memoize(() => {
     const {targetPage} = this.context;
     const {index, lazy} = this.props;
-    return block([
-      cond(and(eq(targetPage, index), lazy, eq(this._loaded, 0)), [set(this._loaded, 1), call([], this.lazyLoad)]),
-      cond(eq(targetPage, index),
-        [set(this._opacity, 1), set(this._zIndex, 1)],
-        [set(this._opacity, 0), set(this._zIndex, 0)])
-    ]);
-  };
+    return (
+      <Code>
+        {() =>
+          block([
+            cond(and(eq(targetPage, index), Number(lazy), eq(this._loaded, 0)), [
+              set(this._loaded, 1),
+              call([], this.lazyLoad)
+            ]),
+            cond(eq(targetPage, index),
+              [set(this._opacity, 1), set(this._zIndex, 1)],
+              [set(this._opacity, 0), set(this._zIndex, 0)])
+          ])
+        }
+      </Code>
+    );
+  });
 
   render() {
     const {renderLoading, testID} = this.props;
@@ -81,11 +94,9 @@ export default class TabPage extends PureComponent {
 
     return (
       <Reanimated.View style={this._pageStyle} testID={testID}>
-        {!loaded && renderLoading()}
+        {!loaded && renderLoading?.()}
         {loaded && this.props.children}
-        <Code>
-          {this.renderCodeBlock}
-        </Code>
+        {this.renderCodeBlock()}
       </Reanimated.View>
     );
   }
diff --git a/src/components/tabController/index.js b/src/components/tabController/index.js
deleted file mode 100644
index 5303999e91..0000000000
--- a/src/components/tabController/index.js
+++ /dev/null
@@ -1,207 +0,0 @@
-// TODO: support commented props
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import Reanimated, {Easing} from 'react-native-reanimated';
-import {State} from 'react-native-gesture-handler';
-import {timing, fract, between} from 'react-native-redash';
-import {Constants} from '../../helpers';
-import {asBaseComponent} from '../../commons';
-import TabBarContext from './TabBarContext';
-import TabBar from './TabBar';
-import TabBarItem from './TabBarItem';
-import TabPage from './TabPage';
-import PageCarousel from './PageCarousel';
-
-const {
-  and,
-  abs,
-  cond,
-  call,
-  Code,
-  Clock,
-  clockRunning,
-  diff,
-  eq,
-  floor,
-  lessThan,
-  neq,
-  not,
-  set,
-  Value,
-  block,
-  onChange,
-  interpolate,
-  round,
-  multiply
-} = Reanimated;
-
-/**
- * @description: A performant solution for a tab controller with lazy load mechanism
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
- * @notes: This component is based on react-native-gesture-handler
- * @important: On Android, if using react-native-navigation, make sure to wrap your screen with gestureHandlerRootHOC
- * @importantLink: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation
- */
-class TabController extends Component {
-  static displayName = 'TabController';
-  static contextType = TabBarContext;
-
-  static propTypes = {
-    /**
-     * The list of tab bar items
-     */
-    items: PropTypes.arrayOf(PropTypes.shape(TabBarItem.propTypes)),
-    /**
-     * Initial selected index
-     */
-    selectedIndex: PropTypes.number,
-    /**
-     * callback for when index has change (will not be called on ignored items)
-     */
-    onChangeIndex: PropTypes.func,
-    /**
-     * When using TabController.PageCarousel this should be turned on
-     */
-    asCarousel: PropTypes.bool,
-    /**
-     * Pass for custom carousel page width
-     */
-    carouselPageWidth: PropTypes.number
-  };
-
-  static defaultProps = {
-    selectedIndex: 0,
-    activeOpacity: 0.2
-  };
-
-  constructor(props) {
-    super(props);
-
-    let itemStates = [];
-    let ignoredItems = [];
-    if (props.items) {
-      const itemsCount = _.chain(props.items).filter(item => !item.ignore).size().value();
-      itemStates = _.times(itemsCount, () => new Value(State.UNDETERMINED));
-      ignoredItems = _.filter(props.items, item => item.ignore);
-    }
-
-    this.state = {
-      selectedIndex: this.props.selectedIndex,
-      asCarousel: this.props.asCarousel,
-      pageWidth: this.pageWidth,
-      // items
-      items: props.items,
-      itemStates,
-      ignoredItems,
-      // animated values
-      targetPage: new Value(this.props.selectedIndex),
-      currentPage: new Value(this.props.selectedIndex),
-      carouselOffset: new Value(this.props.selectedIndex * Math.round(this.pageWidth)),
-      containerWidth: new Value(this.pageWidth),
-      // callbacks
-      registerTabItems: this.registerTabItems,
-      onChangeIndex: this.props.onChangeIndex
-    };
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (!_.isUndefined(nextProps.carouselPageWidth) && nextProps.carouselPageWidth !== prevState.pageWidth) {
-      return {
-        pageWidth: nextProps.carouselPageWidth
-      };
-    }
-    return null;
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.pageWidth !== this.state.pageWidth) {
-      this.state.containerWidth.setValue(this.state.pageWidth);
-    }
-  }
-
-  get pageWidth() {
-    return this.props.carouselPageWidth || Constants.screenWidth;
-  }
-
-  registerTabItems = (tabItemsCount, ignoredItems) => {
-    const itemStates = _.times(tabItemsCount, () => new Value(State.UNDETERMINED));
-    this.setState({itemStates, ignoredItems});
-  };
-
-  onPageChange = ([index]) => {
-    _.invoke(this.props, 'onChangeIndex', index);
-  };
-
-  renderCodeBlock = () => {
-    const {itemStates, ignoredItems, currentPage, targetPage, carouselOffset, containerWidth} = this.state;
-    const {selectedIndex} = this.props;
-    const clock = new Clock();
-    const fromPage = new Value(selectedIndex);
-    const toPage = new Value(selectedIndex);
-    const isAnimating = new Value(0);
-    const isScrolling = new Value(0);
-
-    return block([
-      /* Page change by TabBar */
-      ..._.map(itemStates, (state, index) => {
-        const ignoredItem = _.includes(ignoredItems, index);
-        return [
-          onChange(state,
-            cond(and(eq(state, State.END), !ignoredItem), [
-              set(fromPage, toPage),
-              set(toPage, index),
-              set(targetPage, index)
-            ]))
-        ];
-      }),
-
-      // Animate currentPage to its target
-      cond(neq(currentPage, toPage), [
-        set(isAnimating, 1),
-        set(currentPage,
-          timing({clock, from: fromPage, to: toPage, duration: 280, easing: Easing.bezier(0.34, 1.3, 0.64, 1)}))
-      ]),
-      // Set isAnimating flag off
-      cond(and(eq(isAnimating, 1), not(clockRunning(clock))), set(isAnimating, 0)),
-
-      /* Page change by Carousel scroll */
-      onChange(carouselOffset, [
-        set(isScrolling, lessThan(round(abs(diff(carouselOffset))), round(containerWidth))),
-        cond(and(not(isAnimating)), [
-          set(currentPage,
-            interpolate(round(carouselOffset), {
-              inputRange: itemStates.map((v, i) => round(multiply(i, containerWidth))),
-              outputRange: itemStates.map((v, i) => i)
-            })),
-          set(toPage, currentPage)
-        ])
-      ]),
-      // Update/Sync target page when scrolling is done
-      cond(and(eq(isScrolling, 1), eq(floor(abs(diff(carouselOffset))), 0)), [
-        set(isScrolling, 0),
-        cond(not(between(fract(currentPage), 0.1, 0.9, 1)), set(targetPage, round(currentPage)))
-      ]),
-
-      /* Invoke index change */
-      onChange(targetPage, call([targetPage], this.onPageChange))
-    ]);
-  };
-
-  render() {
-    const {itemStates} = this.state;
-
-    return (
-      <TabBarContext.Provider value={this.state}>
-        {this.props.children}
-        {!_.isEmpty(itemStates) && <Code>{this.renderCodeBlock}</Code>}
-      </TabBarContext.Provider>
-    );
-  }
-}
-
-TabController.TabBar = TabBar;
-TabController.TabBarItem = TabBarItem;
-TabController.TabPage = TabPage;
-TabController.PageCarousel = PageCarousel;
-export default asBaseComponent(TabController);
diff --git a/src/components/tabController/index.tsx b/src/components/tabController/index.tsx
new file mode 100644
index 0000000000..6b2c60fb3d
--- /dev/null
+++ b/src/components/tabController/index.tsx
@@ -0,0 +1,249 @@
+// TODO: support commented props
+import React, {Component} from 'react';
+import _ from 'lodash';
+import Reanimated, {Easing} from 'react-native-reanimated';
+import {State} from 'react-native-gesture-handler';
+import {timing, fract, between} from 'react-native-redash';
+import {Constants} from '../../helpers';
+import {asBaseComponent} from '../../commons/new';
+import TabBarContext from './TabBarContext';
+import TabBar from './TabBar';
+import TabBarItem, {TabControllerItemProps} from './TabBarItem';
+import TabPage from './TabPage';
+import PageCarousel from './PageCarousel';
+export {TabControllerItemProps};
+
+const {
+  and,
+  abs,
+  cond,
+  call,
+  Code,
+  Clock,
+  clockRunning,
+  diff,
+  eq,
+  floor,
+  greaterThan,
+  lessThan,
+  neq,
+  not,
+  set,
+  Value,
+  block,
+  onChange,
+  interpolate,
+  round,
+  multiply
+} = Reanimated;
+
+export interface TabControllerProps {
+  /**
+   * The list of tab bar items
+   */
+  items: TabControllerItemProps[];
+  /**
+   * Initial selected index
+   */
+  selectedIndex: number;
+  /**
+   * callback for when index has change (will not be called on ignored items)
+   */
+  onChangeIndex?: (index: number) => void;
+  /**
+   * When using TabController.PageCarousel this should be turned on
+   */
+  asCarousel?: boolean;
+  /**
+   * Pass for custom carousel page width
+   */
+  carouselPageWidth?: number;
+}
+
+interface StateProps {
+  selectedIndex: number;
+  asCarousel?: boolean;
+  pageWidth: number;
+  // items
+  items: TabControllerProps['items'];
+  itemStates: any[]; // TODO: typescript?
+  ignoredItems: any[]; // TODO: typescript?
+  // animated values
+  targetPage: any; // TODO: typescript?
+  currentPage: any; // TODO: typescript?
+  carouselOffset: any; // TODO: typescript?
+  containerWidth: any; // TODO: typescript?
+  // callbacks
+  registerTabItems: (tabItemsCount: number, ignoredItems: StateProps['ignoredItems']) => void;
+  onChangeIndex?: (index: number) => void;
+}
+
+/**
+ * @description: A performant solution for a tab controller with lazy load mechanism
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
+ * @notes: This component is based on react-native-gesture-handler
+ * @important: On Android, if using react-native-navigation, make sure to wrap your screen with gestureHandlerRootHOC
+ * @importantLink: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation
+ */
+class TabController extends Component<TabControllerProps, StateProps> {
+  static displayName = 'TabController';
+  static contextType = TabBarContext;
+
+  static TabBar: typeof TabBar;
+  static TabBarItem: typeof TabBarItem;
+  static TabPage: typeof TabPage;
+  static PageCarousel: typeof PageCarousel;
+
+  static defaultProps = {
+    selectedIndex: 0,
+    activeOpacity: 0.2
+  };
+
+  constructor(props: TabControllerProps) {
+    super(props);
+
+    let itemStates: any[] = []; // TODO: typescript?
+    let ignoredItems: any[] = []; // TODO: typescript?
+    if (props.items) {
+      const itemsCount = _.chain(props.items)
+        .filter(item => !item.ignore)
+        .size()
+        .value();
+      itemStates = _.times(itemsCount, () => new Value(State.UNDETERMINED));
+      ignoredItems = _.filter<TabControllerItemProps[]>(props.items, (item: TabControllerItemProps) => item.ignore);
+    }
+
+    this.state = {
+      selectedIndex: this.props.selectedIndex,
+      asCarousel: this.props.asCarousel,
+      pageWidth: this.pageWidth,
+      // items
+      items: props.items,
+      itemStates,
+      ignoredItems,
+      // animated values
+      targetPage: new Value(this.props.selectedIndex),
+      currentPage: new Value(this.props.selectedIndex),
+      carouselOffset: new Value(this.props.selectedIndex * Math.round(this.pageWidth)),
+      containerWidth: new Value(this.pageWidth),
+      // callbacks
+      registerTabItems: this.registerTabItems,
+      onChangeIndex: this.props.onChangeIndex
+    };
+  }
+
+  static getDerivedStateFromProps(nextProps: TabControllerProps, prevState: StateProps) {
+    if (!_.isUndefined(nextProps.carouselPageWidth) && nextProps.carouselPageWidth !== prevState.pageWidth) {
+      return {
+        pageWidth: nextProps.carouselPageWidth
+      };
+    }
+    return null;
+  }
+
+  componentDidUpdate(_prevProps: TabControllerProps, prevState: StateProps) {
+    if (prevState.pageWidth !== this.state.pageWidth) {
+      this.state.containerWidth.setValue(this.state.pageWidth);
+    }
+  }
+
+  get pageWidth() {
+    return this.props.carouselPageWidth || Constants.screenWidth;
+  }
+
+  registerTabItems = (tabItemsCount: number, ignoredItems: StateProps['ignoredItems']) => {
+    const itemStates = _.times(tabItemsCount, () => new Value(State.UNDETERMINED));
+    this.setState({itemStates, ignoredItems});
+  };
+
+  onPageChange = ([index]: readonly number[]) => {
+    _.invoke(this.props, 'onChangeIndex', index);
+  };
+
+  renderCodeBlock = _.memoize(() => {
+    const {itemStates, ignoredItems, currentPage, targetPage, carouselOffset, containerWidth} = this.state;
+    const {selectedIndex} = this.props;
+    const clock = new Clock();
+    const fromPage = new Value(selectedIndex);
+    const toPage = new Value(selectedIndex);
+    const isAnimating = new Value(0);
+    const isScrolling = new Value(0);
+    // temps
+    const _carouselOffsetDiff = new Value(0);
+
+    return (
+      <Code>
+        {() =>
+          block([
+            /* Page change by TabBar */
+            ..._.map(itemStates, (state, index) => {
+              const ignoredItem = _.includes(ignoredItems, index);
+              return [
+                onChange(state,
+                  // @ts-ignore TODO: typescript?
+                  cond(and(eq(state, State.END), !ignoredItem), [
+                    set(fromPage, toPage),
+                    set(toPage, index),
+                    set(targetPage, index)
+                  ]))
+              ];
+            }),
+
+            // Animate currentPage to its target
+            cond(neq(currentPage, toPage), [
+              set(isAnimating, 1),
+              set(currentPage,
+                timing({clock, from: fromPage, to: toPage, duration: 280, easing: Easing.bezier(0.34, 1.3, 0.64, 1)}))
+            ]),
+            // Set isAnimating flag off
+            cond(and(eq(isAnimating, 1), not(clockRunning(clock))), set(isAnimating, 0)),
+
+            /* Page change by Carousel scroll */
+            onChange(carouselOffset, [
+              set(_carouselOffsetDiff, round(abs(diff(carouselOffset)))),
+              set(isScrolling,
+                and(lessThan(_carouselOffsetDiff, round(containerWidth)), greaterThan(_carouselOffsetDiff, 0))),
+              cond(not(isAnimating), [
+                set(currentPage,
+                  interpolate(round(carouselOffset), {
+                    inputRange: itemStates.map((_v, i) => round(multiply(i, containerWidth))),
+                    outputRange: itemStates.map((_v, i) => i)
+                  })),
+                set(toPage, currentPage)
+              ])
+            ]),
+            // Update/Sync target page when scrolling is done
+            cond(and(eq(isScrolling, 1), eq(floor(abs(diff(carouselOffset))), 0)), [
+              set(isScrolling, 0),
+              cond(not(between(fract(currentPage), 0.1, 0.9, true)), set(targetPage, round(currentPage)))
+            ]),
+
+            /* Invoke index change */
+            onChange(targetPage, call([targetPage], this.onPageChange))
+          ])
+        }
+      </Code>
+    );
+  });
+
+  render() {
+    const {itemStates} = this.state;
+
+    return (
+      <TabBarContext.Provider value={this.state}>
+        {this.props.children}
+        {!_.isEmpty(itemStates) && this.renderCodeBlock()}
+      </TabBarContext.Provider>
+    );
+  }
+}
+
+TabController.TabBar = TabBar;
+TabController.TabBarItem = TabBarItem;
+TabController.TabPage = TabPage;
+TabController.PageCarousel = PageCarousel;
+export default asBaseComponent<
+  TabControllerProps,
+  typeof TabController
+  //@ts-ignore typescript - will be fixed when moved to functional component
+>(TabController);
diff --git a/src/components/textField/index.js b/src/components/textField/index.js
index 7fa3579e05..b0d52f1a5d 100644
--- a/src/components/textField/index.js
+++ b/src/components/textField/index.js
@@ -215,7 +215,7 @@ export default class TextField extends BaseInput {
     }
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(_prevProps, prevState) {
     if (_.isEmpty(prevState.value) !== _.isEmpty(this.state.value) || prevState.focused !== this.state.focused) {
       this.updateFloatingPlaceholderState();
     }
@@ -749,7 +749,7 @@ export default class TextField extends BaseInput {
   };
 }
 
-function createStyles({centered, multiline, title, floatingPlaceholder}, rightItemTopPadding = 0) {
+function createStyles({centered, multiline}, rightItemTopPadding = 0) {
   const itemTopPadding = Constants.isIOS ? (rightItemTopPadding - 3) : (rightItemTopPadding - 1);
 
   return StyleSheet.create({
diff --git a/src/components/toast/index.js b/src/components/toast/index.js
index fe2730eef7..c4bc0fbb9e 100644
--- a/src/components/toast/index.js
+++ b/src/components/toast/index.js
@@ -54,7 +54,7 @@ export default class Toast extends PureBaseComponent {
     /**
      * a left icon
      */
-    icon: PropTypes.number,
+    icon: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
     /**
      * a single action for the user
      */
diff --git a/src/components/view/index.tsx b/src/components/view/index.tsx
index a42820430a..a73bb2433c 100644
--- a/src/components/view/index.tsx
+++ b/src/components/view/index.tsx
@@ -1,6 +1,12 @@
 import React, {PureComponent} from 'react';
 import {View as RNView, SafeAreaView, Animated, ViewProps as RNViewProps, StyleProp, ViewStyle} from 'react-native';
-import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps, ContainerModifiers} from '../../commons/new';
+import {
+  asBaseComponent,
+  forwardRef,
+  BaseComponentInjectedProps,
+  ForwardRefInjectedProps,
+  ContainerModifiers
+} from '../../commons/new';
 import Constants from '../../helpers/Constants';
 
 export interface ViewProps extends Omit<RNViewProps, 'style'>, ContainerModifiers {
@@ -90,11 +96,13 @@ class View extends PureComponent<PropsTypes, ViewState> {
     const {
       modifiers,
       style,
+      /* eslint-disable */
       left,
       top,
       right,
       bottom,
       flex: propsFlex,
+      /* eslint-enable */
       forwardedRef,
       inaccessible,
       ...others
diff --git a/src/helpers/Constants.ts b/src/helpers/Constants.ts
index c205d132a8..902e8dc1ad 100644
--- a/src/helpers/Constants.ts
+++ b/src/helpers/Constants.ts
@@ -1,10 +1,10 @@
-import {Platform, Dimensions, NativeModules, I18nManager, AccessibilityInfo, AccessibilityEvent} from 'react-native';
+import {Platform, Dimensions, NativeModules, I18nManager, AccessibilityInfo, AccessibilityChangeEvent} from 'react-native';
 
 
 export enum orientations {
   PORTRAIT = 'portrait',
   LANDSCAPE = 'landscape'
-};
+}
 
 const isAndroid: boolean = Platform.OS === 'android';
 const isIOS: boolean = Platform.OS === 'ios';
@@ -49,7 +49,7 @@ const accessibility = {
   isScreenReaderEnabled: false
 };
 
-function handleScreenReaderChanged(isScreenReaderEnabled: AccessibilityEvent) {
+function handleScreenReaderChanged(isScreenReaderEnabled: AccessibilityChangeEvent) {
   accessibility.isScreenReaderEnabled = isScreenReaderEnabled as boolean;
 }
 
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 45e544a674..1d59e39c80 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1 +1,2 @@
-export {default as useToggleValue} from './useToggleValue';
\ No newline at end of file
+export {default as useToggleValue} from './useToggleValue';
+export {default as useDidUpdate} from './useDidUpdate';
diff --git a/src/hooks/useDidUpdate/__tests__/useDidUpdate.spec.js b/src/hooks/useDidUpdate/__tests__/useDidUpdate.spec.js
new file mode 100644
index 0000000000..7aade550aa
--- /dev/null
+++ b/src/hooks/useDidUpdate/__tests__/useDidUpdate.spec.js
@@ -0,0 +1,69 @@
+import {renderHook} from '@testing-library/react-hooks';
+import useDidUpdate from '../index';
+
+describe('useDidUpdate hook tests', () => {
+  it('Expect action to not be called when the dependencies array value hasn\'t change', () => {
+    const action = jest.fn();
+    const dependencies = [false, 'false'];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    rerender();
+    rerender();
+    rerender();
+    expect(action.mock.calls.length).toBe(0);
+  });
+
+  it('Expect action to be called when dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, 'YES YES', 1];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, 'NO NO', 1];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+  });
+
+  it('Expect action to be called when dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, 'YES YES', 1];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, 'NO NO', 1];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+  });
+
+  it('Expect action to be called when dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, 'YES YES', 1];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, 'NO NO', 1];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+  });
+
+  it('Expect action to be called when object value in dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, [1, 2], {name: 'AAA', address: {number: 10}}];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, [1, 2], {name: 'BBB'}];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+    
+    dependencies = [false, [1, 2], {name: 'AAA', address: {number: 20}}];
+    rerender();
+    expect(action.mock.calls.length).toBe(2);
+  });
+
+  it('Expect action to be called when value in array dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, [1, [2]], {name: 'AAA'}];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, [1, [3]], {name: 'AAA', address: {number: 20}}];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+  });
+});
diff --git a/src/hooks/useDidUpdate/index.ts b/src/hooks/useDidUpdate/index.ts
new file mode 100644
index 0000000000..9286a7c907
--- /dev/null
+++ b/src/hooks/useDidUpdate/index.ts
@@ -0,0 +1,21 @@
+import {useEffect, useRef} from 'react';
+
+/**
+ * This hook avoid calling useEffect on the initial value of his dependency array
+ */
+const useDidUpdate = (callback: () => void, dep: [any]) => {
+  const isMounted = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      return;
+    }
+    callback();
+  }, [dep]);
+
+  useEffect(() => {
+    isMounted.current = true;
+  }, []);
+};
+
+export default useDidUpdate;
diff --git a/src/hooks/useToggleValue/index.ts b/src/hooks/useToggleValue/index.ts
index 058786a80b..7aeb2fcc8c 100644
--- a/src/hooks/useToggleValue/index.ts
+++ b/src/hooks/useToggleValue/index.ts
@@ -10,7 +10,7 @@ const useToggleValue = (initial: any, second?: any) => {
   const toggle = () => {
     if (_.isBoolean(initialValue)) {
       setValue(!initialValue);
-    } else if (value == initialValue) {
+    } else if (value === initialValue) {
       setValue(secondValue);
     } else {
       setValue(initialValue);
diff --git a/src/incubator/TabController/TabBar.js b/src/incubator/TabController/TabBar.js
index 03f6e15e71..5a3a079548 100644
--- a/src/incubator/TabController/TabBar.js
+++ b/src/incubator/TabController/TabBar.js
@@ -194,7 +194,7 @@ class TabBar extends PureComponent {
     if (!_.includes(this._itemsWidths, null)) {
       const {selectedIndex} = this.context;
       const itemsOffsets = _.map(this._itemsWidths,
-        (w, index) => INDICATOR_INSET + _.sum(_.take(this._itemsWidths, index)));
+        (_w, index) => INDICATOR_INSET + _.sum(_.take(this._itemsWidths, index)));
       const itemsWidths = _.map(this._itemsWidths, width => width - INDICATOR_INSET * 2);
 
       this.setState({itemsWidths, itemsOffsets});
@@ -295,13 +295,13 @@ class TabBar extends PureComponent {
     if (asCarousel) {
       nodes.push(set(this._indicatorOffset,
         interpolate(carouselOffset, {
-          inputRange: itemsOffsets.map((value, index) => index * Constants.screenWidth),
+          inputRange: itemsOffsets.map((_value, index) => index * Constants.screenWidth),
           outputRange: itemsOffsets,
           extrapolate: Extrapolate.CLAMP
         })),
       set(this._indicatorWidth,
         interpolate(carouselOffset, {
-          inputRange: itemsWidths.map((value, index) => index * Constants.screenWidth),
+          inputRange: itemsWidths.map((_value, index) => index * Constants.screenWidth),
           outputRange: itemsWidths,
           extrapolate: Extrapolate.CLAMP
         })));
@@ -403,7 +403,7 @@ function runIndicatorTimer(clock, currentPage, values) {
   };
 
   return block([
-    ..._.map(values, (value, index) => {
+    ..._.map(values, (_value, index) => {
       return cond(and(eq(currentPage, index), neq(config.toValue, index)), [
         set(state.finished, 0),
         set(state.time, 0),
diff --git a/src/incubator/TabController/TabBarItem.js b/src/incubator/TabController/TabBarItem.js
index ace35dbead..508c167749 100644
--- a/src/incubator/TabController/TabBarItem.js
+++ b/src/incubator/TabController/TabBarItem.js
@@ -42,7 +42,7 @@ export default class TabBarItem extends PureComponent {
     /**
      * icon of the tab
      */
-    icon: PropTypes.number,
+    icon: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
     /**
      * icon tint color
      */
diff --git a/src/incubator/TextField/index.tsx b/src/incubator/TextField/index.tsx
index 79e340cd1d..72e8ab3b1c 100644
--- a/src/incubator/TextField/index.tsx
+++ b/src/incubator/TextField/index.tsx
@@ -25,10 +25,11 @@ import ValidationMessage, {ValidationMessageProps} from './ValidationMessage';
 import Label, {LabelProps} from './Label';
 import FieldContext from './FieldContext';
 import useFieldState /* , FieldStateProps */ from './useFieldState';
+import usePreset from './usePreset';
 import FloatingPlaceholder, {FloatingPlaceholderProps} from './FloatingPlaceholder';
 import CharCounter, {CharCounterProps} from './CharCounter';
 
-type TextFieldProps = MarginModifiers &
+export type TextFieldProps = MarginModifiers &
   PaddingModifiers &
   TypographyModifiers &
   ColorsModifiers &
@@ -83,9 +84,13 @@ type TextFieldProps = MarginModifiers &
      * Container style of the whole component
      */
     containerStyle?: ViewStyle;
+    /**
+     * Predefined preset to use for styling the field
+     */
+    preset?: 'default' | undefined;
   };
 
-type InternalTextFieldProps = TextFieldProps &
+export type InternalTextFieldProps = TextFieldProps &
   // Omit<FieldStateInjectedProps, keyof InputProps> &
   BaseComponentInjectedProps &
   ForwardRefInjectedProps;
@@ -100,43 +105,44 @@ interface StaticMembers {
  * @extendslink: https://reactnative.dev/docs/textinput
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/IncubatorTextFieldScreen.tsx
  */
-const TextField = ({
-  modifiers,
-  // General
-  fieldStyle,
-  containerStyle,
-  floatingPlaceholder,
-  floatingPlaceholderColor,
-  floatingPlaceholderStyle,
-  hint,
-  // Label
-  label,
-  labelColor,
-  labelStyle,
-  labelProps,
-  // Accessory Buttons
-  leadingAccessory,
-  trailingAccessory,
-  // Validation
-  enableErrors, // TODO: rename to enableValidation
-  validationMessage,
-  validationMessageStyle,
-  validationMessagePosition = ValidationMessagePosition.BOTTOM,
-  // Char Counter
-  showCharCounter,
-  charCounterStyle,
-  // Input
-  placeholder,
-  ...props
-}: InternalTextFieldProps) => {
-  const {onFocus, onBlur, onChangeText, fieldState} = useFieldState(props);
+const TextField = (props: InternalTextFieldProps) => {
+  const {
+    modifiers,
+    // General
+    fieldStyle,
+    containerStyle,
+    floatingPlaceholder,
+    floatingPlaceholderColor,
+    floatingPlaceholderStyle,
+    hint,
+    // Label
+    label,
+    labelColor,
+    labelStyle,
+    labelProps,
+    // Accessory Buttons
+    leadingAccessory,
+    trailingAccessory,
+    // Validation
+    enableErrors, // TODO: rename to enableValidation
+    validationMessage,
+    validationMessageStyle,
+    validationMessagePosition = ValidationMessagePosition.BOTTOM,
+    // Char Counter
+    showCharCounter,
+    charCounterStyle,
+    // Input
+    placeholder,
+    ...others
+  } = usePreset(props);
+  const {onFocus, onBlur, onChangeText, fieldState} = useFieldState(others);
 
   const context = useMemo(() => {
-    return {...fieldState, disabled: props.editable === false};
-  }, [fieldState, props.editable]);
+    return {...fieldState, disabled: others.editable === false};
+  }, [fieldState, others.editable]);
 
   const {margins, paddings, typography, color} = modifiers;
-  const typographyStyle = useMemo(() => omit(typography, 'lineHeight') , [typography]);
+  const typographyStyle = useMemo(() => omit(typography, 'lineHeight'), [typography]);
   const colorStyle = useMemo(() => color && {color}, [color]);
 
   return (
@@ -169,8 +175,8 @@ const TextField = ({
                 />
               )}
               <Input
-                {...props}
-                style={[typographyStyle, colorStyle, props.style]}
+                {...others}
+                style={[typographyStyle, colorStyle, others.style]}
                 onFocus={onFocus}
                 onBlur={onBlur}
                 onChangeText={onChangeText}
@@ -190,7 +196,7 @@ const TextField = ({
               retainSpace
             />
           )}
-          {showCharCounter && <CharCounter maxLength={props.maxLength} charCounterStyle={charCounterStyle} />}
+          {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle}/>}
         </View>
       </View>
     </FieldContext.Provider>
diff --git a/src/incubator/TextField/presets/default.ts b/src/incubator/TextField/presets/default.ts
new file mode 100644
index 0000000000..aa66a16ce1
--- /dev/null
+++ b/src/incubator/TextField/presets/default.ts
@@ -0,0 +1,32 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Spacings, Typography} from '../../../style';
+
+const colorByState = {
+  focus: Colors.primary,
+  error: Colors.error,
+  disabled: Colors.grey40
+};
+
+const styles = StyleSheet.create({
+  field: {
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.grey50,
+    paddingBottom: Spacings.s2
+  },
+  input: {
+    ...Typography.text70,
+    lineHeight: undefined,
+    height: Typography?.text70?.lineHeight
+  },
+  floatingPlaceholder: {...Typography.text70}
+});
+
+export default {
+  enableErrors: true,
+  validateOnBlur: true,
+  floatingPlaceholderColor: colorByState,
+  labelColor: colorByState,
+  fieldStyle: styles.field,
+  style: styles.input,
+  floatingPlaceholderStyle: styles.floatingPlaceholder
+};
diff --git a/src/incubator/TextField/useFieldState.ts b/src/incubator/TextField/useFieldState.ts
index 3b52ea893a..e5da5b99aa 100644
--- a/src/incubator/TextField/useFieldState.ts
+++ b/src/incubator/TextField/useFieldState.ts
@@ -32,47 +32,38 @@ export default function useFieldState({
     }
   }, []);
 
-  const validateField = useCallback(
-    (valueToValidate = value) => {
+  const validateField = useCallback((valueToValidate = value) => {
+    const [_isValid, _failingValidatorIndex] = Presenter.validate(valueToValidate, validate);
 
-      const [_isValid, _failingValidatorIndex] = Presenter.validate(valueToValidate, validate);
+    setIsValid(_isValid);
+    setFailingValidatorIndex(_failingValidatorIndex);
+  },
+  [value, validate]);
 
-      setIsValid(_isValid);
-      setFailingValidatorIndex(_failingValidatorIndex);
-    },
-    [value, validate]
-  );
+  const onFocus = useCallback((...args: any) => {
+    setIsFocused(true);
+    _.invoke(props, 'onFocus', ...args);
+  },
+  [props.onFocus]);
 
-  const onFocus = useCallback(
-    (...args: any) => {
-      setIsFocused(true);
-      _.invoke(props, 'onFocus', ...args);
-    },
-    [props.onFocus]
-  );
-
-  const onBlur = useCallback(
-    (...args: any) => {
-      setIsFocused(false);
-      _.invoke(props, 'onBlur', ...args);
-      if (validateOnBlur) {
-        validateField();
-      }
-    },
-    [props.onBlur, validateOnBlur, validateField]
-  );
+  const onBlur = useCallback((...args: any) => {
+    setIsFocused(false);
+    _.invoke(props, 'onBlur', ...args);
+    if (validateOnBlur) {
+      validateField();
+    }
+  },
+  [props.onBlur, validateOnBlur, validateField]);
 
-  const onChangeText = useCallback(
-    (text) => {
-      setValue(text);
-      _.invoke(props, 'onChangeText', text);
+  const onChangeText = useCallback(text => {
+    setValue(text);
+    _.invoke(props, 'onChangeText', text);
 
-      if (validateOnChange) {
-        validateField(text);
-      }
-    },
-    [props.onChangeText, validateOnChange, validateField]
-  );
+    if (validateOnChange) {
+      validateField(text);
+    }
+  },
+  [props.onChangeText, validateOnChange, validateField]);
 
   const fieldState = useMemo(() => {
     return {value, hasValue: !_.isEmpty(value), isValid, isFocused, failingValidatorIndex};
diff --git a/src/incubator/TextField/usePreset.ts b/src/incubator/TextField/usePreset.ts
new file mode 100644
index 0000000000..daf577dc0b
--- /dev/null
+++ b/src/incubator/TextField/usePreset.ts
@@ -0,0 +1,9 @@
+import {InternalTextFieldProps} from './index';
+import defaultPreset from './presets/default';
+
+export default function usePreset({preset = 'default', ...props}: InternalTextFieldProps) {
+  if (preset === 'default') {
+    return {...defaultPreset, ...props};
+  }
+  return props;
+}
diff --git a/src/incubator/TouchableOpacity.tsx b/src/incubator/TouchableOpacity.tsx
index b14ec6c2dd..b6d2ecafcc 100644
--- a/src/incubator/TouchableOpacity.tsx
+++ b/src/incubator/TouchableOpacity.tsx
@@ -1,10 +1,11 @@
 // TODO: support hitSlop
 import React, {PureComponent} from 'react';
-import {processColor, StyleSheet, ViewStyle} from 'react-native';
+import {processColor, StyleSheet, LayoutChangeEvent} from 'react-native';
 import _ from 'lodash';
 import Reanimated, {Easing} from 'react-native-reanimated';
 import {TapGestureHandler, LongPressGestureHandler, State, LongPressGestureHandlerGestureEvent} from 'react-native-gesture-handler';
 import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../commons/new';
+import {ViewProps} from '../components/view';
 
 const {
   Clock,
@@ -26,7 +27,7 @@ const {
   stopClock
 } = Reanimated;
 
-type TouchableOpacityProps = {
+export type TouchableOpacityProps = {
   /**
    * Background color
    */
@@ -54,7 +55,7 @@ type TouchableOpacityProps = {
   /**
    * Pass controlled pressState to track gesture state changes
    */
-  pressState?: object;
+  pressState?: State;
   /**
    * If true, disable all interactions for this component.
    */
@@ -62,15 +63,19 @@ type TouchableOpacityProps = {
   /**
    * Pass custom style
    */
-  style?: ViewStyle;
+  style?: ViewProps['style'];
+  onLayout?: (event: LayoutChangeEvent) => void;
+  testID?: string;
 };
 
+type Props = TouchableOpacityProps & BaseComponentInjectedProps & ForwardRefInjectedProps;
+
 /**
  * @description: a Better, enhanced TouchableOpacity component
  * @modifiers: flex, margin, padding, background
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/TouchableOpacityScreen.js
  */
-class TouchableOpacity extends PureComponent<TouchableOpacityProps & BaseComponentInjectedProps & ForwardRefInjectedProps> {
+class TouchableOpacity extends PureComponent<Props> {
   static displayName = 'Incubator.TouchableOpacity';
 
   static defaultProps = {
@@ -90,6 +95,7 @@ class TouchableOpacity extends PureComponent<TouchableOpacityProps & BaseCompone
   _scale = runTiming(this.clock, this.pressState, this.props.activeScale || 1, 1);
   _opacity = runTiming(this.clock, this.pressState, this.props.activeOpacity || 0.2, 1);
   _color = cond(eq(this.pressState, State.BEGAN),
+    // @ts-expect-error
     processColor(this.props.feedbackColor || this.backgroundColor),
     processColor(this.backgroundColor));
 
@@ -216,4 +222,4 @@ function runTiming(clock: any, gestureState: any, initialValue: number, endValue
   ]);
 }
 
-export default asBaseComponent<TouchableOpacityProps>(forwardRef(TouchableOpacity));
+export default asBaseComponent<TouchableOpacityProps>(forwardRef<Props>(TouchableOpacity));
diff --git a/src/incubator/WheelPicker/helpers/useListMiddleIndex.ts b/src/incubator/WheelPicker/helpers/useListMiddleIndex.ts
index fe70c41388..dc0636ebac 100644
--- a/src/incubator/WheelPicker/helpers/useListMiddleIndex.ts
+++ b/src/incubator/WheelPicker/helpers/useListMiddleIndex.ts
@@ -19,5 +19,5 @@ export default ({itemHeight, listSize}: ItemType) => {
     return valueInRange(calculatedIndex, 0, listSize - 1);
   };
 
-  return middleIndex
+  return middleIndex;
 };
diff --git a/src/incubator/WheelPicker/index.tsx b/src/incubator/WheelPicker/index.tsx
index 8aa9f7af31..eb3fa1e8f8 100644
--- a/src/incubator/WheelPicker/index.tsx
+++ b/src/incubator/WheelPicker/index.tsx
@@ -1,7 +1,6 @@
 // TODO: Support onChange callback
 // TODO: Support style customization
 // TODO: Support control of visible items
-import _ from 'lodash';
 import React, {useCallback, useRef, useMemo} from 'react';
 import {TextStyle, FlatList, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
 import Animated from 'react-native-reanimated';
@@ -55,7 +54,7 @@ const WheelPicker = ({items, itemHeight = 48, activeTextColor, inactiveTextColor
     index => {
       if (scrollView.current?.getNode()) {
         //@ts-ignore for some reason scrollToOffset isn't recognized
-        scrollView.current?.getNode()?.scrollToOffset({offset: index * itemHeight, animated: true})
+        scrollView.current?.getNode()?.scrollToOffset({offset: index * itemHeight, animated: true});
       }
     },
     [itemHeight]
@@ -83,7 +82,7 @@ const WheelPicker = ({items, itemHeight = 48, activeTextColor, inactiveTextColor
 
   const fader = useMemo(
     () => (position: FaderPosition) => {
-      return <Fader visible position={position} size={60} />;
+      return <Fader visible position={position} size={60}/>;
     },
     []
   );
diff --git a/src/incubator/index.ts b/src/incubator/index.ts
index 4dfedab6f2..af9a0884d8 100644
--- a/src/incubator/index.ts
+++ b/src/incubator/index.ts
@@ -1,5 +1,5 @@
 // @ts-ignore
 export {default as TabController} from './TabController';
 export {default as TextField} from './TextField';
-export {default as TouchableOpacity} from './TouchableOpacity';
+export {default as TouchableOpacity, TouchableOpacityProps} from './TouchableOpacity';
 export {default as WheelPicker} from './WheelPicker';
diff --git a/src/index.ts b/src/index.ts
index 5afc44ec71..33362a33dc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -27,7 +27,7 @@ export {default as Constants} from './helpers/Constants';
 export {default as View, ViewPropTypes, ViewProps} from './components/view';
 export {default as Text, TextPropTypes, TextProps} from './components/text';
 export {default as TouchableOpacity, TouchableOpacityProps} from './components/touchableOpacity';
-export {default as Button, ButtonPropTypes, ButtonProps} from './components/button';
+export {default as Button, ButtonPropTypes, ButtonProps, ButtonSize, ButtonAnimationDirection} from './components/button';
 export {default as Checkbox, CheckboxPropTypes, CheckboxProps} from './components/checkbox';
 export {default as Chip, ChipPropTypes, ChipProps} from './components/chip';
 export {default as FloatingButton, FloatingButtonProps} from './components/floatingButton';
@@ -36,7 +36,9 @@ export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as RadioButton, RadioButtonPropTypes, RadioButtonProps} from './components/radioButton/RadioButton';
 export {default as RadioGroup, RadioGroupPropTypes, RadioGroupProps} from './components/radioButton/RadioGroup';
 export {default as Switch, SwitchProps} from './components/switch';
+export {default as TabController, TabControllerProps, TabControllerItemProps} from './components/tabController';
 export {default as TabBar, TabBarProps} from './components/TabBar';
+export {default as ScrollBar, ScrollBarProps} from './components/ScrollBar';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';
 export {default as ExpandableSection, ExpandableSectionProps} from './components/expandableSection';
 export {default as Modal, ModalProps, ModalTopBarProps} from './components/modal';
diff --git a/src/style/borderRadiuses.ts b/src/style/borderRadiuses.ts
index 056d195c6e..1703f3b5db 100644
--- a/src/style/borderRadiuses.ts
+++ b/src/style/borderRadiuses.ts
@@ -10,7 +10,7 @@ export const BorderRadiusesLiterals = {
   br50: Constants.isIOS ? 15 : 16,
   br60: 20,
   br100: 999
-}
+};
 export class BorderRadiuses {
   loadBorders(borders: Dictionary<number>) {
     _.forEach(borders, (value, key) => {
@@ -23,7 +23,7 @@ export class BorderRadiuses {
     return /^(br[0-9]+)/;
   }
 }
-const TypedBorderRadiuses = BorderRadiuses as ExtendTypeWith<typeof BorderRadiuses, typeof BorderRadiusesLiterals>
+const TypedBorderRadiuses = BorderRadiuses as ExtendTypeWith<typeof BorderRadiuses, typeof BorderRadiusesLiterals>;
 const borderRadiusesInstance = new TypedBorderRadiuses();
 borderRadiusesInstance.loadBorders(BorderRadiusesLiterals);
 
diff --git a/src/style/colors.ts b/src/style/colors.ts
index 8991fa51c7..f1870debab 100644
--- a/src/style/colors.ts
+++ b/src/style/colors.ts
@@ -215,7 +215,7 @@ function threeDigitHexToSix(value: string) {
   return value.replace(/./g, '$&$&');
 }
 
-const TypedColors = Colors as ExtendTypeWith<typeof Colors, typeof colorsPalette>
+const TypedColors = Colors as ExtendTypeWith<typeof Colors, typeof colorsPalette>;
 const colorObject = new TypedColors();
 colorObject.loadColors(colorsPalette);
 export default colorObject;
diff --git a/src/style/colorsPalette.ts b/src/style/colorsPalette.ts
index c6d03386a2..d79f6e9c34 100644
--- a/src/style/colorsPalette.ts
+++ b/src/style/colorsPalette.ts
@@ -104,7 +104,7 @@ const extraFixColorsMap = {
 
 const themeColors = {
   primary: colorsPalette.blue30
-}
+};
 
 export {
   colorsPalette,
diff --git a/src/style/spacings.ts b/src/style/spacings.ts
index 20ca91e5f0..5355fd6081 100644
--- a/src/style/spacings.ts
+++ b/src/style/spacings.ts
@@ -34,7 +34,7 @@ export class Spacings {
       .value());
   }
 }
-const TypedSpacings = Spacings as ExtendTypeWith<typeof Spacings, typeof SpacingLiterals>
+const TypedSpacings = Spacings as ExtendTypeWith<typeof Spacings, typeof SpacingLiterals>;
 const spacingInstance = new TypedSpacings();
-spacingInstance.loadSpacings(SpacingLiterals)
+spacingInstance.loadSpacings(SpacingLiterals);
 export default spacingInstance;
diff --git a/src/style/typography.ts b/src/style/typography.ts
index 8d4a7d2736..ebbf4eb96a 100644
--- a/src/style/typography.ts
+++ b/src/style/typography.ts
@@ -50,7 +50,7 @@ export class Typography {
       const size = await rnTextSize.measure({
         text, // text to measure, can include symbols
         width: containerWidth, // max-width of the "virtual" container
-        ...typography, // RN font specification
+        ...typography // RN font specification
       });
       return size;
     }
diff --git a/typings/components/ChipsInput.d.ts b/typings/components/ChipsInput.d.ts
index eaa87a4a5a..bc0b7455ea 100644
--- a/typings/components/ChipsInput.d.ts
+++ b/typings/components/ChipsInput.d.ts
@@ -1,5 +1,5 @@
 import {ReactElement} from 'react';
-import {StyleProp, TextStyle, ViewStyle, AccessibilityProps} from 'react-native';
+import {StyleProp, TextStyle, ViewStyle, AccessibilityProps, ColorValue} from 'react-native';
 import {BaseComponent} from '../commons';
 import {AccessibilityProps} from '../modifiers';
 
@@ -32,8 +32,8 @@ export interface ChipsInputProps {
   tagStyle?: StyleProp<ViewStyle>;
   inputStyle?: StyleProp<TextStyle>;
   hideUnderline?: boolean;
-  placeholderTextColor?: string;
-  selectionColor?: string;
+  placeholderTextColor?: ColorValue;
+  selectionColor?: ColorValue;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }