Repository: codypearce/material-bread
Pull request #334 (2019-11-20 18:16:04)

SpedDial with only one fab button is now able to execute onPress function.
## Description
This PR enable user to use onPress function on fabdial element. in order to use like a single fab button. This is useful to avoid replace fabdial with fab button in cases where you only need a single element.

## Screenshots

![ezgif com-video-to-gif-6](https://user-images.githubusercontent.com/7472461/69265790-e1886100-0b97-11ea-8517-643a7e788225.gif)



Patch:
diff --git a/docs/src/content/components/button/propData.js b/docs/src/content/components/button/propData.js
index fb1b157..c870be6 100644
--- a/docs/src/content/components/button/propData.js
+++ b/docs/src/content/components/button/propData.js
@@ -60,13 +60,6 @@ const propData = [
     'string: flat, text, outlined, contained',
     'text',
   ],
-
-  [
-    'useInputCasing',
-    'Use text casing as input and do not auto-capitalize',
-    'boolean',
-    'false',
-  ],
 ];
 
 export default createTableData(propData);
diff --git a/docs/src/content/components/checkbox/propData.js b/docs/src/content/components/checkbox/propData.js
index 87210af..bfcc88a 100644
--- a/docs/src/content/components/checkbox/propData.js
+++ b/docs/src/content/components/checkbox/propData.js
@@ -26,12 +26,6 @@ const propData = [
     'bool',
     'false',
   ],
-  [
-    'size',
-    'Scale the default icons while maintaining Material proportions',
-    'number',
-    '24',
-  ],
   ['styles', 'Styles root container', 'object', ''],
   ['textStyle', 'Styles for the text component', 'object', ''],
   ['unCheckedColor', 'Custom color for unchecked icon', 'string', ''],
