Repository: codypearce/material-bread
Pull request #330 (2019-11-13 17:24:22)

Few material-bread enhancement
I Love material-bread !

I made a few modification :
- [x] Add iconComponent to drawer-item
- [x]  SearchBar update with navigationIcon and closeIcon
- [x] Passing `theme` in props in searchBar, Drawer, DrawerHeader, DrawerItem.
- [x] Update DefaultTheme to exclude hard coded styles in searchBar, Drawer, DrawerHeader, DrawerItem.
- [x] Drawer component drawerWidth calcul update. You can pass `widthPercentage` or `width` props.
- [x] Doc update.
- [x] Travis Cl build fix


Patch:
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/drawer-item/propData.js b/docs/src/content/components/drawer-item/propData.js
index 5b5efb5..ea795c1 100644
--- a/docs/src/content/components/drawer-item/propData.js
+++ b/docs/src/content/components/drawer-item/propData.js
@@ -3,6 +3,12 @@ const propData = [
   ['active', 'Toggles active state for drawer item', 'bool', ''],
   ['onPress', 'Callback when item is pressed', 'func', ''],
   ['icon', 'Icon name for icon shown on left', 'string', ''],
+  [
+    'iconComponent',
+    'One of the Icon components from react-native-vector-icons',
+    'function',
+    '',
+  ],
   ['style', 'Styles container element', 'object', ''],
   ['text', 'Text shown for item', 'string', ''],
 ];
diff --git a/docs/src/content/components/searchbar/propData.js b/docs/src/content/components/searchbar/propData.js
index b6b7424..6ffe7b5 100644
--- a/docs/src/content/components/searchbar/propData.js
+++ b/docs/src/content/components/searchbar/propData.js
@@ -5,6 +5,21 @@ const propData = [
   ['onNavigation', 'Callback when navigation icon is Pressed', 'func', ''],
   ['style', 'Styles root element', 'object', ''],
   ['value', 'Search input', 'string', ''],
+  ['placeholder', 'Placeholder for input search', 'string', 'Search'],
+  ['navigationIcon', 'Navigation icon name', 'string', 'arrow-back'],
+  [
+    'navigationIconComponent',
+    'One of the Icon components from react-native-vector-icons',
+    'function',
+    '',
+  ],
+  ['closeIcon', 'Close icon name', 'string', 'close'],
+  [
+    'closeIconComponent',
+    'One of the Icon components from react-native-vector-icons',
+    'function',
+    '',
+  ],
 ];
 
 export default createTableData(propData);
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/src/Components/Appbar/Searchbar/Searchbar.js b/src/Components/Appbar/Searchbar/Searchbar.js
index ca77c89..9d30472 100644
--- a/src/Components/Appbar/Searchbar/Searchbar.js
+++ b/src/Components/Appbar/Searchbar/Searchbar.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { View, TextInput } from 'react-native';
 import withTheme from '../../../Theme/withTheme';
 import IconButton from '../../IconButton/IconButton';
