BREAKING: Drawer redesign (#377)

Drawer redesign for 2.0. Changes:
- changed the active state styling
- colors are now theme based, not fixed
- theme based roundness
- removed the "color" prop - it can be now controller with the primaryColor (see [the expo app example](https://github.com/callstack/react-native-paper/pull/377/files#diff-cf8d6e3323746c5c486de08cb0c333c3R59))
- added snapshot tests

<img width="248" alt="screen shot 2018-05-16 at 23 59 54" src="https://user-images.githubusercontent.com/7827311/40146708-e58bf92c-5966-11e8-8916-e76cb42e2f86.png">
<img width="248" alt="screen shot 2018-05-17 at 00 00 02" src="https://user-images.githubusercontent.com/7827311/40146727-f26662a4-5966-11e8-9cee-dc01e3cd5599.png">

Fixes #358.

Snapshot tests added. Run `yarn test`.

Author: gawrysiak

example/DrawerItems.js

@@ -56,7 +56,11 @@ class DrawerItems extends React.Component<Props, State> {
             <DrawerItem
               {...props}
               key={props.key}
-              color={props.key === 3 ? Colors.tealA200 : undefined}
+              theme={
+                props.key === 3
+                  ? { colors: { primary: Colors.tealA200 } }
+                  : undefined
+              }
               active={this.state.drawerItemIndex === index}
               onPress={() => this._setDrawerItem(index)}
             />

src/components/DrawerItem.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import Icon from './Icon';
 import TouchableRipple from './TouchableRipple';
-import { grey300, grey700 } from '../styles/colors';
 import withTheme from '../core/withTheme';
 import Text from './Typography/Text';
 import type { Theme } from '../types';
@@ -28,10 +27,7 @@ type Props = {
    * Function to execute on press.
    */
   onPress?: () => mixed,
-  /**
-   * Custom color for the drawer text and icon.
-   */
-  color?: string,
+  style?: any,
   /**
    * @optional
    */
@@ -53,61 +49,72 @@ type Props = {
  */
 class DrawerItem extends React.Component<Props> {
   render() {
-    const {
-      color: activeColor,
-      icon,
-      label,
-      active,
-      theme,
-      ...props
-    } = this.props;
-    const { colors, dark } = theme;
-    const backgroundColor = active ? (dark ? grey700 : grey300) : 'transparent';
-    const labelColor = active
-      ? activeColor || colors.text
-      : color(colors.text)
-          .alpha(0.54)
+    const { icon, label, active, theme, style, onPress, ...rest } = this.props;
+    const { colors, roundness } = theme;
+    const backgroundColor = active
+      ? color(colors.primary)
+          .alpha(0.12)
           .rgb()
-          .string();
-    const iconColor = active
-      ? activeColor || colors.text
+          .string()
+      : 'transparent';
+    const contentColor = active
+      ? colors.primary
       : color(colors.text)
-          .alpha(0.54)
+          .alpha(0.68)
           .rgb()
           .string();
     const fontFamily = theme.fonts.medium;
     const labelMargin = icon ? 32 : 0;
 
     return (
-      <TouchableRipple {...props}>
-        <View style={[styles.wrapper, { backgroundColor }]}>
-          {icon && <Icon source={icon} size={24} color={iconColor} />}
-          <Text
-            numberOfLines={1}
-            style={[
-              {
-                color: labelColor,
-                fontFamily,
-                marginLeft: labelMargin,
-              },
-              styles.label,
-            ]}
-          >
-            {label}
-          </Text>
-        </View>
-      </TouchableRipple>
+      <View
+        {...rest}
+        style={[
+          styles.container,
+          { backgroundColor, borderRadius: roundness },
+          style,
+        ]}
+      >
+        <TouchableRipple
+          borderless
+          delayPressIn={0}
+          onPress={onPress}
+          style={{ borderRadius: roundness }}
+        >
+          <View style={styles.wrapper}>
+            {icon ? (
+              <Icon source={icon} size={24} color={contentColor} />
+            ) : null}
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.label,
+                {
+                  color: contentColor,
+                  fontFamily,
+                  marginLeft: labelMargin,
+                },
+              ]}
+            >
+              {label}
+            </Text>
+          </View>
+        </TouchableRipple>
+      </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: 10,
+    marginVertical: 4,
+  },
   wrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    height: 48,
+    padding: 8,
+    height: 40,
   },
   label: {
     marginRight: 32,

src/components/__tests__/DrawerItem.test.js

@@ -0,0 +1,29 @@
+/* @flow */
+
+import * as React from 'react';
+import renderer from 'react-test-renderer';
+import DrawerItem from '../DrawerItem';
+
+it('renders basic DrawerItem', () => {
+  const tree = renderer
+    .create(<DrawerItem onPress={() => {}} label="Example item" />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders DrawerItem with icon', () => {
+  const tree = renderer
+    .create(<DrawerItem icon="info" label="Example item" />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders active DrawerItem', () => {
+  const tree = renderer
+    .create(<DrawerItem icon="info" active label="Example item" />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});