diff --git a/docs/src/content/components/dialog/propData.js b/docs/src/content/components/dialog/propData.js
index 46856df..6538171 100644
--- a/docs/src/content/components/dialog/propData.js
+++ b/docs/src/content/components/dialog/propData.js
@@ -1,7 +1,6 @@
 import { createTableData } from '../../../utils/createPropData';
 const propData = [
   ['actionItems', 'Array of actions to show at the bottom right', 'array', ''],
-  ['actionItemsContainerStyle', 'Styles action items container', 'object', ''],
   [
     'contentStyle',
     'Styles content container excluding action items',
diff --git a/docs/src/content/components/menu/propData.js b/docs/src/content/components/menu/propData.js
index 9c81230..053f85f 100644
--- a/docs/src/content/components/menu/propData.js
+++ b/docs/src/content/components/menu/propData.js
@@ -6,7 +6,6 @@ const propData = [
     'node',
     '',
   ],
-  ['fullWidth', 'Forces menu button to be 100% width', 'bool', 'false'],
   ['menuStyle', 'Styles the container to menu', 'object', ''],
   ['onHidden', 'Callback when menu is hidden', 'func', ''],
   ['onBackdropPress', 'Callback when clicking outside menu', 'func', ''],
diff --git a/docs/src/content/components/searchfield/propData.js b/docs/src/content/components/searchfield/propData.js
index 393ec01..660fa06 100644
--- a/docs/src/content/components/searchfield/propData.js
+++ b/docs/src/content/components/searchfield/propData.js
@@ -1,14 +1,12 @@
 import { createTableData } from '../../../utils/createPropData';
 const propData = [
   ['color', 'Background color', 'string', 'white'],
-  ['iconProps', 'Override properties for the icons', 'object', ''],
   ['inputRef', 'Catch the reference of the TextInput component', 'func', ''],
   ['onChangeText', 'Callback when text is changed', 'func', ''],
   ['onCloseIcon', 'Callback when close icon is pressed', 'func', ''],
   ['onFocus', 'Callback when focused', 'func', ''],
   ['onBlur', 'Callback when blurred', 'func', ''],
   ['style', 'Styles root element', 'object', ''],
-  ['textStyle', 'Styles text input element', 'object', ''],
   ['value', 'Search input', 'string', ''],
 ];
 
diff --git a/docs/src/content/components/select/propData.js b/docs/src/content/components/select/propData.js
index 4c593c6..4ae3781 100644
--- a/docs/src/content/components/select/propData.js
+++ b/docs/src/content/components/select/propData.js
@@ -6,7 +6,6 @@ const propData = [
     'object',
     '',
   ],
-  ['fullWidth', 'Forces select button to be 100% width', 'bool', 'false'],
   ['label', 'Label for textinput', 'string', ''],
 
   ['menuItems', 'Items to display in menu dropdown', 'array', ''],
diff --git a/docs/src/content/components/slider/propData.js b/docs/src/content/components/slider/propData.js
index 987d6c1..a7ea3cd 100644
--- a/docs/src/content/components/slider/propData.js
+++ b/docs/src/content/components/slider/propData.js
@@ -13,7 +13,6 @@ const propData = [
   ['step', 'Number that marker jumps to next value', 'number', '1'],
   ['style', 'Styles root element', 'object', ''],
   ['trackColor', 'Color of track', 'string', 'theme.primary.main'],
-  ['backgroundTrackColor', 'Color of background track', 'string', '#CECECE'],
   ['trackHeight', 'The height of the track', 'number', 2],
   ['trackStyle', 'Styles the track', 'object', ''],
   ['values', 'Array of starting values for each marker', 'array', ''],
diff --git a/docs/src/content/components/switch/propData.js b/docs/src/content/components/switch/propData.js
index 0fc9e1a..44017b2 100644
--- a/docs/src/content/components/switch/propData.js
+++ b/docs/src/content/components/switch/propData.js
@@ -14,7 +14,6 @@ const propData = [
   ['style', 'Styles root element', 'object', ''],
   ['trackStyle', 'Styles the track element', 'object', ''],
   ['thumbStyle', 'Styles the thumb element', 'object', ''],
-  ['width', 'Scales the switch based on the desired width', 'number', '36'],
 ];
 
 export default createTableData(propData);
diff --git a/package.json b/package.json
index 71957c7..507581b 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,6 @@
     "react-native-svg": "^9.5.3"
   },
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "jest": {
     "preset": "react-native",
     "transformIgnorePatterns": [
diff --git a/src/Components/Appbar/Appbar.js b/src/Components/Appbar/Appbar.js
index 7408be1..c7c3019 100644
--- a/src/Components/Appbar/Appbar.js
+++ b/src/Components/Appbar/Appbar.js
@@ -194,10 +194,7 @@ class Appbar extends Component {
     } = this.props;
 
     let backgroundColor = color ? color : theme.primary.main;
-    const implementedShadow =
-      elevation != undefined || elevation != null
-        ? shadow(elevation)
-        : shadow(6);
+    const implementedShadow = elevation ? shadow(shadow) : shadow(6);
 
     return (
       <Paper
diff --git a/src/Components/Button/ButtonBase/ButtonBase.js b/src/Components/Button/ButtonBase/ButtonBase.js
index 9467d1c..d37a8d4 100644
--- a/src/Components/Button/ButtonBase/ButtonBase.js
+++ b/src/Components/Button/ButtonBase/ButtonBase.js
@@ -32,7 +32,6 @@ class ButtonBase extends Component {
 
     text: PropTypes.string,
     textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    useInputCasing: PropTypes.bool,
 
     typeTextColor: PropTypes.string,
     typeButtonStyles: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
@@ -45,7 +44,6 @@ class ButtonBase extends Component {
   static defaultProps = {
     iconPosition: 'left',
     dense: false,
-    useInputCasing: false,
   };
 
   _renderText() {
@@ -56,7 +54,6 @@ class ButtonBase extends Component {
       theme,
       hideLabel,
       dense,
-      useInputCasing,
     } = this.props;
 
     if (hideLabel) return null;
@@ -72,7 +69,7 @@ class ButtonBase extends Component {
           },
           textStyle,
         ]}>
-        {useInputCasing ? text : text.toUpperCase()}
+        {text.toUpperCase()}
       </Text>
     );
   }
diff --git a/src/Components/Checkbox/Checkbox.js b/src/Components/Checkbox/Checkbox.js
index 253da28..7943a17 100644
--- a/src/Components/Checkbox/Checkbox.js
+++ b/src/Components/Checkbox/Checkbox.js
@@ -26,7 +26,6 @@ class Checkbox extends Component {
     labelPos: PropTypes.string,
 
     icon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-    size: PropTypes.number,
     checkedIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
 
     ios: PropTypes.bool,
@@ -39,7 +38,6 @@ class Checkbox extends Component {
     unCheckedColor: 'rgba(0,0,0,.5)',
     rippleColor: 'rgba(0,0,0,.8)',
     icon: 'check-box-outline-blank',
-    size: 24,
     checkedIcon: 'check-box',
     labelPos: 'right',
   };
@@ -84,23 +82,18 @@ class Checkbox extends Component {
   }
 
   _renderIconContainer() {
-    const { disabled, onPress, checkboxStyle, size } = this.props;
+    const { disabled, onPress, checkboxStyle } = this.props;
 
     const rippleColor = this._getRippleColor();
-    const rippleSize = 1.5 * size;
 
     return (
       <Ripple
         onPress={onPress}
         disabled={disabled}
-        style={[
-          styles.checkBoxRipple,
-          checkboxStyle,
-          { width: rippleSize, height: rippleSize, padding: rippleSize / 6 },
-        ]}
+        style={[styles.checkBoxRipple, checkboxStyle]}
         rippleCentered={true}
         rippleColor={rippleColor}
-        rippleContainerBorderRadius={rippleSize / 2}>
+        rippleContainerBorderRadius={18}>
         {this._renderIcon()}
       </Ripple>
     );
@@ -109,7 +102,6 @@ class Checkbox extends Component {
   _renderIcon() {
     const {
       icon,
-      size,
       checkedIcon,
       unCheckedColor,
       indeterminate,
@@ -123,7 +115,7 @@ class Checkbox extends Component {
 
     if (icon && icon.props && icon.props.name && !checked) {
       return React.cloneElement(icon, {
-        size: icon.props.size ? icon.props.size : size,
+        size: icon.props.size ? icon.props.size : 24,
         color: checkboxColor,
       });
     } else if (
@@ -133,7 +125,7 @@ class Checkbox extends Component {
       checked
     ) {
       return React.cloneElement(checkedIcon, {
-        size: icon.props.size ? icon.props.size : size,
+        size: icon.props.size ? icon.props.size : 24,
         color: checkboxColor,
       });
     }
@@ -154,7 +146,7 @@ class Checkbox extends Component {
     return (
       <Icon
         name={iconName}
-        size={size}
+        size={24}
         color={checked ? checkboxColor : unCheckedColorApplied}
         style={{ opacity }}
       />
diff --git a/src/Components/Checkbox/Checkbox.styles.js b/src/Components/Checkbox/Checkbox.styles.js
index 731d62f..01371af 100644
--- a/src/Components/Checkbox/Checkbox.styles.js
+++ b/src/Components/Checkbox/Checkbox.styles.js
@@ -6,6 +6,9 @@ const styles = StyleSheet.create({
   },
   checkBoxRipple: {
     borderRadius: 100,
+    width: 36,
+    height: 36,
+    padding: 6,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/src/Components/Dialog/Dialog.js b/src/Components/Dialog/Dialog.js
index 028748b..f8a88b7 100644
--- a/src/Components/Dialog/Dialog.js
+++ b/src/Components/Dialog/Dialog.js
@@ -18,10 +18,6 @@ class Dialog extends Component {
     actionItems: PropTypes.arrayOf(
       PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
     ),
-    actionItemsContainerStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.array,
-    ]),
     title: PropTypes.string,
     titleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     supportingText: PropTypes.string,
@@ -34,9 +30,9 @@ class Dialog extends Component {
   };
 
   _renderActionItems() {
-    const { actionItems, actionItemsContainerStyle } = this.props;
+    const { actionItems } = this.props;
     return (
-      <View style={[styles.actionItems, actionItemsContainerStyle]}>
+      <View style={styles.actionItems}>
         {actionItems.map((item, index) => {
           if (React.isValidElement(item)) return item;
           return <Button key={index} {...item} />;
diff --git a/src/Components/Drawer/DrawerHeader/DrawerHeader.js b/src/Components/Drawer/DrawerHeader/DrawerHeader.js
index ff5b5cd..5e7a83c 100644
--- a/src/Components/Drawer/DrawerHeader/DrawerHeader.js
+++ b/src/Components/Drawer/DrawerHeader/DrawerHeader.js
@@ -20,10 +20,10 @@ class DrawerHeader extends Component {
   }
 
   render() {
-    const { avatar, title, subtitle, style } = this.props;
+    const { avatar, title, subtitle } = this.props;
 
     return (
-      <View style={[styles.drawerHeader, style]}>
+      <View style={styles.drawerHeader}>
         {avatar ? this._renderAvatar() : null}
         <Text style={styles.title}>{title}</Text>
         <Text style={styles.subtitle}>{subtitle}</Text>
diff --git a/src/Components/Fab/FabSpeedDial/FabSpeedDial.js b/src/Components/Fab/FabSpeedDial/FabSpeedDial.js
index 33067d0..95fd192 100644
--- a/src/Components/Fab/FabSpeedDial/FabSpeedDial.js
+++ b/src/Components/Fab/FabSpeedDial/FabSpeedDial.js
@@ -46,7 +46,8 @@ class FabSpeedDial extends Component {
   }
 
   animateActions() {
-    const { open, onPress } = this.state;
+    const { onPress } = this.props;
+    const { open } = this.state;
 
     this.setState({
       open: !open,
diff --git a/src/Components/List/ListSection/ListSection.styles.js b/src/Components/List/ListSection/ListSection.styles.js
index c0af3dd..9a35a6a 100644
--- a/src/Components/List/ListSection/ListSection.styles.js
+++ b/src/Components/List/ListSection/ListSection.styles.js
@@ -7,7 +7,6 @@ const styles = StyleSheet.create({
   },
   label: {
     marginBottom: 8,
-    alignSelf: 'flex-start',
   },
 });
 
diff --git a/src/Components/Menu/Menu.js b/src/Components/Menu/Menu.js
index 5b0a690..3da28bd 100644
--- a/src/Components/Menu/Menu.js
+++ b/src/Components/Menu/Menu.js
@@ -24,7 +24,6 @@ class Menu extends Component {
     tooltip: PropTypes.bool,
     tooltipPosition: PropTypes.string,
     testID: PropTypes.string,
-    fullWidth: PropTypes.bool,
   };
 
   state = {
@@ -169,7 +168,6 @@ class Menu extends Component {
       tooltipPosition,
       noBackDrop,
       testID,
-      fullWidth,
     } = this.props;
 
     const menuContainerStyle = {
@@ -222,10 +220,7 @@ class Menu extends Component {
           ref={ref => {
             this.marker = ref;
           }}
-          style={{
-            alignSelf: 'flex-start',
-            width: fullWidth ? '100%' : 'auto',
-          }}>
+          style={{ alignSelf: 'flex-start' }}>
           {button}
         </View>
         <ModelMenu
diff --git a/src/Components/Select/Select.js b/src/Components/Select/Select.js
index 55ed15a..6f937ba 100644
--- a/src/Components/Select/Select.js
+++ b/src/Components/Select/Select.js
@@ -24,7 +24,6 @@ class Select extends Component {
     onBackdropPress: PropTypes.func,
     theme: PropTypes.object,
     testID: PropTypes.string,
-    fullWidth: PropTypes.bool,
   };
 
   state = {
@@ -59,7 +58,6 @@ class Select extends Component {
       type,
       theme,
       testID,
-      fullWidth,
     } = this.props;
 
     const { visible } = this.state;
@@ -79,7 +77,6 @@ class Select extends Component {
         style={[styles.menu, { flex: 1 }]}
         sameWidth
         visible={visible}
-        fullWidth={fullWidth}
         modalMenuStyle={{
           marginTop: textFieldProps && textFieldProps.dense ? 60 : 71,
           width: '100%',
@@ -90,11 +87,7 @@ class Select extends Component {
         button={
           <TouchableHighlight
             onPress={() => this.showMenu()}
-            style={[
-              styles.button,
-              { width: fullWidth ? '100%' : 'auto' },
-              buttonStyle,
-            ]}
+            style={[styles.button, buttonStyle]}
             underlayColor={'transparent'}>
             <View style={styles.innerView}>
               <TextField
diff --git a/src/Components/Slider/Slider.js b/src/Components/Slider/Slider.js
index 469e6c3..2de58e5 100644
--- a/src/Components/Slider/Slider.js
+++ b/src/Components/Slider/Slider.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import { PanResponder, View, StyleSheet } from 'react-native';
+import { PanResponder, View, I18nManager, StyleSheet } from 'react-native';
 import withTheme from '../../Theme/withTheme';
 import MarkerContainer from './MarkerContainer/MarkerContainer';
 import Track from './Track/Track';
@@ -20,7 +20,6 @@ class Slider extends Component {
     onValuesChange: PropTypes.func,
     onValuesChangeEnd: PropTypes.func,
     trackColor: PropTypes.string,
-    backgroundTrackColor: PropTypes.string,
     markerColor: PropTypes.string,
     allowOverlap: PropTypes.bool,
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
@@ -191,7 +190,10 @@ class Slider extends Component {
     }
 
     const accumDistance = gestureState.dx;
-    const unconfined = accumDistance + pastOne;
+
+    const unconfined = I18nManager.isRTL
+      ? pastOne - accumDistance
+      : accumDistance + pastOne;
 
     var bottom = 0;
     var trueTop = positionTwo - (allowOverlap ? 0 : this.stepLength);
@@ -236,8 +238,10 @@ class Slider extends Component {
     }
 
     const accumDistance = gestureState.dx;
-    const unconfined = accumDistance + pastTwo;
 
+    const unconfined = I18nManager.isRTL
+      ? pastTwo - accumDistance
+      : accumDistance + pastTwo;
     var bottom = positionOne + (allowOverlap ? 0 : this.stepLength);
     var top = sliderLength;
     var confined =
@@ -351,7 +355,6 @@ class Slider extends Component {
       sliderLength,
       values,
       trackColor,
-      backgroundTrackColor,
       disableOne,
       disableTwo,
       trackStyle,
@@ -365,7 +368,6 @@ class Slider extends Component {
         positionTwo={positionTwo}
         positionOne={positionOne}
         trackColor={trackColor}
-        backgroundTrackColor={backgroundTrackColor}
         bothDisabled={disableOne && disableTwo}
         oneDisabled={disableOne}
         trackHeight={this.finalTrackHeight}
diff --git a/src/Components/Slider/Slider.styles.js b/src/Components/Slider/Slider.styles.js
index 1a7a49c..5f91cb3 100644
--- a/src/Components/Slider/Slider.styles.js
+++ b/src/Components/Slider/Slider.styles.js
@@ -1,4 +1,4 @@
-import { I18nManager, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
   container: {
@@ -7,7 +7,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   fullTrack: {
-    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
+    flexDirection: 'row',
   },
 });
 
diff --git a/src/Components/Slider/Track/Track.js b/src/Components/Slider/Track/Track.js
index f1ce400..e8cbb6a 100644
--- a/src/Components/Slider/Track/Track.js
+++ b/src/Components/Slider/Track/Track.js
@@ -7,7 +7,6 @@ import styles from './Track.styles';
 
 class Track extends Component {
   static propTypes = {
-    backgroundTrackColor: PropTypes.string,
     twoMarkers: PropTypes.bool,
     sliderLength: PropTypes.number,
     positionOne: PropTypes.number,
@@ -22,7 +21,6 @@ class Track extends Component {
 
   render() {
     const {
-      backgroundTrackColor,
       sliderLength,
       positionOne,
       positionTwo,
@@ -36,9 +34,7 @@ class Track extends Component {
     } = this.props;
 
     const selectedColor = trackColor ? trackColor : theme.primary.main;
-    const unselectedColor = backgroundTrackColor
-      ? backgroundTrackColor
-      : '#CECECE';
+    const unselectedColor = '#CECECE';
 
     const trackOneLength = positionOne;
     const trackThreeLength = twoMarkers ? sliderLength - positionTwo : 0;
diff --git a/src/Components/Switch/Switch.js b/src/Components/Switch/Switch.js
index a075c5d..7be2cd8 100644
--- a/src/Components/Switch/Switch.js
+++ b/src/Components/Switch/Switch.js
@@ -1,10 +1,5 @@
 import React, { Component } from 'react';
-import {
-  Animated,
-  I18nManager,
-  View,
-  TouchableWithoutFeedback,
-} from 'react-native';
+import { Animated, View, TouchableWithoutFeedback } from 'react-native';
 import PropTypes from 'prop-types';
 import withTheme from '../../Theme/withTheme';
 
@@ -26,22 +21,17 @@ class Switch extends Component {
     color: PropTypes.string,
     loading: PropTypes.bool,
     testID: PropTypes.string,
-    width: PropTypes.number,
   };
 
-  static defaultProps = { labelPos: 'right', width: 36 };
+  static defaultProps = { labelPos: 'right' };
 
   state = {
     thumbTranslateX: new Animated.Value(0),
   };
 
   componentDidMount() {
-    const { checked, width } = this.props;
-    const { thumbTranslateX } = this.state;
-
-    if (checked) {
-      const xValue = width / 2;
-      thumbTranslateX.setValue(I18nManager.isRTL ? -xValue : xValue);
+    if (this.props.checked) {
+      this.setState({ thumbTranslateX: new Animated.Value(18) });
     }
   }
 
@@ -70,43 +60,21 @@ class Switch extends Component {
 
   handleSwitch() {
     const { thumbTranslateX } = this.state;
-    const { checked, width } = this.props;
+    const { checked } = this.props;
 
-    let xValue = width / 2;
+    let xValue = 18;
     if (!checked) {
       xValue = 0;
     }
 
     Animated.parallel([
       Animated.timing(thumbTranslateX, {
-        toValue: I18nManager.isRTL ? -xValue : xValue,
+        toValue: xValue,
         duration: 300,
       }),
     ]).start();
   }
 
-  getDimensions = width => {
-    const height = width * (8 / 9);
-
-    return {
-      height,
-      trackDimensions: {
-        width,
-        height: height * (7 / 16),
-        borderRadius: height * (5 / 16),
-      },
-      thumbRippleDimensions: {
-        width: width * (8 / 9),
-        top: height * -(9 / 32),
-        left: width * -(2 / 9),
-      },
-      thumbDimensions: {
-        width: width * (5 / 9),
-        height: height * (5 / 8),
-      },
-    };
-  };
-
   render() {
     const { thumbTranslateX } = this.state;
     const {
@@ -121,7 +89,6 @@ class Switch extends Component {
       onPress,
       loading,
       testID,
-      width,
       ...rest
     } = this.props;
 
@@ -130,13 +97,6 @@ class Switch extends Component {
       : colorTool(theme.primary.main).alpha(0.54);
     let thumbColor = color ? color : theme.primary.main;
 
-    const {
-      height,
-      trackDimensions,
-      thumbRippleDimensions,
-      thumbDimensions,
-    } = this.getDimensions(width);
-
     return (
       <View style={[styles.container, style]} testID={testID} {...rest}>
         {labelPos == 'left' && label ? this._renderLabel() : null}
@@ -146,7 +106,6 @@ class Switch extends Component {
             {
               backgroundColor:
                 checked && !loading ? trackColor : 'rgba(0,0,0,.30)',
-              ...trackDimensions,
             },
             trackStyle,
           ]}
@@ -155,20 +114,13 @@ class Switch extends Component {
             rippleContainerBorderRadius={100}
             style={[
               styles.thumbRipple,
-              {
-                transform: [{ translateX: thumbTranslateX }],
-                height,
-                ...thumbRippleDimensions,
-              },
+              { transform: [{ translateX: thumbTranslateX }] },
             ]}
             onPress={onPress}>
             <Animated.View
               style={[
                 styles.thumb,
-                {
-                  backgroundColor: checked && !loading ? thumbColor : 'white',
-                  ...thumbDimensions,
-                },
+                { backgroundColor: checked && !loading ? thumbColor : 'white' },
                 thumbStyle,
               ]}>
               {loading ? (
diff --git a/src/Components/Switch/Switch.styles.js b/src/Components/Switch/Switch.styles.js
index 2adfe85..5030036 100644
--- a/src/Components/Switch/Switch.styles.js
+++ b/src/Components/Switch/Switch.styles.js
@@ -9,16 +9,25 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-start',
   },
   track: {
+    width: 36,
+    height: 14,
     backgroundColor: 'rgba(0,0,0,.20)',
+    borderRadius: 10,
     position: 'relative',
   },
   thumbRipple: {
+    width: 32,
+    height: 32,
     borderRadius: 100,
     position: 'absolute',
+    top: -9,
+    left: -8,
     justifyContent: 'center',
     alignItems: 'center',
   },
   thumb: {
+    width: 20,
+    height: 20,
     ...shadow(3),
     borderRadius: 100,
     justifyContent: 'center',
diff --git a/src/Components/TextField/Searchfield/Searchfield.js b/src/Components/TextField/Searchfield/Searchfield.js
index 46b596d..0faed8f 100644
--- a/src/Components/TextField/Searchfield/Searchfield.js
+++ b/src/Components/TextField/Searchfield/Searchfield.js
@@ -7,35 +7,34 @@ import styles from './Searchfield.styles';
 
 class Searchfield extends Component {
   static propTypes = {
-    color: PropTypes.string,
-    iconProps: PropTypes.object,
-    inputRef: PropTypes.func,
-    onBlur: PropTypes.func,
+    value: PropTypes.string,
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     onChangeText: PropTypes.func,
     onCloseIcon: PropTypes.func,
     onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    color: PropTypes.string,
     placeholder: PropTypes.string,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    value: PropTypes.string,
+    inputRef: PropTypes.func,
   };
 
   render() {
     const {
-      color,
-      iconProps,
-      inputRef,
-      onBlur,
+      style,
       onChangeText,
       onCloseIcon,
+      value,
       onFocus,
+      onBlur,
+      color,
       placeholder,
-      style,
-      textStyle,
-      value,
-      ...rest
+      inputRef,
     } = this.props;
 
+    if (inputRef) {
+      inputRef(this.textInput);
+    }
+
     return (
       <View
         style={[
@@ -43,18 +42,19 @@ class Searchfield extends Component {
           { backgroundColor: color ? color : 'rgba(255,255,255,.15)' },
           style,
         ]}>
-        <IconButton name={'search'} size={20} color={'white'} {...iconProps} />
+        <IconButton name={'search'} size={20} color={'white'} />
 
         <TextInput
-          ref={inputRef}
-          style={[styles.searchInput, textStyle]}
+          ref={ref => {
+            this.textInput = ref;
+          }}
+          style={styles.searchInput}
           placeholder={placeholder ? placeholder : 'Search'}
           value={value}
           onChangeText={onChangeText}
           placeholderTextColor={'rgba(255,255,255,.57)'}
           onFocus={onFocus}
           onBlur={onBlur}
-          {...rest}
         />
 
         <IconButton
@@ -63,7 +63,6 @@ class Searchfield extends Component {
           style={{ opacity: !value || value.length < 1 ? 0 : 1 }}
           onPress={onCloseIcon}
           color={'white'}
-          {...iconProps}
         />
       </View>
     );
diff --git a/src/Components/TextField/TextFieldLabel/TextFieldLabel.js b/src/Components/TextField/TextFieldLabel/TextFieldLabel.js
index afae6fb..315f928 100644
--- a/src/Components/TextField/TextFieldLabel/TextFieldLabel.js
+++ b/src/Components/TextField/TextFieldLabel/TextFieldLabel.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Animated, Easing, I18nManager, StyleSheet } from 'react-native';
+import { Animated, Easing, StyleSheet } from 'react-native';
 import withTheme from '../../../Theme/withTheme';
 import styles from './TextFieldLabel.styles';
 import {
@@ -227,7 +227,7 @@ class TextFieldLabel extends Component {
               paddingHorizontal: type == 'outlined' ? 4 : 0,
               transform: [
                 { translateY: translateYAnimation },
-                { translateX: I18nManager.isRTL ? -translateX : translateX },
+                { translateX: translateX },
               ],
             },
             style,
diff --git a/src/index.d.ts b/src/index.d.ts
deleted file mode 100644
index d616794..0000000
--- a/src/index.d.ts
+++ /dev/null
@@ -1,1572 +0,0 @@
-import React, { RefObject } from 'react'
-import {
-  StyleProp,
-  TextStyle,
-  View,
-  StyleSheet,
-  StyleSheetProperties,
-  Image,
-  GestureResponderEvent,
-  TextProps,
-  TouchableWithoutFeedbackProps,
-  ViewPropTypes,
-  ViewProps,
-  Animated,
-  ScrollViewProps,
-} from 'react-native'
-
-type Color = string
-
-export interface Theme {
-  primary: {
-    main: Color
-    dark: Color
-    light: Color
-  }
-  secondary: {
-    main: Color
-    dark: Color
-    light: Color
-  }
-  textColor: {
-    primary: Color
-    secondary: Color
-    disabled: Color
-    hint: Color
-  }
-  text: {}
-  background: {
-    default: Color
-  }
-  action: {
-    active: Color
-    hover: Color
-    hoverOpacity: number
-    selected: Color
-    disabled: Color
-    disabledBackground: Color
-    paper: {
-      backgroundColor: Color
-      borderRadius: number
-    }
-    divider: {
-      width: string
-      backgroundColor: Color
-    }
-    buttonText: {
-      fontSize: number
-      fontWight: string
-      letterSpacing: number
-      color: Color
-    }
-    outlinedButton: {
-      borderColor: Color
-      borderWidth: StyleSheetProperties['hairlineWidth']
-      paddingOrizontal: number
-    }
-    containedButton: {
-      paddingHorizontal: number
-      backgroundColor: Color
-    }
-    bodyText: {
-      fontSize: number
-      lineHeight: number
-      letterSpacing: number
-    }
-    bodyTextTwo: {
-      fontSize: number
-      lineHeight: number
-      letterSpacing: number
-    }
-    caption: {
-      fontSize: number
-      lineHeight: number
-      letterSpacing: number
-    }
-    headingOne: {
-      fontWeight: string
-      fontSize: number
-      lineHeight: number
-      letterSpacing: number
-    }
-    headingTwo: {
-      fontWeight: string
-      fontSize: number
-      lineHeight: number
-      letterSpacing: number
-    }
-    headingThree: {
-      fontSize: number
-      lineHeight: number
-    }
-    headingFour: {
-      fontSize: number
-      lineHeight: number
-      letterSpacing: number
-    }
-    headingFive: {
-      fontSize: number
-      lineHeight: number
-    }
-    headingSix: {
-      fontSize: number
-      lineHeight: number
-      letterSpacing: number
-      fontWeight: string
-    }
-    overline: {
-      fontSize: number
-      lineHeight: number
-      letterSpacing: number
-      textTransform: string
-    }
-    subtitleOne: {
-      fontSize: number
-      lineHeight: number
-      letterSpacing: number
-    }
-    subtitleTwo: {
-      fontSize: number
-      lineHeight: number
-      letterSpacing: number
-      fontWeight: string
-    }
-  }
-}
-
-export const ThemeContext: React.Context<Theme>
-
-export const defaultTheme: Theme
-
-export type WithThemeProps = {
-  theme: Theme
-}
-
-type WithTheme = <P extends object>(
-  Component: React.ElementType<P>,
-) => React.ElementType<Omit<P, keyof WithThemeProps>>
-
-export const withTheme: WithTheme
-
-export interface BreadProviderProps {
-  children: React.ReactNode
-  value?: Theme
-}
-
-export class BreadProvider extends React.Component<BreadProviderProps> {
-  render(): React.ReactElement
-}
-
-export interface AnchorProps {
-  url?: string
-  children?: React.ReactNode
-  target?: string
-  testID?: string
-}
-
-export class Anchor extends React.Component<AnchorProps> {
-  render(): React.ReactElement
-}
-
-export interface HoverableProps {
-  children?: React.ReactNode | ((...args: any[]) => any)
-  onHoverIn?: (...args: any[]) => void
-  onHoverOut?: (...args: any[]) => void
-  testID?: string
-}
-
-export class Hoverable extends React.Component<HoverableProps> {
-  render(): React.ReactElement
-}
-
-export type ShadowElevation =
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 13
-  | 14
-  | 15
-  | 16
-  | 17
-  | 18
-  | 19
-  | 20
-  | 21
-  | 22
-  | 23
-  | 24
-
-export type ShadowAndroidReturn = {
-  elevation: ShadowElevation
-}
-
-export type ShadowDefaultReturn = {
-  shadowColor: Color
-  shadowOffset: {
-    width: number
-    height: number
-  }
-  shadowOpacity: number
-  shadowRadius: number
-}
-
-export const shadow: (
-  elevation: ShadowElevation,
-) => ShadowAndroidReturn | ShadowDefaultReturn
-
-export type ColorRange = {
-  50: Color
-  100: Color
-  200: Color
-  300: Color
-  400: Color
-  500: Color
-  600: Color
-  700: Color
-  800: Color
-  900: Color
-  A100: Color
-  A200: Color
-  A400: Color
-  A700: Color
-}
-
-export const Colors: {
-  amber: ColorRange
-  blue: ColorRange
-  blueGrey: ColorRange
-  brown: ColorRange
-  cyan: ColorRange
-  deepOrange: ColorRange
-  deepPurple: ColorRange
-  green: ColorRange
-  grey: ColorRange
-  indigo: ColorRange
-  lightBlue: ColorRange
-  lightGreen: ColorRange
-  lime: ColorRange
-  orange: ColorRange
-  pink: ColorRange
-  purple: ColorRange
-  red: ColorRange
-  teal: ColorRange
-  yellow: ColorRange
-}
-
-export interface AvatarProps {
-  style?: StyleProp<any>
-  theme?: Theme
-  color?: Color
-  type?: 'image' | 'icon' | 'text'
-  size?: number
-  contentSize?: number
-  contentColor?: Color
-  contentStyles?: StyleProp<any>
-  content?: string
-  image?: React.ReactNode
-  onPress?: (e: GestureResponderEvent) => void
-  ripple?: boolean
-  rippleProps?: RippleProps
-  testID?: string
-  children?: React.ReactNode
-}
-
-export class Avatar extends React.Component<AvatarProps> {
-  render(): React.ReactElement
-}
-
-export interface BadgeProps {
-  color?: Color
-  textColor?: Color
-  content?: string | number
-  maxValue?: number
-  children?: React.ReactNode
-  size?: number
-  style?: StyleProp<any>
-  position?: 'right' | 'left'
-  onPress?: (e: GestureResponderEvent) => void
-
-  theme?: Theme
-  containerStyle?: StyleProp<any>
-  right?: number | string
-  left?: number | string
-  top?: number | string
-
-  visible?: boolean
-  testID?: string
-}
-
-export class Badge extends React.Component<BadgeProps> {
-  render(): React.ReactElement
-}
-
-export interface BaseButtonProps {
-  text?: string
-  icon?: React.ReactNode
-  iconPosition?: 'left' | 'right'
-  textStyle?: StyleProp<TextStyle>
-
-  theme?: Theme
-  style?: StyleProp<any>
-  children?: React.ReactNode
-
-  type?: 'outlined' | 'contained' | 'flat' | 'text'
-  onPress?: (e: GestureResponderEvent) => void
-
-  loading?: boolean
-  loader?: React.ReactNode
-  hideLabel?: boolean
-
-  color?: Color
-  radius?: number
-
-  fullWidth?: boolean
-  dense?: boolean
-
-  disabled?: boolean
-  disableRipple?: boolean
-
-  useInputCasing?: boolean
-
-  textColor?: Color
-  buttonStyles?: StyleProp<any>
-  rippleColor?: Color
-  onPressIn?: (e: GestureResponderEvent) => void
-  onPressOut?: (e: GestureResponderEvent) => void
-
-  testID?: string
-}
-
-export interface ContainedButtonProps {
-  disabled?: boolean
-  color?: Color
-  textColor?: Color
-  rippleColor?: Color
-  theme?: Theme
-  onPressIn?: (e: GestureResponderEvent) => void
-  onPressOut?: (e: GestureResponderEvent) => void
-  containerStyle?: StyleProp<any>
-  radius?: number
-  fullWidth?: boolean
-}
-
-export interface FlatButtonProps {
-  disabled?: boolean
-  color?: Color
-  textColor?: Color
-  rippleColor?: Color
-  theme?: Theme
-  onPressIn?: (e: GestureResponderEvent) => void
-  onPressOut?: (e: GestureResponderEvent) => void
-  containerStyle?: StyleProp<any>
-}
-
-export interface OutlinedButtonProps {
-  disabled?: boolean
-  color?: Color
-  textColor?: Color
-  rippleColor?: Color
-  theme?: Theme
-  borderSize?: number
-  containerStyle?: StyleProp<any>
-}
-
-export interface TextButtonProps {
-  disabled?: boolean
-  color?: Color
-  textColor?: Color
-  rippleColor?: Color
-  theme?: Theme
-  containerStyle?: StyleProp<any>
-}
-
-type SpecificButtonProps =
-  | ContainedButtonProps
-  | FlatButtonProps
-  | OutlinedButtonProps
-  | TextButtonProps
-
-export type ButtonProps = BaseButtonProps & SpecificButtonProps
-
-export class Button extends React.Component<ButtonProps> {
-  render(): React.ReactElement
-}
-
-export interface CheckboxProps {
-  checked: boolean
-
-  disabled?: boolean
-  onPress?: (e: GestureResponderEvent) => void
-  rippleColor?: Color
-  checkboxColor?: Color
-  unCheckedColor?: Color
-  style?: StyleProp<any>
-  checkboxStyle?: StyleProp<any>
-  theme?: Theme
-  rippleMatchesCheckbox?: boolean
-  indeterminate?: boolean
-
-  label?: string
-  labelStyle?: StyleProp<any>
-  labelPos?: string
-
-  icon?: React.ReactNode | string
-  size?: number
-  checkedIcon?: React.ReactNode | string
-
-  ios?: boolean
-
-  error?: boolean
-  testID?: string
-}
-
-export class Checkbox extends React.Component<CheckboxProps> {
-  render(): React.ReactElement
-}
-
-export interface ChipProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  theme?: Theme
-
-  chipStyle?: StyleProp<any>
-
-  color?: Color
-  themeColor?: Color
-  radius?: number
-
-  onPress?: (e: GestureResponderEvent) => void
-  onDelete?: (...args: any[]) => void
-  visible?: boolean
-
-  text?: string
-  textStyles?: StyleProp<any>
-
-  leftIcon?: React.ReactNode
-  rightIcon?: React.ReactNode
-
-  selected?: boolean
-  disabled?: boolean
-  testID?: string | (() => any)
-}
-
-export class Chip extends React.Component<ChipProps> {
-  render(): React.ReactElement
-}
-
-export interface DividerProps {
-  style?: StyleProp<any>
-  theme?: Theme
-  marginVertical?: number
-  subheader?: string
-  insetHeader?: number
-  insetLeft?: number
-  testID?: string
-}
-
-export class Divider extends React.Component<DividerProps> {
-  render(): React.ReactElement
-}
-
-export interface FabProps {
-  style?: StyleProp<any>
-  backgroundColor?: Color
-  onPress?: (e: GestureResponderEvent) => void
-  disabled?: boolean
-  rippleColor?: Color
-  icon?: React.ReactNode | string
-  shadow?: number
-  mini?: boolean
-  theme?: Theme
-  children?: React.ReactNode
-  visible?: boolean
-  initialScale?: number
-  animated?: boolean
-  label?: string
-  testID?: string
-  containerStyle?: StyleProp<any>
-}
-
-export class Fab extends React.Component<FabProps> {
-  render(): React.ReactElement
-}
-
-export interface IconProps {
-  name: string
-
-  style?: StyleProp<any>
-  theme?: Theme
-  color?: Color
-  size?: number
-  testID?: string
-  iconComponent?: React.Component
-}
-
-export class Icon extends React.Component<IconProps> {
-  render(): React.ReactElement
-}
-
-export interface IconButtonProps {
-  name: string
-  style?: StyleProp<any>
-  theme?: Theme
-  color?: Color
-  size?: number
-  onPress?: (e: GestureResponderEvent) => void
-  rippleColor?: Color
-  disabled?: boolean
-  testID?: string
-  iconComponent?: React.Component
-}
-
-export class IconButton extends React.Component<IconButtonProps> {
-  render(): React.ReactElement
-}
-
-export interface ListExpandProps {
-  expanded?: boolean
-  onPress?: (e: GestureResponderEvent) => void
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  title?: string
-  titleStyle?: StyleProp<any>
-  theme?: Theme
-  icon?: React.ReactNode
-  expandIconStyle?: StyleProp<any>
-  rippleProps?: RippleProps
-}
-
-export class ListExpand extends React.Component<ListExpandProps> {
-  render(): React.ReactElement
-}
-
-export interface ListItemProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  onPress?: (e: GestureResponderEvent) => void
-  disabled?: boolean
-  selected?: boolean
-  text?: string
-  textProps?: StyleProp<TextProps>
-  secondaryText?: string | React.ReactElement
-  secondaryTextProps?: StyleProp<TextProps>
-  media?: React.ReactNode
-  icon?: React.ReactNode
-  actionItem?: React.ReactNode
-  leadingActionItem?: React.ReactNode
-  textStyle?: StyleProp<TextStyle>
-  secondaryTextStyle?: StyleProp<TextProps>
-  rippleProps?: RippleProps
-  backgroundColor?: Color
-}
-
-export class ListItem extends React.Component<ListItemProps> {
-  render(): React.ReactElement
-}
-
-export interface ListSectionProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  label?: string
-  labelStyle?: StyleProp<any>
-  topDivider?: boolean
-  bottomDivider?: boolean
-  inset?: boolean
-  contentStyle?: StyleProp<any>
-  theme?: Theme
-}
-
-export class ListSection extends React.Component<ListSectionProps> {
-  render(): React.ReactElement
-}
-
-export interface ListProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  shadow?: number
-  subheader?: string
-  testID?: string
-}
-
-export class List extends React.Component<ListProps> {
-  render(): React.ReactElement
-}
-
-export interface ModalProps {
-  buttons: React.ReactElement
-  visible: boolean
-  onRequestClose: (...args: any[]) => void
-  onShow: (...args: any[]) => void
-  onTouchOutside: (e: GestureResponderEvent) => void
-  containerStyle: StyleProp<any>
-  NativeModalProps: StyleProp<any>
-  children: React.ReactNode
-}
-
-export class Modal extends React.Component<ModalProps> {
-  render(): React.ReactElement
-}
-
-export interface PaperProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  theme?: Theme
-  shadow?: number
-  radius?: number
-  testID?: string
-  elevation?: number
-}
-
-export class Paper extends React.Component<PaperProps> {
-  render(): React.ReactElement
-}
-
-export interface ProgressBarProps {
-  visible: boolean
-
-  color?: Color
-  height?: number
-  trackStyle?: StyleProp<any>
-  determinate?: boolean
-  indicatorStartPosition?: number
-  animationEasing?: (...args: any[]) => any
-  animationDuration?: number
-  value?: number
-  style?: StyleProp<any>
-  theme?: Theme
-  testID?: string
-}
-
-export class ProgressBar extends React.Component<ProgressBarProps> {
-  render(): React.ReactElement
-}
-
-export interface ProgressCircleProps {
-  color?: Color
-  size?: number
-  style?: StyleProp<any>
-  animationDuration?: number
-  animationEasing?: (...args: any[]) => any
-  visible?: boolean
-  determinate?: boolean
-  widthOfBorder?: number
-  testID?: string
-}
-
-export interface ProgressCircleDeterminateProps {
-  value?: number
-  size?: number
-  thickness?: number
-  color?: Color
-  unfilledColor?: Color
-  style?: StyleProp<any>
-  children?: React.ReactNode
-  animationMethod?: string
-  animationConfig?: {}
-  shouldAnimateFirstValue?: boolean
-  onChange?: (...args: any[]) => void
-  onChangeAnimationEnd?: (...args: any[]) => void
-  noTrackColor?: boolean
-}
-
-export class ProgressCircle extends React.Component<
-  ProgressCircleProps | ProgressCircleDeterminateProps
-> {
-  render(): React.ReactElement
-}
-
-export interface RadioButtonProps {
-  checked: boolean
-
-  disabled?: boolean
-  onPress?: (e: GestureResponderEvent) => void
-  rippleColor?: Color
-  radioButtonColor?: Color
-  uncheckedBorderColor?: Color
-  style?: StyleProp<any>
-
-  label?: string
-  labelStyle?: StyleProp<any>
-  labelPos?: string
-
-  error?: boolean
-  theme?: Theme
-  testID?: string
-}
-
-export class RadioButton extends React.Component<RadioButtonProps> {
-  render(): React.ReactElement
-}
-
-export interface RippleProps
-  extends ViewProps,
-    TouchableWithoutFeedbackProps {
-  rippleColor?: Color
-  rippleOpacity?: number
-  rippleDuration?: number
-  rippleSize?: number
-  rippleContainerBorderRadius?: number
-  rippleCentered?: boolean
-  rippleSequential?: boolean
-  rippleFades?: boolean
-  disabled?: boolean
-  displayUntilPressOut?: boolean
-
-  onRippleAnimation?: (...args: any[]) => void
-  testID?: string
-}
-
-export class Ripple extends React.Component<RippleProps> {
-  render(): React.ReactElement
-}
-
-export interface SliderProps {
-  value?: number
-  values?: number[]
-  sliderLength?: number
-  min?: number
-  max?: number
-  step?: number
-  disableOne?: boolean
-  disableTwo?: boolean
-  onValueChange?: (...args: any[]) => void
-  onValueChangeEnd?: (...args: any[]) => void
-  onValuesChange?: (...args: any[]) => void
-  onValuesChangeEnd?: (...args: any[]) => void
-  trackColor?: Color
-  markerColor?: Color
-  allowOverlap?: boolean
-  style?: StyleProp<any>
-  testID?: string
-  markerSize?: number
-  trackHeight?: number
-  trackStyle?: StyleProp<any>
-}
-
-export class Slider extends React.Component<SliderProps> {
-  render(): React.ReactElement
-}
-
-export interface SwitchProps {
-  checked: boolean
-
-  onPress?: (e: GestureResponderEvent) => void
-  style?: StyleProp<any>
-  trackStyle?: StyleProp<any>
-  thumbStyle?: StyleProp<any>
-  label?: React.ReactNode
-  labelPos?: string
-  theme?: Theme
-  color?: Color
-  loading?: boolean
-  testID?: string
-  width?: number
-}
-
-export class Switch extends React.Component<SwitchProps> {
-  render(): React.ReactElement
-}
-
-export interface SearchfieldProps {
-  color?: Color
-  iconProps?: IconProps
-  inputRef?: (...args: any[]) => any
-  onBlur?: (...args: any[]) => void
-  onChangeText?: (text: string) => void
-  onCloseIcon?: (...args: any[]) => void
-  onFocus?: (...args: any[]) => void
-  placeholder?: string
-  style?: StyleProp<any>
-  textStyle?: StyleProp<TextStyle>
-  value?: string
-}
-
-export class Searchfield extends React.Component<SearchfieldProps> {
-  render(): React.ReactElement
-}
-
-export interface TextFieldFilledProps {
-  style?: StyleProp<any>
-  containerStyle?: StyleProp<any>
-  error?: boolean
-  label?: string
-  labelColor?: Color
-  labelStyle?: StyleProp<any>
-  handleFocus?: (...args: any[]) => void
-  handleBlur?: (...args: any[]) => void
-  focused?: boolean
-  helperText?: string
-  helperVisible?: boolean
-  helperTextStyle?: StyleProp<any>
-  underlineColor?: Color
-  underlineActiveColor?: Color
-  leadingIcon?: React.ReactNode
-  trailingIcon?: React.ReactNode
-  dense?: boolean
-  value?: string
-  multiline?: boolean
-  suffix?: React.ReactNode
-  prefix?: React.ReactNode
-  testID?: string
-  focusedLabelColor?: string
-}
-
-export interface TextFieldFlatProps {
-  style?: StyleProp<any>
-  containerStyle?: StyleProp<any>
-  error?: boolean
-  label?: string
-  labelColor?: string
-  labelStyle?: StyleProp<any>
-  handleFocus?: (...args: any[]) => void
-  handleBlur?: (...args: any[]) => void
-  focused?: boolean
-  helperText?: string
-  helperVisible?: boolean
-  helperTextStyle?: StyleProp<any>
-  underlineColor?: string
-  underlineActiveColor?: StyleProp<any> | Color
-  leadingIcon?: React.ReactNode
-  trailingIcon?: React.ReactNode
-  dense?: boolean
-  value?: string
-  multiline?: boolean
-  suffix?: React.ReactNode
-  prefix?: React.ReactNode
-  testID?: string
-  focusedLabelColor?: string
-}
-
-export interface TextFieldOutlineProps {
-  style?: StyleProp<any>
-  containerStyle?: StyleProp<any>
-  error?: boolean
-  label?: string
-  labelColor?: string
-  labelStyle?: StyleProp<any>
-  handleFocus?: (...args: any[]) => void
-  handleBlur?: (...args: any[]) => void
-  focused?: boolean
-  helperText?: string
-  helperVisible?: boolean
-  helperTextStyle?: StyleProp<any>
-  leadingIcon?: React.ReactNode
-  trailingIcon?: React.ReactNode
-  dense?: boolean
-  value?: string
-  multiline?: boolean
-  suffix?: React.ReactNode
-  prefix?: React.ReactNode
-  testID?: string
-  focusedLabelColor?: Color
-}
-
-export interface TextFieldPropsBase {
-  type?: 'outlined' | 'filled' | 'flat'
-  onFocus?: (...args: any[]) => void
-  onBlur?: (...args: any[]) => void
-  disabled?: boolean
-  placeholder?: string
-  onChangeText?: (text: string) => void
-}
-
-type TextFieldSpecialProps =
-  | TextFieldFilledProps
-  | TextFieldOutlineProps
-  | TextFieldFlatProps
-export type TextFieldProps = TextFieldPropsBase & TextFieldSpecialProps
-
-export class TextField extends React.Component<TextFieldProps> {
-  render(): React.ReactElement
-}
-
-export interface TextFieldHelperTextProps {
-  error?: boolean
-  children?: React.ReactNode
-  visible?: boolean
-  style?: StyleProp<any>
-}
-
-export class TextFieldHelperText extends React.Component<TextFieldProps> {
-  render(): React.ReactElement
-}
-
-export interface ToggleButtonProps {
-  style?: StyleProp<any>
-  active?: boolean
-  onPress?: (e: GestureResponderEvent) => void
-  value?: string
-  activeNode?: React.ReactNode
-  inActiveNode?: React.ReactNode
-  rippleColor?: Color
-  size?: number
-  rippleContainerBorderRadius?: number
-  testID?: string
-}
-
-export class ToggleButton extends React.Component<ToggleButtonProps> {
-  render(): React.ReactElement
-}
-
-export interface ToggleButtonGroupProps {
-  onPress?: (e: GestureResponderEvent) => void
-  children?: React.ReactNode
-}
-
-export class ToggleButtonGroup extends React.Component<
-  ToggleButtonGroupProps
-> {
-  render(): React.ReactElement
-}
-
-export interface TooltipProps {
-  content: string
-
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  tooltipPosition?: MenuProps['tooltipPosition']
-  testID?: string
-}
-
-export class Tooltip extends React.Component<TooltipProps> {
-  render(): React.ReactElement
-}
-
-export interface BaseTextProps {
-  style?: StyleProp<any>
-  children?: React.ReactNode
-  typographyStyles?: StyleProp<TextStyle>
-  align?: 'center' | 'left' | 'right'
-  color?: Color
-  gutterBottom?: boolean
-  theme?: Theme
-  themeColor?: string
-}
-
-export class BaseText extends React.Component<BaseTextProps> {
-  render(): React.ReactElement
-}
-
-export interface BodyTextProps extends BaseTextProps {
-  text?: string
-  type?: number
-  children?: React.ReactNode
-  theme?: Theme
-  style?: StyleProp<any>
-}
-
-export class BodyText extends React.Component<BodyTextProps> {
-  render(): React.ReactElement
-}
-
-export interface CaptionProps extends BaseTextProps {
-  text?: string
-  children?: React.ReactNode
-  theme?: Theme
-}
-
-export class Caption extends React.Component<CaptionProps> {
-  render(): React.ReactElement
-}
-
-export interface HeadingProps extends BaseTextProps {
-  text?: string
-  type?: 1 | 2 | 3 | 4 | 5 | 6
-  children?: React.ReactNode
-  theme?: Theme
-}
-
-export class Heading extends React.Component<HeadingProps> {
-  render(): React.ReactElement
-}
-
-export interface OverlineProps extends BaseTextProps {
-  text?: string
-  children?: React.ReactNode
-  theme?: Theme
-}
-
-export class Overline extends React.Component<OverlineProps> {
-  render(): React.ReactElement
-}
-
-export interface SubtitleProps extends BaseTextProps {
-  text?: string
-  type?: number
-  children?: React.ReactNode
-  theme?: Theme
-}
-
-export class Subtitle extends React.Component<SubtitleProps> {
-  render(): React.ReactElement
-}
-
-export interface AppbarProps {
-  color?: Color
-  style?: StyleProp<any>
-  theme?: Theme
-  barType?: 'normal' | 'simple' | 'prominent' | 'dense' | 'prominent dense'
-  backgroundImage?: React.ReactNode
-  position?: string
-  elevation?: number
-
-  navigation?: string | React.ReactNode
-  onNavigation?: (...args: any[]) => void
-
-  title?: string
-  titleStyles?: StyleProp<any>
-  onTitle?: (...args: any[]) => void
-  subtitle?: string
-  subtitleStyles?: StyleProp<TextStyle>
-  textContainerStyles?: StyleProp<TextStyle>
-
-  actionItems?: React.ReactNode
-
-  children?: React.ReactNode
-}
-
-export class Appbar extends React.Component<AppbarProps> {
-  render(): React.ReactElement
-}
-
-export interface AppbarBottomProps {
-  color?: Color
-  style?: StyleProp<any>
-  theme?: Theme
-
-  fab?: React.ReactNode | string
-  fabStyles?: StyleProp<any>
-  fabPosition?: string
-  fabCutout?: boolean
-
-  navigation?: React.ReactNode | string
-  onNavigation?: (...args: any[]) => void
-
-  actionItems?: React.ReactNode
-
-  children?: React.ReactNode
-  appbarStyles?: StyleProp<any>
-}
-
-export class AppbarBottom extends React.Component<AppbarBottomProps> {
-  render(): React.ReactElement
-}
-
-export interface BackdropProps {
-  backLayerConcealed: React.ReactNode
-  backLayerRevealed: React.ReactNode
-
-  backLayerStyle?: StyleProp<any>
-  frontLayerStyle?: StyleProp<any>
-  headerButtonStyle?: StyleProp<any>
-  style?: StyleProp<any>
-  offset?: number
-  initialOffset?: number
-  children?: React.ReactNode
-  theme?: Theme
-  subheader?: string
-  testID?: string
-}
-
-export class Backdrop extends React.Component<BackdropProps> {
-  render(): React.ReactElement
-}
-
-export interface BannerProps {
-  mobileLayout?: boolean
-  style?: StyleProp<any>
-  actionItems?: any[]
-  singleLine?: boolean
-  media?: React.ReactNode
-  visible?: boolean
-
-  message?: string
-  position?: string
-  testID?: string
-}
-
-export class Banner extends React.Component<BannerProps> {
-  render(): React.ReactElement
-}
-
-export interface BottomNavigationProps {
-  value: string | number
-  actionItems: any[]
-
-  backgroundColor?: Color
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  showLabels?: boolean
-  handleChange?: (...args: any[]) => void
-  horizontalWhenLandscape?: boolean
-  testID?: string
-}
-
-export class BottomNavigation extends React.Component<BottomNavigationProps> {
-  render(): React.ReactElement
-}
-
-export interface BottomNavigationItemProps {
-  children?: React.ReactNode
-  active?: boolean
-  icon?: string
-  label?: string
-  showLabel?: boolean
-  onPress?: (e: GestureResponderEvent) => void
-  handleChange?: (...args: any[]) => void
-  value?: number | string
-  showLabels?: boolean
-  style?: StyleProp<any>
-  badgeProps?: BadgeProps
-  rippleProps?: RippleProps
-  testID?: string
-  isLandscape?: boolean
-  onItemLayout?: (...args: any[]) => void
-  maxWidth?: number
-  horizontal?: boolean
-}
-
-export class BottomNavigationItem extends React.Component<
-  BottomNavigationItemProps
-> {
-  render(): React.ReactElement
-}
-
-export interface CardActionsProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  leftActionItems?: any[]
-  rightActionItems?: any[]
-}
-
-export class CardActions extends React.Component<CardActionsProps> {
-  render(): React.ReactElement
-}
-
-export interface CardContentProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  rippleProps?: RippleProps
-  onPress?: (e: GestureResponderEvent) => void
-}
-
-export class CardContent extends React.Component<CardContentProps> {
-  render(): React.ReactElement
-}
-
-export interface CardHeaderProps {
-  children?: React.ReactNode
-  thumbnail?: React.ReactNode
-  action?: React.ReactNode
-  title?: string
-  titleStyles?: StyleProp<TextStyle>
-  subtitle?: string
-  subtitleStyles?: StyleProp<TextStyle>
-  style?: StyleProp<any>
-}
-
-export class CardHeader extends React.Component<CardHeaderProps> {
-  render(): React.ReactElement
-}
-
-export interface CardMediaProps {
-  children?: React.ReactNode
-  image?: React.ReactNode
-  style?: StyleProp<any>
-  title?: string
-  titleStyles?: StyleProp<TextStyle>
-  subtitle?: string
-  subtitleStyles?: StyleProp<TextStyle>
-  height?: number
-}
-
-export class CardMedia extends React.Component<CardMediaProps> {
-  render(): React.ReactElement
-}
-
-export interface CardProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  outlined?: boolean
-  shadow?: number
-  radius?: number
-  onPress?: (e: GestureResponderEvent) => void
-  rippleProps?: RippleProps
-  testID?: string
-}
-
-export class Card extends React.Component<CardProps> {
-  render(): React.ReactElement
-}
-
-export interface DataTableCellProps {
-  text: string
-
-  type?: 'up' | 'header'
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  right?: boolean
-  borderRight?: boolean
-  borderLeft?: boolean
-  minWidth?: number
-  onPress?: (e: GestureResponderEvent) => void
-  sortingIcon?: string
-  relativeWidth?: number
-  textStyle?: StyleProp<any>
-}
-
-export class DataTableCell extends React.Component<DataTableCellProps> {
-  render(): React.ReactElement
-}
-
-export interface DataTableHeaderProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  rightActions?: React.ReactNode
-  leftActions?: React.ReactNode
-  title?: string
-}
-
-export class DataTableHeader extends React.Component<DataTableHeaderProps> {
-  render(): React.ReactElement
-}
-
-export interface DataTablePaginationProps {
-  page: number
-  numberOfPages: number
-  numberOfRows: number
-  perPage: number
-
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  possibleNumberPerPage?: number
-  onChangePage?: (page: number) => void
-  onChangeRowsPerPage?: (perPage: number) => void
-}
-
-export class DataTablePagination extends React.Component<
-  DataTablePaginationProps
-> {
-  render(): React.ReactElement
-}
-
-export interface DataTableRowProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  borderBottomColor?: Color
-  selected?: boolean
-  onPressCheckbox?: (...args: any[]) => void
-  showCheckbox?: boolean
-  checkboxOffset?: boolean
-  onPress?: (e: GestureResponderEvent) => void
-  hover?: boolean
-  type?: string
-}
-
-export class DataTableRow extends React.Component<DataTableRowProps> {
-  render(): React.ReactElement
-}
-
-export interface DataTableProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  testID?: string
-}
-
-export class DataTable extends React.Component<DataTableProps> {
-  render(): React.ReactElement
-}
-
-export interface DialogProps {
-  visible: boolean
-
-  actionItems?: React.ReactNode[]
-  style?: StyleProp<any>
-  children?: React.ReactNode
-  onRequestClose?: (...args: any[]) => void
-  onShow?: (...args: any[]) => void
-  onTouchOutside?: (...args: any[]) => void
-  title?: string
-  titleStyle?: StyleProp<any>
-  supportingText?: string
-  supportingTextStyle?: StyleProp<any>
-  contentStyle?: StyleProp<any>
-  testID?: string
-}
-
-export class Dialog extends React.Component<DialogProps> {
-  render(): React.ReactElement
-}
-
-export interface DrawerHeaderProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  title?: string
-  subtitle?: string
-  avatar?: React.ReactNode
-}
-
-export class DrawerHeader extends React.Component<DrawerHeaderProps> {
-  render(): React.ReactElement
-}
-
-export interface DrawerItemProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  text?: string
-  icon?: string
-  onPress?: (e: GestureResponderEvent) => void
-  active?: boolean
-}
-
-export class DrawerItem extends React.Component<DrawerItemProps> {
-  render(): React.ReactElement
-}
-
-export interface DrawerSectionProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  label?: string
-  topDivider?: boolean
-  bottomDivider?: boolean
-  fullWidth?: boolean
-}
-
-export class DrawerSection extends React.Component<DrawerSectionProps> {
-  render(): React.ReactElement
-}
-
-export interface DrawerProps {
-  open: boolean
-  drawerContent: React.ReactNode
-  onClose: (...args: any[]) => void
-
-  type?: 'push' | 'permanent'
-  children?: React.ReactNode
-  animationTime?: number
-
-  pageHeight?: number
-  pageWidth?: number
-  widthPercentage?: number
-  width?: number
-  fullHeight?: boolean
-  position?: string
-
-  appbar?: React.ReactNode
-  scrim?: boolean
-  scrimColor?: string
-  scrimOpacity?: number
-
-  style?: StyleProp<any>
-  contentContainerStyle?: StyleProp<any>
-  drawerStyle?: StyleProp<any>
-  scrimStyles?: StyleProp<any>
-  testID?: string
-}
-
-export class Drawer extends React.Component<DrawerProps> {
-  render(): React.ReactElement
-}
-
-export interface DrawerBottomProps extends SheetBottomProps {
-  children?: React.ReactNode
-  style?: StyleProp<any>
-}
-
-export class DrawerBottom extends React.Component<DrawerBottomProps> {
-  render(): React.ReactElement
-}
-
-export interface FabSpeedDialProps {
-  fab?: React.ReactNode | string
-  actions?: React.ReactNode
-  extended?: boolean
-  style?: StyleProp<any>
-  onPress?: (e: GestureResponderEvent) => void
-  testID?: string
-}
-
-export class FabSpeedDial extends React.Component<FabSpeedDialProps> {
-  render(): React.ReactElement
-}
-
-export interface MenuItemProps {
-  text?: string
-  children?: React.ReactNode
-  disabled?: boolean
-  onPress?: (e: GestureResponderEvent) => void
-  style?: StyleProp<any>
-  textStyle?: StyleProp<TextStyle>
-  icon?: React.ReactNode
-  keyboardCommand?: React.ReactNode
-}
-
-export class MenuItem extends React.Component<MenuItemProps> {
-  render(): React.ReactElement
-}
-
-export interface MenuProps {
-  button?: React.ReactNode
-  children?: React.ReactNode
-  onHidden?: (...args: any[]) => void
-  style?: StyleProp<any>
-  visible?: boolean
-  menuStyle?: StyleProp<any>
-  sameWidth?: boolean
-  onBackdropPress?: (...args: any[]) => void
-  modalMenuStyle?: StyleProp<any>
-  contentContainerStyle?: StyleProp<any>
-  noBackDrop?: boolean
-  tooltip?: boolean
-  tooltipPosition?: string
-  testID?: string
-}
-
-export class Menu extends React.Component<MenuProps> {
-  render(): React.ReactElement
-}
-
-export interface SearchbarProps {
-  value?: string
-  style?: StyleProp<any>
-  onChangeText?: (text: string) => void
-  onCloseIcon?: (...args: any[]) => void
-  onNavigation?: (...args: any[]) => void
-  placeholder?: string
-}
-
-export class Searchbar extends React.Component<SearchbarProps> {
-  render(): React.ReactElement
-}
-
-export interface SelectProps {
-  onSelect?: (...args: any[]) => void
-  buttonStyle?: StyleProp<any>
-  label?: string
-  selectedItem?: React.ReactNode
-  menuItems?: any[]
-  visible?: boolean
-  textFieldProps?: TextFieldProps
-  menuProps?: MenuProps
-  type?: TextFieldProps['type']
-  onBackdropPress?: (e: GestureResponderEvent) => void
-  theme?: Theme
-  testID?: string
-}
-
-export class Select extends React.Component<SelectProps> {
-  render(): React.ReactElement
-}
-
-export interface SheetBottomProps {
-  visible: boolean
-  duration?: number
-  onBackdropPress?: (...args: any[]) => void
-  onSwipeDown?: (...args: any[]) => void
-  onSwipeUp?: (...args: any[]) => void
-  children?: React.ReactNode
-  wrapperStyles?: StyleProp<any>
-  style?: StyleProp<any>
-  cardVerticalPadding?: number
-  pageHeight?: number
-  testID?: string
-}
-
-export class SheetBottom extends React.Component<SheetBottomProps> {
-  render(): React.ReactElement
-}
-
-export interface SheetSideProps {
-  duration?: number
-  onBackdropPress?: (...args: any[]) => void
-  onSwipeLeft?: (...args: any[]) => void
-  onSwipeRight?: (...args: any[]) => void
-  children?: React.ReactNode
-  wrapperStyles?: StyleProp<any>
-  style?: StyleProp<any>
-  visible?: boolean
-  pageWidth?: number
-  pageHeight?: number
-  widthPercentage?: number
-  side?: string
-  testID?: string
-}
-
-export class SheetSide extends React.Component<SheetSideProps> {
-  render(): React.ReactElement
-}
-
-export interface SnackbarProps {
-  visible?: boolean
-  animationDuration?: number
-  children?: React.ReactNode
-  style?: StyleProp<any>
-  onButtonPress?: (e: GestureResponderEvent) => void
-  buttonLabel?: string
-  buttonTextColor?: Color
-  testID?: string
-}
-
-export class Snackbar extends React.Component<SnackbarProps> {
-  render(): React.ReactElement
-}
-
-export interface SwipeNavProps {
-  header?: React.ReactNode
-  footer?: React.ReactNode
-  scrollViewProps?: ScrollViewProps
-  scrollComponent?: React.ReactNode
-  style?: StyleProp<any>
-  headerContainerStyle?: StyleProp<any>
-  footerContainerStyle?: StyleProp<any>
-  scrollViewStyle?: StyleProp<any>
-  children?: React.ReactNode
-}
-
-export class SwipeNav extends React.Component<SwipeNavProps> {
-  render(): React.ReactElement
-}
-
-export interface TabsProps {
-  actionItems?: string | React.ReactNode
-  selectedIndex?: number
-  backgroundColor?: string
-  underlineColor?: string
-  scrollEnabled?: boolean
-  handleChange?: (...args: any[]) => void
-  style?: StyleProp<any>
-  theme?: Theme
-  testID?: string
-}
-
-export class Tabs extends React.Component<TabsProps> {
-  render(): React.ReactElement
-}
-
-export interface TabProps {
-  label?: string
-  active?: boolean
-  activeTextColor?: string
-  inActiveTextColor?: string
-  textStyle?: StyleProp<any>
-  iconStyles?: StyleProp<any>
-  onPress?: (e: GestureResponderEvent) => void
-  tabWidth?: number
-  style?: StyleProp<any>
-  icon?: string
-  rippleProps?: RippleProps
-}
-
-export class Tab extends React.Component<TabProps> {
-  render(): React.ReactElement
-}


Test patch:
diff --git a/src/Components/Drawer/DrawerHeader/__snapshots__/DrawerHeader.test.js.snap b/src/Components/Drawer/DrawerHeader/__snapshots__/DrawerHeader.test.js.snap
index 719f715..66d35b8 100644
--- a/src/Components/Drawer/DrawerHeader/__snapshots__/DrawerHeader.test.js.snap
+++ b/src/Components/Drawer/DrawerHeader/__snapshots__/DrawerHeader.test.js.snap
@@ -3,15 +3,12 @@
 exports[`DrawerHeader Renders 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "rgba(0,0,0,.12)",
-        "borderBottomWidth": 0.5,
-        "paddingHorizontal": 16,
-        "paddingVertical": 18,
-      },
-      undefined,
-    ]
+    Object {
+      "borderBottomColor": "rgba(0,0,0,.12)",
+      "borderBottomWidth": 0.5,
+      "paddingHorizontal": 16,
+      "paddingVertical": 18,
+    }
   }
 >
   <Text