-import styles from './Searchbar.styles';
 
 class Searchbar extends Component {
   static propTypes = {
@@ -13,37 +12,69 @@ class Searchbar extends Component {
     onCloseIcon: PropTypes.func,
     onNavigation: PropTypes.func,
     placeholder: PropTypes.string,
+    navigationIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    navigationIconComponent: PropTypes.func,
+    closeIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    closeIconComponent: PropTypes.func,
+    theme: PropTypes.object,
   };
 
-  render() {
+  _renderNavigation() {
     const {
-      style,
-      onChangeText,
-      onCloseIcon,
+      navigationIcon = '',
       onNavigation,
-      value,
-      placeholder,
+      navigationIconComponent,
+      theme,
     } = this.props;
-    return (
-      <View style={[styles.container, style]}>
+
+    if (
+      typeof navigationIcon === 'string' ||
+      navigationIcon instanceof String
+    ) {
+      return (
         <IconButton
-          name="arrow-back"
-          size={24}
-          color={'black'}
+          name={navigationIcon || 'arrow-back'}
+          size={theme.searchBarNavigationIcon.size}
+          color={theme.searchBarNavigationIcon.color}
           onPress={onNavigation}
+          iconComponent={navigationIconComponent}
+        />
+      );
+    } else {
+      return navigationIcon;
+    }
+  }
+
+  _renderClose() {
+    const { closeIcon, onCloseIcon, closeIconComponent, theme } = this.props;
+    // To hide close icon send closeIcon={false}
+    if (typeof closeIcon === 'string' || closeIcon instanceof String) {
+      return (
+        <IconButton
+          name={closeIcon || 'close'}
+          size={theme.searchBarcloseIcon.size}
+          color={theme.searchBarcloseIcon.color}
+          onPress={onCloseIcon}
+          iconComponent={closeIconComponent}
         />
+      );
+    } else if (closeIcon) {
+      return closeIcon;
+    }
+  }
+
+  render() {
+    const { style, onChangeText, value, placeholder, theme } = this.props;
+    return (
+      <View style={[theme.searchBar, style]}>
+        {this._renderNavigation()}
         <TextInput
-          style={styles.searchInput}
+          style={theme.searchInput}
           placeholder={placeholder ? placeholder : 'Search'}
           onChangeText={onChangeText}
           value={value}
         />
-        <IconButton
-          name="close"
-          size={24}
-          color={'black'}
-          onPress={onCloseIcon}
-        />
+        {this._renderClose()}
       </View>
     );
   }
diff --git a/src/Components/Appbar/Searchbar/Searchbar.styles.js b/src/Components/Appbar/Searchbar/Searchbar.styles.js
index 4a47067..60a6956 100644
--- a/src/Components/Appbar/Searchbar/Searchbar.styles.js
+++ b/src/Components/Appbar/Searchbar/Searchbar.styles.js
@@ -2,19 +2,8 @@ import { StyleSheet } from 'react-native';
 import shadow from '../../../Utils/Shadow/shadow.js';
 
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-    backgroundColor: 'rgba(255,255,255,1)',
-    height: 56,
-    paddingHorizontal: 16,
-  },
+  container: {},
   searchInput: {
-    fontSize: 16,
-    flex: 1,
-    marginLeft: 8,
-    height: 30,
     ...shadow(0),
   },
 });
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/Drawer.js b/src/Components/Drawer/Drawer.js
index 321fa80..fc4da8d 100644
--- a/src/Components/Drawer/Drawer.js
+++ b/src/Components/Drawer/Drawer.js
@@ -49,11 +49,10 @@ class Drawer extends PureComponent {
     drawerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     scrimStyles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     testID: PropTypes.string,
+    theme: PropTypes.object,
   };
 
   static defaultProps = {
-    widthPercentage: 0.45,
-    width: 240,
     open: false,
     animationTime: 200,
     scrimOpacity: 0.4,
@@ -85,7 +84,7 @@ class Drawer extends PureComponent {
     if (pageWidth) screenWidth = pageWidth;
     if (pageHeight) screenHeight = pageHeight;
 
-    let drawerWidth = screenWidth * widthPercentage;
+    let drawerWidth = screenWidth * (widthPercentage || 0.45);
     if (width) drawerWidth = width;
 
     this.setState({
@@ -238,6 +237,7 @@ class Drawer extends PureComponent {
       drawerStyle,
       fullHeight,
       position,
+      theme,
     } = this.props;
     const { drawerWidth, screenHeight, leftOffset, appbarHeight } = this.state;
 
@@ -251,7 +251,7 @@ class Drawer extends PureComponent {
       <Fragment>
         <Animated.View
           style={[
-            styles.drawer,
+            theme.drawer,
             {
               position: position,
               width: drawerWidth,
diff --git a/src/Components/Drawer/DrawerHeader/DrawerHeader.js b/src/Components/Drawer/DrawerHeader/DrawerHeader.js
index ff5b5cd..167ca1f 100644
--- a/src/Components/Drawer/DrawerHeader/DrawerHeader.js
+++ b/src/Components/Drawer/DrawerHeader/DrawerHeader.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, Text } from 'react-native';
 import withTheme from '../../../Theme/withTheme';
-import styles from './DrawerHeader.styles';
 
 class DrawerHeader extends Component {
   static propTypes = {
@@ -11,22 +10,23 @@ class DrawerHeader extends Component {
     title: PropTypes.string,
     subtitle: PropTypes.string,
     avatar: PropTypes.node,
+    theme: PropTypes.object,
   };
 
   _renderAvatar() {
-    const { avatar } = this.props;
+    const { avatar, theme } = this.props;
 
-    return <View style={styles.avatarContainer}>{avatar}</View>;
+    return <View style={theme.drawerHeaderAvatarContainer}>{avatar}</View>;
   }
 
   render() {
-    const { avatar, title, subtitle, style } = this.props;
+    const { avatar, title, subtitle, style, theme } = this.props;
 
     return (
-      <View style={[styles.drawerHeader, style]}>
+      <View style={[theme.drawerHeader, style]}>
         {avatar ? this._renderAvatar() : null}
-        <Text style={styles.title}>{title}</Text>
-        <Text style={styles.subtitle}>{subtitle}</Text>
+        <Text style={theme.drawerHeaderTitle}>{title}</Text>
+        <Text style={theme.drawerHeaderSubtitle}>{subtitle}</Text>
       </View>
     );
   }
diff --git a/src/Components/Drawer/DrawerItem/DrawerItem.js b/src/Components/Drawer/DrawerItem/DrawerItem.js
index 29afe52..765b03b 100644
--- a/src/Components/Drawer/DrawerItem/DrawerItem.js
+++ b/src/Components/Drawer/DrawerItem/DrawerItem.js
@@ -4,7 +4,6 @@ import { Text } from 'react-native';
 import withTheme from '../../../Theme/withTheme';
 import Ripple from '../../Ripple/Ripple';
 import Icon from '../../Icon/Icon';
-import styles from './DrawerItem.styles';
 
 class DrawerItem extends Component {
   static propTypes = {
@@ -14,30 +13,43 @@ class DrawerItem extends Component {
     icon: PropTypes.string,
     onPress: PropTypes.func,
     active: PropTypes.bool,
+    iconComponent: PropTypes.func,
+    theme: PropTypes.object,
   };
 
   render() {
-    const { icon, text, onPress, active } = this.props;
+    const { icon, text, onPress, active, iconComponent, theme } = this.props;
 
     return (
       <Ripple
         style={[
-          styles.drawerItem,
+          theme.drawerItem,
           {
-            backgroundColor: active ? 'rgba(30, 136, 229, .2)' : 'transparent',
+            backgroundColor: active
+              ? theme.drawerItemActive.backgroundColor
+              : theme.drawerItem.backgroundColor,
           },
         ]}
         onPress={onPress}
         rippleContainerBorderRadius={4}>
         {icon ? (
-          <Icon name={icon} size={20} color={active ? '#1e88e5' : 'grey'} />
+          <Icon
+            name={icon}
+            size={theme.drawerItemIcon.size}
+            color={
+              active ? theme.drawerItemActive.color : theme.drawerItemIcon.color
+            }
+            iconComponent={iconComponent}
+          />
         ) : null}
         <Text
           style={[
-            styles.text,
+            theme.drawerItemText,
             {
               marginLeft: icon ? 24 : 0,
-              color: active ? '#1e88e5' : 'rgba(0,0,0,.87)',
+              color: active
+                ? theme.drawerItemActive.color
+                : theme.drawerItemText.color,
             },
           ]}>
           {text}
diff --git a/src/Components/Drawer/DrawerSection/DrawerSection.js b/src/Components/Drawer/DrawerSection/DrawerSection.js
index 270f083..91f9051 100644
--- a/src/Components/Drawer/DrawerSection/DrawerSection.js
+++ b/src/Components/Drawer/DrawerSection/DrawerSection.js
@@ -22,12 +22,13 @@ class DrawerSection extends Component {
       topDivider,
       bottomDivider,
       fullWidth,
+      style,
     } = this.props;
 
     return (
       <View
         style={[
-          styles.drawerSection,
+          style,
           { paddingHorizontal: fullWidth ? 0 : 8, paddingTop: label ? 8 : 0 },
         ]}>
         {topDivider ? <Divider /> : null}
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/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..586c3dc 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';
 
@@ -37,11 +32,8 @@ class Switch extends Component {
 
   componentDidMount() {
     const { checked, width } = this.props;
-    const { thumbTranslateX } = this.state;
-
     if (checked) {
-      const xValue = width / 2;
-      thumbTranslateX.setValue(I18nManager.isRTL ? -xValue : xValue);
+      this.setState({ thumbTranslateX: new Animated.Value(width / 2) });
     }
   }
 
@@ -79,7 +71,7 @@ class Switch extends Component {
 
     Animated.parallel([
       Animated.timing(thumbTranslateX, {
-        toValue: I18nManager.isRTL ? -xValue : xValue,
+        toValue: xValue,
         duration: 300,
       }),
     ]).start();
@@ -100,7 +92,7 @@ class Switch extends Component {
         top: height * -(9 / 32),
         left: width * -(2 / 9),
       },
-      thumbDimensions: {
+      tumbDimensions: {
         width: width * (5 / 9),
         height: height * (5 / 8),
       },
@@ -134,7 +126,7 @@ class Switch extends Component {
       height,
       trackDimensions,
       thumbRippleDimensions,
-      thumbDimensions,
+      tumbDimensions,
     } = this.getDimensions(width);
 
     return (
@@ -167,7 +159,7 @@ class Switch extends Component {
                 styles.thumb,
                 {
                   backgroundColor: checked && !loading ? thumbColor : 'white',
-                  ...thumbDimensions,
+                  ...tumbDimensions,
                 },
                 thumbStyle,
               ]}>
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/Theme/defaultTheme.js b/src/Theme/defaultTheme.js
index 221caa7..e5ebe8c 100644
--- a/src/Theme/defaultTheme.js
+++ b/src/Theme/defaultTheme.js
@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import shadow from '../Utils/Shadow/shadow';
 
 export default {
   primary: {
@@ -40,10 +41,58 @@ export default {
   },
   divider: {
     width: '100%',
-
     backgroundColor: 'rgba(0,0,0,.12)',
   },
-
+  drawer: {
+    position: 'absolute',
+    zIndex: 100,
+    borderRightWidth: 1,
+    borderRightColor: 'rgba(0,0,0,.12)',
+    borderStyle: 'solid',
+    backgroundColor: 'white',
+  },
+  drawerHeader: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: 'rgba(0,0,0,.12)',
+    paddingHorizontal: 16,
+    paddingVertical: 18,
+  },
+  drawerHeaderAvatarContainer: {
+    marginBottom: 20,
+  },
+  drawerHeaderTitle: {
+    fontSize: 20,
+    fontWeight: '500',
+    color: 'rgba(0,0,0,.87)',
+  },
+  drawerHeaderSubtitle: {
+    marginTop: 4,
+    fontSize: 12,
+    color: 'rgba(0,0,0,.67)',
+  },
+  drawerItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    height: 40,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    zIndex: 10,
+  },
+  drawerItemActive: {
+    backgroundColor: 'rgba(30, 136, 229, .2)',
+    color: '#1e88e5',
+  },
+  drawerItemText: {
+    fontSize: 14,
+    color: 'rgba(0,0,0,.87)',
+    fontWeight: '500',
+    zIndex: 10,
+  },
+  drawerItemIcon: {
+    color: 'grey',
+    size: 20,
+  },
   button: {
     padding: 8,
     borderRadius: 4,
@@ -115,6 +164,29 @@ export default {
     letterSpacing: 1.5,
     textTransform: 'uppercase',
   },
+  searchBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    backgroundColor: 'rgba(255,255,255,1)',
+    height: 56,
+    paddingHorizontal: 16,
+  },
+  searchBarNavigationIcon: {
+    color: 'black',
+    size: 24,
+  },
+  searchBarcloseIcon: {
+    color: 'black',
+    size: 24,
+  },
+  searchInput: {
+    fontSize: 16,
+    flex: 1,
+    marginLeft: 8,
+    height: 30,
+    ...shadow(0),
+  },
   subtitleOne: {
     fontSize: 16,
     lineHeight: 16,
diff --git a/src/index.js b/src/index.js
index 304b7ea..1d869a5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -54,18 +54,12 @@ export {
 export { default as Menu, MenuItem } from './Components/Menu';
 export { default as Paper } from './Components/Paper/Paper.js';
 export { default as ProgressBar } from './Components/Progress/ProgressBar';
-export {
-  default as ProgressCircle,
-} from './Components/Progress/ProgressCircle';
+export { default as ProgressCircle } from './Components/Progress/ProgressCircle';
 export { default as RadioButton } from './Components/RadioButton';
 export { default as Ripple } from './Components/Ripple';
 export { default as Select } from './Components/Select';
-export {
-  default as Searchfield,
-} from './Components/TextField/Searchfield/Searchfield.js';
-export {
-  default as Searchbar,
-} from './Components/Appbar/Searchbar/Searchbar.js';
+export { default as Searchfield } from './Components/TextField/Searchfield/Searchfield.js';
+export { default as Searchbar } from './Components/Appbar/Searchbar/Searchbar.js';
 export { default as SheetBottom } from './Components/SheetBottom';
 export { default as SheetSide } from './Components/SheetSide';
 export { default as Slider } from './Components/Slider';
diff --git a/src/storybook/stories/index.js b/src/storybook/stories/index.js
index b974560..30de19d 100644
--- a/src/storybook/stories/index.js
+++ b/src/storybook/stories/index.js
@@ -2,164 +2,76 @@ export { default as Home } from './Home.stories.js';
 
 /* Components */
 export { default as Appbar } from '../../Components/Appbar/Appbar.stories';
-export {
-  default as AppbarBottom,
-} from '../../Components/AppbarBottom/AppbarBottom.stories.js';
+export { default as AppbarBottom } from '../../Components/AppbarBottom/AppbarBottom.stories.js';
 export { default as Avatar } from '../../Components/Avatar/Avatar.stories.js';
-export {
-  default as Backdrop,
-} from '../../Components/Backdrop/Backdrop.stories.js';
+export { default as Backdrop } from '../../Components/Backdrop/Backdrop.stories.js';
 export { default as Badge } from '../../Components/Badge/Badge.stories.js';
 export { default as Banner } from '../../Components/Banner/Banner.stories.js';
-export {
-  default as BottomNavigation,
-} from '../../Components/BottomNavigation/BottomNavigation.stories.js';
-export {
-  default as BottomNavigationItem,
-} from '../../Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.stories.js';
+export { default as BottomNavigation } from '../../Components/BottomNavigation/BottomNavigation.stories.js';
+export { default as BottomNavigationItem } from '../../Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.stories.js';
 
 export { default as Button } from '../../Components/Button/Button.stories.js';
-export {
-  default as TextButton,
-} from '../../Components/Button/TextButton/TextButton.stories.js';
-export {
-  default as FlatButton,
-} from '../../Components/Button/FlatButton/FlatButton.stories.js';
-export {
-  default as OutlinedButton,
-} from '../../Components/Button/OutlinedButton/OutlinedButton.stories.js';
-export {
-  default as ContainedButton,
-} from '../../Components/Button/ContainedButton/ContainedButton.stories.js';
+export { default as TextButton } from '../../Components/Button/TextButton/TextButton.stories.js';
+export { default as FlatButton } from '../../Components/Button/FlatButton/FlatButton.stories.js';
+export { default as OutlinedButton } from '../../Components/Button/OutlinedButton/OutlinedButton.stories.js';
+export { default as ContainedButton } from '../../Components/Button/ContainedButton/ContainedButton.stories.js';
 
 export { default as Card } from '../../Components/Card/Card.stories.js';
-export {
-  default as Checkbox,
-} from '../../Components/Checkbox/Checkbox.stories.js';
+export { default as Checkbox } from '../../Components/Checkbox/Checkbox.stories.js';
 export { default as Chip } from '../../Components/Chip/Chip.stories.js';
-export {
-  default as DataTable,
-} from '../../Components/DataTable/DataTable.stories.js';
-export {
-  default as DataTableCell,
-} from '../../Components/DataTable/DataTableCell/DataTableCell.stories.js';
-export {
-  default as DataTableHeader,
-} from '../../Components/DataTable/DataTableHeader/DataTableHeader.stories.js';
-export {
-  default as DataTableRow,
-} from '../../Components/DataTable/DataTableRow/DataTableRow.stories.js';
-export {
-  default as DataTablePagination,
-} from '../../Components/DataTable/DataTablePagination/DataTablePagination.stories.js';
+export { default as DataTable } from '../../Components/DataTable/DataTable.stories.js';
+export { default as DataTableCell } from '../../Components/DataTable/DataTableCell/DataTableCell.stories.js';
+export { default as DataTableHeader } from '../../Components/DataTable/DataTableHeader/DataTableHeader.stories.js';
+export { default as DataTableRow } from '../../Components/DataTable/DataTableRow/DataTableRow.stories.js';
+export { default as DataTablePagination } from '../../Components/DataTable/DataTablePagination/DataTablePagination.stories.js';
 export { default as Dialog } from '../../Components/Dialog/Dialog.stories.js';
 
 export { default as Drawer } from '../../Components/Drawer/Drawer.stories.js';
-export {
-  default as DrawerHeader,
-} from '../../Components/Drawer/DrawerHeader/DrawerHeader.stories.js';
-export {
-  default as DrawerSection,
-} from '../../Components/Drawer/DrawerSection/DrawerSection.stories.js';
-export {
-  default as DrawerItem,
-} from '../../Components/Drawer/DrawerItem/DrawerItem.stories.js';
-export {
-  default as DrawerBottom,
-} from '../../Components/DrawerBottom/DrawerBottom.stories.js';
-export {
-  default as Divider,
-} from '../../Components/Divider/Divider.stories.js';
+export { default as DrawerHeader } from '../../Components/Drawer/DrawerHeader/DrawerHeader.stories.js';
+export { default as DrawerSection } from '../../Components/Drawer/DrawerSection/DrawerSection.stories.js';
+export { default as DrawerItem } from '../../Components/Drawer/DrawerItem/DrawerItem.stories.js';
+export { default as DrawerBottom } from '../../Components/DrawerBottom/DrawerBottom.stories.js';
+export { default as Divider } from '../../Components/Divider/Divider.stories.js';
 export { default as Fab } from '../../Components/Fab/Fab.stories.js';
-export {
-  default as FabSpeedDial,
-} from '../../Components/Fab/FabSpeedDial/FabSpeedDial.stories.js';
+export { default as FabSpeedDial } from '../../Components/Fab/FabSpeedDial/FabSpeedDial.stories.js';
 export { default as Icons } from '../../Components/Icon/Icons.stories.js';
-export {
-  default as IconButton,
-} from '../../Components/IconButton/IconButton.stories.js';
+export { default as IconButton } from '../../Components/IconButton/IconButton.stories.js';
 export { default as List } from '../../Components/List/List.stories.js';
-export {
-  default as ListExpand,
-} from '../../Components/List/ListExpand/ListExpand.stories.js';
-export {
-  default as ListItem,
-} from '../../Components/List/ListItem/ListItem.stories.js';
-export {
-  default as ListSection,
-} from '../../Components/List/ListSection/ListSection.stories.js';
+export { default as ListExpand } from '../../Components/List/ListExpand/ListExpand.stories.js';
+export { default as ListItem } from '../../Components/List/ListItem/ListItem.stories.js';
+export { default as ListSection } from '../../Components/List/ListSection/ListSection.stories.js';
 
 export { default as Menu } from '../../Components/Menu/Menu.stories.js';
-export {
-  default as MenuItem,
-} from '../../Components/Menu/MenuItem/MenuItem.stories.js';
+export { default as MenuItem } from '../../Components/Menu/MenuItem/MenuItem.stories.js';
 export { default as Paper } from '../../Components/Paper/Paper.stories.js';
-export {
-  default as ProgressBar,
-} from '../../Components/Progress/ProgressBar/ProgressBar.stories.js';
-export {
-  default as ProgressCircle,
-} from '../../Components/Progress/ProgressCircle/ProgressCircle.stories.js';
-export {
-  default as RadioButton,
-} from '../../Components/RadioButton/RadioButton.stories.js';
+export { default as ProgressBar } from '../../Components/Progress/ProgressBar/ProgressBar.stories.js';
+export { default as ProgressCircle } from '../../Components/Progress/ProgressCircle/ProgressCircle.stories.js';
+export { default as RadioButton } from '../../Components/RadioButton/RadioButton.stories.js';
 export { default as Ripple } from '../../Components/Ripple/Ripple.stories.js';
-export {
-  default as Searchbar,
-} from '../../Components/Appbar/Searchbar/Searchbar.stories.js';
-export {
-  default as Searchfield,
-} from '../../Components/TextField/Searchfield/Searchfield.stories.js';
-export {
-  default as SelectFilled,
-} from '../../Components/Select/SelectFilled/SelectFilled.stories.js';
-export {
-  default as SelectFlat,
-} from '../../Components/Select/SelectFlat/SelectFlat.stories.js';
-export {
-  default as SelectOutlined,
-} from '../../Components/Select/SelectOutlined/SelectOutlined.stories.js';
+export { default as Searchbar } from '../../Components/Appbar/Searchbar/Searchbar.stories.js';
+export { default as Searchfield } from '../../Components/TextField/Searchfield/Searchfield.stories.js';
+export { default as SelectFilled } from '../../Components/Select/SelectFilled/SelectFilled.stories.js';
+export { default as SelectFlat } from '../../Components/Select/SelectFlat/SelectFlat.stories.js';
+export { default as SelectOutlined } from '../../Components/Select/SelectOutlined/SelectOutlined.stories.js';
 
-export {
-  default as SheetBottom,
-} from '../../Components/SheetBottom/SheetBottom.stories.js';
-export {
-  default as SheetSide,
-} from '../../Components/SheetSide/SheetSide.stories.js';
+export { default as SheetBottom } from '../../Components/SheetBottom/SheetBottom.stories.js';
+export { default as SheetSide } from '../../Components/SheetSide/SheetSide.stories.js';
 export { default as Slider } from '../../Components/Slider/Slider.stories.js';
-export {
-  default as Snackbar,
-} from '../../Components/Snackbar/Snackbar.stories.js';
-export {
-  default as SwipeNav,
-} from '../../Components/SwipeNav/SwipeNav.stories.js';
+export { default as Snackbar } from '../../Components/Snackbar/Snackbar.stories.js';
+export { default as SwipeNav } from '../../Components/SwipeNav/SwipeNav.stories.js';
 
 export { default as Switch } from '../../Components/Switch/Switch.stories.js';
 export { default as Tab } from '../../Components/Tabs/Tab/Tab.stories.js';
 export { default as Tabs } from '../../Components/Tabs/Tabs.stories.js';
-export {
-  default as TextFieldFilled,
-} from '../../Components/TextField/TextFieldFilled/TextFieldFilled.stories.js';
-export {
-  default as TextFieldFlat,
-} from '../../Components/TextField/TextFieldFlat/TextFieldFlat.stories.js';
-export {
-  default as TextFieldOutline,
-} from '../../Components/TextField/TextFieldOutline/TextFieldOutline.stories.js';
+export { default as TextFieldFilled } from '../../Components/TextField/TextFieldFilled/TextFieldFilled.stories.js';
+export { default as TextFieldFlat } from '../../Components/TextField/TextFieldFlat/TextFieldFlat.stories.js';
+export { default as TextFieldOutline } from '../../Components/TextField/TextFieldOutline/TextFieldOutline.stories.js';
 
-export {
-  default as ToggleButton,
-} from '../../Components/ToggleButton/ToggleButton.stories.js';
-export {
-  default as Tooltip,
-} from '../../Components/Tooltip/Tooltip.stories.js';
-export {
-  default as Typography,
-} from '../../Components/Typography/Typography.stories.js';
+export { default as ToggleButton } from '../../Components/ToggleButton/ToggleButton.stories.js';
+export { default as Tooltip } from '../../Components/Tooltip/Tooltip.stories.js';
+export { default as Typography } from '../../Components/Typography/Typography.stories.js';
 
 /* Utils */
 export { default as Anchor } from '../../Utils/Anchor/Anchor.stories.js';
-export {
-  default as Hoverable,
-} from '../../Utils/Hoverable/Hoverable.stories.js';
+export { default as Hoverable } from '../../Utils/Hoverable/Hoverable.stories.js';
 export { default as Shadows } from '../../Utils/Shadow/Shadow.stories.js';


Test patch:
diff --git a/src/Components/Drawer/__snapshots__/Drawer.test.js.snap b/src/Components/Drawer/__snapshots__/Drawer.test.js.snap
index b32ef28..575f489 100644
--- a/src/Components/Drawer/__snapshots__/Drawer.test.js.snap
+++ b/src/Components/Drawer/__snapshots__/Drawer.test.js.snap
@@ -25,7 +25,7 @@ exports[`Drawer Renders 1`] = `
         "borderRightWidth": 1,
         "borderStyle": "solid",
         "height": 1334,
-        "left": -245,
+        "left": -342.5,
         "position": "absolute",
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -40,7 +40,7 @@ exports[`Drawer Renders 1`] = `
             "translateX": 0,
           },
         ],
-        "width": 240,
+        "width": 337.5,
         "zIndex": 100,
       }
     }
diff --git a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
index ad63765..f68efa9 100644
--- a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
+++ b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
@@ -87,6 +87,56 @@ exports[`TextFieldFilled Renders 1`] = `
           "backgroundColor": "rgba(0,0,0,.12)",
           "width": "100%",
         },
+        "drawer": Object {
+          "backgroundColor": "white",
+          "borderRightColor": "rgba(0,0,0,.12)",
+          "borderRightWidth": 1,
+          "borderStyle": "solid",
+          "position": "absolute",
+          "zIndex": 100,
+        },
+        "drawerHeader": Object {
+          "borderBottomColor": "rgba(0,0,0,.12)",
+          "borderBottomWidth": 0.5,
+          "paddingHorizontal": 16,
+          "paddingVertical": 18,
+        },
+        "drawerHeaderAvatarContainer": Object {
+          "marginBottom": 20,
+        },
+        "drawerHeaderSubtitle": Object {
+          "color": "rgba(0,0,0,.67)",
+          "fontSize": 12,
+          "marginTop": 4,
+        },
+        "drawerHeaderTitle": Object {
+          "color": "rgba(0,0,0,.87)",
+          "fontSize": 20,
+          "fontWeight": "500",
+        },
+        "drawerItem": Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "flexDirection": "row",
+          "height": 40,
+          "paddingHorizontal": 8,
+          "zIndex": 10,
+        },
+        "drawerItemActive": Object {
+          "backgroundColor": "rgba(30, 136, 229, .2)",
+          "color": "#1e88e5",
+        },
+        "drawerItemIcon": Object {
+          "color": "grey",
+          "size": 20,
+        },
+        "drawerItemText": Object {
+          "color": "rgba(0,0,0,.87)",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "zIndex": 10,
+        },
         "error": Object {
           "dark": "#d32f2f",
           "light": "#e57373",
@@ -143,6 +193,35 @@ exports[`TextFieldFilled Renders 1`] = `
           "light": "#6ab7ff",
           "main": "#1e88e5",
         },
+        "searchBar": Object {
+          "alignItems": "center",
+          "backgroundColor": "rgba(255,255,255,1)",
+          "flexDirection": "row",
+          "height": 56,
+          "paddingHorizontal": 16,
+          "width": "100%",
+        },
+        "searchBarNavigationIcon": Object {
+          "color": "black",
+          "size": 24,
+        },
+        "searchBarcloseIcon": Object {
+          "color": "black",
+          "size": 24,
+        },
+        "searchInput": Object {
+          "flex": 1,
+          "fontSize": 16,
+          "height": 30,
+          "marginLeft": 8,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 1,
+        },
         "secondary": Object {
           "dark": "#c51162",
           "light": "#ff4081",
diff --git a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
index f050db0..261c67f 100644
--- a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
+++ b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
@@ -86,6 +86,56 @@ exports[`TextFieldFlat Renders 1`] = `
           "backgroundColor": "rgba(0,0,0,.12)",
           "width": "100%",
         },
+        "drawer": Object {
+          "backgroundColor": "white",
+          "borderRightColor": "rgba(0,0,0,.12)",
+          "borderRightWidth": 1,
+          "borderStyle": "solid",
+          "position": "absolute",
+          "zIndex": 100,
+        },
+        "drawerHeader": Object {
+          "borderBottomColor": "rgba(0,0,0,.12)",
+          "borderBottomWidth": 0.5,
+          "paddingHorizontal": 16,
+          "paddingVertical": 18,
+        },
+        "drawerHeaderAvatarContainer": Object {
+          "marginBottom": 20,
+        },
+        "drawerHeaderSubtitle": Object {
+          "color": "rgba(0,0,0,.67)",
+          "fontSize": 12,
+          "marginTop": 4,
+        },
+        "drawerHeaderTitle": Object {
+          "color": "rgba(0,0,0,.87)",
+          "fontSize": 20,
+          "fontWeight": "500",
+        },
+        "drawerItem": Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "flexDirection": "row",
+          "height": 40,
+          "paddingHorizontal": 8,
+          "zIndex": 10,
+        },
+        "drawerItemActive": Object {
+          "backgroundColor": "rgba(30, 136, 229, .2)",
+          "color": "#1e88e5",
+        },
+        "drawerItemIcon": Object {
+          "color": "grey",
+          "size": 20,
+        },
+        "drawerItemText": Object {
+          "color": "rgba(0,0,0,.87)",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "zIndex": 10,
+        },
         "error": Object {
           "dark": "#d32f2f",
           "light": "#e57373",
@@ -142,6 +192,35 @@ exports[`TextFieldFlat Renders 1`] = `
           "light": "#6ab7ff",
           "main": "#1e88e5",
         },
+        "searchBar": Object {
+          "alignItems": "center",
+          "backgroundColor": "rgba(255,255,255,1)",
+          "flexDirection": "row",
+          "height": 56,
+          "paddingHorizontal": 16,
+          "width": "100%",
+        },
+        "searchBarNavigationIcon": Object {
+          "color": "black",
+          "size": 24,
+        },
+        "searchBarcloseIcon": Object {
+          "color": "black",
+          "size": 24,
+        },
+        "searchInput": Object {
+          "flex": 1,
+          "fontSize": 16,
+          "height": 30,
+          "marginLeft": 8,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 1,
+        },
         "secondary": Object {
           "dark": "#c51162",
           "light": "#ff4081",
diff --git a/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap b/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
index ac3ce22..990749c 100644
--- a/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
+++ b/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
@@ -86,6 +86,56 @@ exports[`TextFieldOutline Renders 1`] = `
           "backgroundColor": "rgba(0,0,0,.12)",
           "width": "100%",
         },
+        "drawer": Object {
+          "backgroundColor": "white",
+          "borderRightColor": "rgba(0,0,0,.12)",
+          "borderRightWidth": 1,
+          "borderStyle": "solid",
+          "position": "absolute",
+          "zIndex": 100,
+        },
+        "drawerHeader": Object {
+          "borderBottomColor": "rgba(0,0,0,.12)",
+          "borderBottomWidth": 0.5,
+          "paddingHorizontal": 16,
+          "paddingVertical": 18,
+        },
+        "drawerHeaderAvatarContainer": Object {
+          "marginBottom": 20,
+        },
+        "drawerHeaderSubtitle": Object {
+          "color": "rgba(0,0,0,.67)",
+          "fontSize": 12,
+          "marginTop": 4,
+        },
+        "drawerHeaderTitle": Object {
+          "color": "rgba(0,0,0,.87)",
+          "fontSize": 20,
+          "fontWeight": "500",
+        },
+        "drawerItem": Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "flexDirection": "row",
+          "height": 40,
+          "paddingHorizontal": 8,
+          "zIndex": 10,
+        },
+        "drawerItemActive": Object {
+          "backgroundColor": "rgba(30, 136, 229, .2)",
+          "color": "#1e88e5",
+        },
+        "drawerItemIcon": Object {
+          "color": "grey",
+          "size": 20,
+        },
+        "drawerItemText": Object {
+          "color": "rgba(0,0,0,.87)",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "zIndex": 10,
+        },
         "error": Object {
           "dark": "#d32f2f",
           "light": "#e57373",
@@ -142,6 +192,35 @@ exports[`TextFieldOutline Renders 1`] = `
           "light": "#6ab7ff",
           "main": "#1e88e5",
         },
+        "searchBar": Object {
+          "alignItems": "center",
+          "backgroundColor": "rgba(255,255,255,1)",
+          "flexDirection": "row",
+          "height": 56,
+          "paddingHorizontal": 16,
+          "width": "100%",
+        },
+        "searchBarNavigationIcon": Object {
+          "color": "black",
+          "size": 24,
+        },
+        "searchBarcloseIcon": Object {
+          "color": "black",
+          "size": 24,
+        },
+        "searchInput": Object {
+          "flex": 1,
+          "fontSize": 16,
+          "height": 30,
+          "marginLeft": 8,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 1,
+        },
         "secondary": Object {
           "dark": "#c51162",
           "light": "#ff4081",