Repository: callstack/react-native-paper
Pull request #996 (2019-04-16 02:47:30)

refactor: make ListItem accepts a custom description
### Motivation
Currently, there's no way to customize the description of `List.Item`. In order to make it able to be customized, `List.Item` now accepts a custom node as description.

With these changes we can implement a list item like Gmail app:
![customized-list-description](https://user-images.githubusercontent.com/6487206/57096084-c5e86680-6cea-11e9-8a6c-0068d92ac162.jpeg)

```
<List.Item
  left={() => (
    <Image
      source={require('../../assets/images/email-icon.png')}
      style={styles.image}
    />
  )}
  right={props => <List.Icon {...props} icon="star-border" />}
  title="List Item 1"
  description={({
    ellipsizeMode,
    color: descriptionColor,
    fontSize,
  }) => (
    <View style={[styles.container, styles.column]}>
      <Text
        numberOfLines={2}
        ellipsizeMode={ellipsizeMode}
        style={{ color: descriptionColor, fontSize }}
      >
        React Native Paper is a high-quality, standard-compliant
        Material Design library that has you covered in all major
        use-cases.
      </Text>
      <View style={[styles.container, styles.row, { paddingTop: 8 }]}>
        <Chip icon="picture-as-pdf" onPress={() => {}}>
          DOCS.pdf
        </Chip>
      </View>
    </View>
  )}
/>
```

### Test plan

1. Download this branch
2. Run the example app
3. Open `List.Section` to see the new example.


callstack-bot: Hey @brunohkbx, thank you for your pull request 🤗. The documentation from this branch can be viewed [here](https://9723-71323749-gh.circle-artifacts.com/0/docs/index.html). Please remember to update Typescript types if you changed API.
brunohkbx: Hey @ferrannp @Trancever. I'm not sure if all the flow declarations are correct. Could you guys please review it? :grimacing: 
brunohkbx: Thanks @Trancever. Done 5ae1695
Trancever: @brunohkbx Awesome, one more thing,  can we improve `description` prop description? We should add info that it can be string or render prop and what arguments will be passed to that render prop. Please check other components that follow this pattern for reference.
brunohkbx: Good catch, thanks. Added in cc56e4f89422fc884fd3323a0f4e706bfe3caff4

Patch:
diff --git a/example/src/Examples/FABExample.js b/example/src/Examples/FABExample.js
index efeea873f..c667dff9c 100644
--- a/example/src/Examples/FABExample.js
+++ b/example/src/Examples/FABExample.js
@@ -65,6 +65,15 @@ class ButtonExample extends React.Component<Props, State> {
             visible={this.state.visible}
             disabled
           />
+
+          <FAB
+            icon="cancel"
+            label="Loading FAB"
+            style={styles.fab}
+            onPress={() => {}}
+            visible={this.state.visible}
+            loading
+          />
           <Portal>
             <FAB.Group
               open={this.state.open}
diff --git a/example/src/Examples/ListSectionExample.js b/example/src/Examples/ListSectionExample.js
index a44097ac6..af006cddc 100644
--- a/example/src/Examples/ListSectionExample.js
+++ b/example/src/Examples/ListSectionExample.js
@@ -1,8 +1,8 @@
 /* @flow */
 
 import * as React from 'react';
-import { ScrollView, StyleSheet, Image } from 'react-native';
-import { List, Divider, withTheme, type Theme } from 'react-native-paper';
+import { ScrollView, StyleSheet, Image, View, Text } from 'react-native';
+import { Chip, List, Divider, withTheme, type Theme } from 'react-native-paper';
 
 type Props = {
   theme: Theme,
@@ -80,6 +80,42 @@ class ListSectionExample extends React.Component<Props> {
             description="Describes item 2. Example of a very very long description."
           />
         </List.Section>
+        <Divider />
+        <List.Section>
+          <List.Subheader>Custom description</List.Subheader>
+          <List.Item
+            left={() => (
+              <Image
+                source={require('../../assets/images/email-icon.png')}
+                style={styles.image}
+              />
+            )}
+            right={props => <List.Icon {...props} icon="star-border" />}
+            title="List Item 1"
+            description={({
+              ellipsizeMode,
+              color: descriptionColor,
+              fontSize,
+            }) => (
+              <View style={[styles.container, styles.column]}>
+                <Text
+                  numberOfLines={2}
+                  ellipsizeMode={ellipsizeMode}
+                  style={{ color: descriptionColor, fontSize }}
+                >
+                  React Native Paper is a high-quality, standard-compliant
+                  Material Design library that has you covered in all major
+                  use-cases.
+                </Text>
+                <View style={[styles.container, styles.row, { paddingTop: 8 }]}>
+                  <Chip icon="picture-as-pdf" onPress={() => {}}>
+                    DOCS.pdf
+                  </Chip>
+                </View>
+              </View>
+            )}
+          />
+        </List.Section>
       </ScrollView>
     );
   }
@@ -94,6 +130,12 @@ const styles = StyleSheet.create({
     width: 40,
     margin: 8,
   },
+  row: {
+    flexDirection: 'row',
+  },
+  column: {
+    flexDirection: 'column',
+  },
 });
 
 export default withTheme(ListSectionExample);
diff --git a/src/components/Button.js b/src/components/Button.js
index 6625fab5a..8b595c7e4 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -221,7 +221,8 @@ class Button extends React.Component<Props, State> {
     };
     const touchableStyle = { borderRadius: roundness };
     const textStyle = { color: textColor, fontFamily };
-    const elevation = disabled ? 0 : this.state.elevation;
+    const elevation =
+      disabled || mode !== 'contained' ? 0 : this.state.elevation;
 
     return (
       <Surface
diff --git a/src/components/Card/CardTitle.js b/src/components/Card/CardTitle.js
index 24701ebf9..0604845b2 100644
--- a/src/components/Card/CardTitle.js
+++ b/src/components/Card/CardTitle.js
@@ -6,10 +6,11 @@ import { withTheme } from '../../core/theming';
 import Caption from './../Typography/Caption';
 import Title from './../Typography/Title';
 import type { Theme } from '../../types';
+import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 type Props = React.ElementConfig<typeof View> & {|
   /**
-   * Text for the title.
+   * Text for the title. Note that this will only accept a string or `<Text>`-based node.
    */
   title: React.Node,
   /**
@@ -17,7 +18,7 @@ type Props = React.ElementConfig<typeof View> & {|
    */
   titleStyle?: any,
   /**
-   * Text for the subtitle.
+   * Text for the subtitle. Note that this will only accept a string or `<Text>`-based node.
    */
   subtitle?: React.Node,
   /**
@@ -28,10 +29,18 @@ type Props = React.ElementConfig<typeof View> & {|
    * Callback which returns a React element to display on the left side.
    */
   left?: (props: { size: number }) => React.Node,
+  /**
+   * Style for the left element wrapper.
+   */
+  leftStyle?: ViewStyleProp,
   /**
    * Callback which returns a React element to display on the right side.
    */
   right?: (props: { size: number }) => React.Node,
+  /**
+   * Style for the right element wrapper.
+   */
+  rightStyle?: ViewStyleProp,
   /**
    * @internal
    */
@@ -79,7 +88,9 @@ class CardTitle extends React.Component<Props> {
   render() {
     const {
       left,
+      leftStyle,
       right,
+      rightStyle,
       subtitle,
       subtitleStyle,
       style,
@@ -96,7 +107,7 @@ class CardTitle extends React.Component<Props> {
         ]}
       >
         {left ? (
-          <View style={[styles.left]}>
+          <View style={[styles.left, leftStyle]}>
             {left({
               size: LEFT_SIZE,
             })}
@@ -124,7 +135,7 @@ class CardTitle extends React.Component<Props> {
           ) : null}
         </View>
 
-        <View>{right ? right({ size: 24 }) : null}</View>
+        <View style={rightStyle}>{right ? right({ size: 24 }) : null}</View>
       </View>
     );
   }
diff --git a/src/components/Drawer/DrawerSection.js b/src/components/Drawer/DrawerSection.js
index 66428878c..d40b3fda4 100644
--- a/src/components/Drawer/DrawerSection.js
+++ b/src/components/Drawer/DrawerSection.js
@@ -2,11 +2,12 @@
 
 import color from 'color';
 import * as React from 'react';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import Text from '../Typography/Text';
 import Divider from '../Divider';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
+import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 type Props = React.ElementConfig<typeof View> & {
   /**
@@ -17,6 +18,7 @@ type Props = React.ElementConfig<typeof View> & {
    * Content of the `Drawer.Section`.
    */
   children: React.Node,
+  style?: ViewStyleProp,
   /**
    * @optional
    */
@@ -61,7 +63,7 @@ class DrawerSection extends React.Component<Props> {
   static displayName = 'Drawer.Section';
 
   render() {
-    const { children, title, theme, ...rest } = this.props;
+    const { children, title, theme, style, ...rest } = this.props;
     const { colors, fonts } = theme;
     const titleColor = color(colors.text)
       .alpha(0.54)
@@ -70,9 +72,9 @@ class DrawerSection extends React.Component<Props> {
     const fontFamily = fonts.medium;
 
     return (
-      <View {...rest}>
+      <View style={[styles.container, style]} {...rest}>
         {title && (
-          <View style={{ height: 40, justifyContent: 'center' }}>
+          <View style={styles.titleContainer}>
             <Text
               numberOfLines={1}
               style={{ color: titleColor, fontFamily, marginLeft: 16 }}
@@ -82,10 +84,23 @@ class DrawerSection extends React.Component<Props> {
           </View>
         )}
         {children}
-        <Divider style={{ marginVertical: 4 }} />
+        <Divider style={styles.divider} />
       </View>
     );
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 4,
+  },
+  titleContainer: {
+    height: 40,
+    justifyContent: 'center',
+  },
+  divider: {
+    marginTop: 4,
+  },
+});
+
 export default withTheme(DrawerSection);
diff --git a/src/components/FAB/FAB.js b/src/components/FAB/FAB.js
index 77730af4f..f328ce674 100644
--- a/src/components/FAB/FAB.js
+++ b/src/components/FAB/FAB.js
@@ -3,6 +3,7 @@
 import color from 'color';
 import * as React from 'react';
 import { Animated, View, StyleSheet } from 'react-native';
+import ActivityIndicator from '../ActivityIndicator';
 import FABGroup from './FABGroup';
 import Surface from '../Surface';
 import CrossFadeIcon from '../CrossFadeIcon';
@@ -43,6 +44,10 @@ type Props = $RemoveChildren<typeof Surface> & {|
    * Whether `FAB` is currently visible.
    */
   visible: boolean,
+  /**
+   * Whether to show a loading indicator.
+   */
+  loading?: boolean,
   /**
    * Function to execute on press.
    */
@@ -137,6 +142,7 @@ class FAB extends React.Component<Props, State> {
       theme,
       style,
       visible,
+      loading,
       ...rest
     } = this.props;
     const { visibility } = this.state;
@@ -207,7 +213,12 @@ class FAB extends React.Component<Props, State> {
             ]}
             pointerEvents="none"
           >
-            <CrossFadeIcon source={icon} size={24} color={foregroundColor} />
+            {icon && loading !== true ? (
+              <CrossFadeIcon source={icon} size={24} color={foregroundColor} />
+            ) : null}
+            {loading && label ? (
+              <ActivityIndicator size={18} color={foregroundColor} />
+            ) : null}
             {label ? (
               <Text
                 style={[
diff --git a/src/components/FAB/FABGroup.js b/src/components/FAB/FABGroup.js
index d3a98533c..48ef6f505 100644
--- a/src/components/FAB/FABGroup.js
+++ b/src/components/FAB/FABGroup.js
@@ -30,7 +30,7 @@ type Props = {|
    * - `onPress`: callback that is called when `FAB` is pressed (required)
    */
   actions: Array<{
-    icon: string,
+    icon: IconSource,
     label?: string,
     color?: string,
     accessibilityLabel?: string,
diff --git a/src/components/List/ListItem.js b/src/components/List/ListItem.js
index 51572a612..177603399 100644
--- a/src/components/List/ListItem.js
+++ b/src/components/List/ListItem.js
@@ -10,7 +10,7 @@ import type {
 import TouchableRipple from '../TouchableRipple';
 import Text from '../Typography/Text';
 import { withTheme } from '../../core/theming';
-import type { Theme, $RemoveChildren } from '../../types';
+import type { Theme, $RemoveChildren, EllipsizeProp } from '../../types';
 
 type Props = $RemoveChildren<typeof TouchableRipple> & {|
   /**
@@ -18,9 +18,15 @@ type Props = $RemoveChildren<typeof TouchableRipple> & {|
    */
   title: React.Node,
   /**
-   * Description text for the list item.
+   * Description text for the list item or callback which returns a React element to display the description.
    */
-  description?: React.Node,
+  description?:
+    | React.Node
+    | ((props: {
+        ellipsizeMode: EllipsizeProp,
+        color: string,
+        fontSize: number,
+      }) => React.Node),
   /**
    * Callback which returns a React element to display on the left side.
    */
@@ -52,11 +58,11 @@ type Props = $RemoveChildren<typeof TouchableRipple> & {|
   /**
    * Ellipsize Mode for the Title
    */
-  titleEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip',
+  titleEllipsizeMode?: EllipsizeProp,
   /**
    * Ellipsize Mode for the Description
    */
-  descriptionEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip',
+  descriptionEllipsizeMode?: EllipsizeProp,
 |};
 
 /**
@@ -87,6 +93,31 @@ type Props = $RemoveChildren<typeof TouchableRipple> & {|
 class ListItem extends React.Component<Props> {
   static displayName = 'List.Item';
 
+  renderDescription(description, descriptionColor) {
+    const { descriptionEllipsizeMode, descriptionStyle } = this.props;
+
+    return typeof description === 'string' ? (
+      <Text
+        numberOfLines={2}
+        ellipsizeMode={descriptionEllipsizeMode}
+        style={[
+          styles.description,
+          { color: descriptionColor },
+          descriptionStyle,
+        ]}
+      >
+        {description}
+      </Text>
+    ) : (
+      description &&
+        description({
+          ellipsizeMode: descriptionEllipsizeMode,
+          color: descriptionColor,
+          fontSize: styles.description.fontSize,
+        })
+    );
+  }
+
   render() {
     const {
       left,
@@ -97,9 +128,7 @@ class ListItem extends React.Component<Props> {
       theme,
       style,
       titleStyle,
-      descriptionStyle,
       titleEllipsizeMode,
-      descriptionEllipsizeMode,
       ...rest
     } = this.props;
     const titleColor = color(theme.colors.text)
@@ -127,21 +156,7 @@ class ListItem extends React.Component<Props> {
             >
               {title}
             </Text>
-            {description ? (
-              <Text
-                ellipsizeMode={descriptionEllipsizeMode}
-                numberOfLines={2}
-                style={[
-                  styles.description,
-                  {
-                    color: descriptionColor,
-                  },
-                  descriptionStyle,
-                ]}
-              >
-                {description}
-              </Text>
-            ) : null}
+            {this.renderDescription(description, descriptionColor)}
           </View>
           {right ? right({ color: descriptionColor }) : null}
         </View>
diff --git a/src/types.js b/src/types.js
index e35b15703..ea757180e 100644
--- a/src/types.js
+++ b/src/types.js
@@ -35,3 +35,5 @@ export type $RemoveChildren<T> = $Diff<
   React.ElementConfig<T>,
   { children: any }
 >;
+
+export type EllipsizeProp = 'head' | 'middle' | 'tail' | 'clip';
diff --git a/typings/components/Card.d.ts b/typings/components/Card.d.ts
index 6ec68ee27..83582b113 100644
--- a/typings/components/Card.d.ts
+++ b/typings/components/Card.d.ts
@@ -22,7 +22,10 @@ export interface CardTitleProps extends ViewProps {
   subtitleStyle?: StyleProp<TextStyle>;
   style?: StyleProp<ViewStyle>;
   left?: (props: { size:number }) => React.ReactNode;
+  leftStyle?: StyleProp<ViewStyle>;
   right?: (props: { size:number }) => React.ReactNode;
+  rightStyle?: StyleProp<ViewStyle>;
+
 }
 
 export interface CardProps {
diff --git a/typings/components/Chip.d.ts b/typings/components/Chip.d.ts
index d51c67022..00355163d 100644
--- a/typings/components/Chip.d.ts
+++ b/typings/components/Chip.d.ts
@@ -8,6 +8,7 @@ export interface ChipProps {
   icon?: IconSource;
   avatar?: React.ReactNode;
   selected?: boolean;
+  selectedColor?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
   onPress?: () => any;
diff --git a/typings/components/FAB.d.ts b/typings/components/FAB.d.ts
index c763b77e8..6dff77316 100644
--- a/typings/components/FAB.d.ts
+++ b/typings/components/FAB.d.ts
@@ -3,7 +3,7 @@ import { ViewProps } from 'react-native';
 import { ThemeShape, IconSource } from '../types';
 
 export interface FABGroupAction {
-  icon: string;
+  icon: IconSource;
   label?: string;
   color?: string;
   accessibilityLabel?: string;
@@ -33,6 +33,7 @@ export interface FABProps extends ViewProps {
   color?: string;
   disabled?: boolean;
   visible?: boolean;
+  loading?: boolean;
   onPress?: () => any;
   theme?: ThemeShape;
 }
diff --git a/typings/components/List.d.ts b/typings/components/List.d.ts
index 3b9ca371c..463933ae4 100644
--- a/typings/components/List.d.ts
+++ b/typings/components/List.d.ts
@@ -6,7 +6,7 @@ import {
   TextProps,
   TextStyle,
 } from 'react-native';
-import { ThemeShape, IconSource } from '../types';
+import { ThemeShape, IconSource, EllipsizeProp } from '../types';
 import { TouchableRipplePropsWithoutChildren } from './TouchableRipple';
 
 export interface AccordionProps {
@@ -39,8 +39,8 @@ export interface ItemProps extends TouchableRipplePropsWithoutChildren {
   right?: (props: { color: string }) => React.ReactNode;
   titleStyle?: StyleProp<TextStyle>;
   descriptionStyle?: StyleProp<TextStyle>;
-  titleEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
-  descriptionEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  titleEllipsizeMode?: EllipsizeProp;
+  descriptionEllipsizeMode?: EllipsizeProp;
 }
 
 export declare class Item extends React.Component<ItemProps> {}
diff --git a/typings/components/Modal.d.ts b/typings/components/Modal.d.ts
index b1f1564ff..d58048a20 100644
--- a/typings/components/Modal.d.ts
+++ b/typings/components/Modal.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 import { ThemeShape } from '../types';
 
 export interface ModalProps {
@@ -6,6 +7,7 @@ export interface ModalProps {
   onDismiss?: () => any;
   visible: boolean;
   children: React.ReactNode;
+  contentContainerStyle?: StyleProp<ViewStyle>;
   theme?: ThemeShape;
 }
 
diff --git a/typings/components/Searchbar.d.ts b/typings/components/Searchbar.d.ts
index 5381d8977..451ab9dcd 100644
--- a/typings/components/Searchbar.d.ts
+++ b/typings/components/Searchbar.d.ts
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { TextInputProps } from 'react-native';
+import { StyleProp, TextInputProps, TextStyle } from 'react-native';
 import { ThemeShape, IconSource } from '../types';
 
 export interface SearchbarProps extends TextInputProps {
+  inputStyle?: StyleProp<TextStyle>;
   icon?: IconSource;
   theme?: ThemeShape;
   clearIcon?: IconSource;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index d9e93790c..5b0aca554 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -50,3 +50,5 @@ export declare class Provider extends React.Component<{
   children: React.ReactNode;
   theme?: ThemeShape;
 }> {}
+
+export type EllipsizeProp = 'head' | 'middle' | 'tail' | 'clip';


Test patch:
diff --git a/__ts-tests__/Chip.test.tsx b/__ts-tests__/Chip.test.tsx
index ff3959429..9fc2fdd5b 100644
--- a/__ts-tests__/Chip.test.tsx
+++ b/__ts-tests__/Chip.test.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Chip } from '..';
 
 const MyComponent = () => (
-  <Chip icon="info" onPress={() => console.log('Pressed')}>Example Chip</Chip>
+  <Chip icon="info" selectedColor="#fff" onPress={() => console.log('Pressed')}>Example Chip</Chip>
 );
 
 export default MyComponent;
diff --git a/src/components/__tests__/Drawer/DrawerSection.test.js b/src/components/__tests__/Drawer/DrawerSection.test.js
new file mode 100644
index 000000000..e6874f989
--- /dev/null
+++ b/src/components/__tests__/Drawer/DrawerSection.test.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { View } from 'react-native';
+import renderer from 'react-test-renderer';
+import DrawerSection from '../../Drawer/DrawerSection';
+
+describe('DrawerSection', () => {
+  it('renders properly', () => {
+    const tree = renderer
+      .create(
+        <DrawerSection>
+          <View />
+        </DrawerSection>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.js.snap b/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.js.snap
new file mode 100644
index 000000000..98bb911c6
--- /dev/null
+++ b/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DrawerSection renders properly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginBottom": 4,
+      },
+      undefined,
+    ]
+  }
+>
+  <View />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "rgba(0, 0, 0, 0.12)",
+          "height": 0.5,
+        },
+        undefined,
+        Object {
+          "marginTop": 4,
+        },
+      ]
+    }
+  />
+</View>
+`;
diff --git a/src/components/__tests__/ListItem.test.js b/src/components/__tests__/ListItem.test.js
index 3fd172b17..5be212dec 100644
--- a/src/components/__tests__/ListItem.test.js
+++ b/src/components/__tests__/ListItem.test.js
@@ -2,9 +2,10 @@
 
 import * as React from 'react';
 import renderer from 'react-test-renderer';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import ListItem from '../List/ListItem';
 import ListIcon from '../List/ListIcon';
+import Chip from '../Chip';
 
 it('renders list item with title and description', () => {
   const tree = renderer
@@ -66,3 +67,32 @@ it('renders list item with custom title and description styles', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('renders list item with custom description', () => {
+  const tree = renderer
+    .create(
+      <ListItem
+        title="List Item with custom description"
+        description={({ ellipsizeMode, color: descriptionColor, fontSize }) => (
+          <View>
+            <Text
+              numberOfLines={2}
+              ellipsizeMode={ellipsizeMode}
+              style={{ color: descriptionColor, fontSize }}
+            >
+              React Native Paper is a high-quality, standard-compliant Design
+              Design library that has you covered in all major use-cases.
+            </Text>
+            <View>
+              <Chip icon="picture-as-pdf" onPress={() => {}}>
+                DOCS.pdf
+              </Chip>
+            </View>
+          </View>
+        )}
+      />
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.js.snap
index f1255747d..50efb250a 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.js.snap
@@ -195,13 +195,6 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
               "elevation": 0,
               "margin": 4,
               "minWidth": "auto",
-              "shadowColor": "#000000",
-              "shadowOffset": Object {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0.24,
-              "shadowRadius": 0,
             }
           }
         >
@@ -364,13 +357,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
               "elevation": 0,
               "margin": 4,
               "minWidth": "auto",
-              "shadowColor": "#000000",
-              "shadowOffset": Object {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0.24,
-              "shadowRadius": 0,
             }
           }
         >
@@ -454,13 +440,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
               "elevation": 0,
               "margin": 4,
               "minWidth": "auto",
-              "shadowColor": "#000000",
-              "shadowOffset": Object {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0.24,
-              "shadowRadius": 0,
             }
           }
         >
diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap
index 0f99c199f..7072a3874 100644
--- a/src/components/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.js.snap
@@ -11,13 +11,6 @@ exports[`renders button with color 1`] = `
       "borderWidth": 0,
       "elevation": 0,
       "minWidth": 64,
-      "shadowColor": "#000000",
-      "shadowOffset": Object {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0.24,
-      "shadowRadius": 0,
     }
   }
 >
@@ -101,13 +94,6 @@ exports[`renders button with icon 1`] = `
       "borderWidth": 0,
       "elevation": 0,
       "minWidth": 64,
-      "shadowColor": "#000000",
-      "shadowOffset": Object {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0.24,
-      "shadowRadius": 0,
     }
   }
 >
@@ -413,13 +399,6 @@ exports[`renders loading button 1`] = `
       "borderWidth": 0,
       "elevation": 0,
       "minWidth": 64,
-      "shadowColor": "#000000",
-      "shadowOffset": Object {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0.24,
-      "shadowRadius": 0,
     }
   }
 >
@@ -516,13 +495,6 @@ exports[`renders outlined button with mode 1`] = `
       "borderWidth": 0.5,
       "elevation": 0,
       "minWidth": 64,
-      "shadowColor": "#000000",
-      "shadowOffset": Object {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0.24,
-      "shadowRadius": 0,
     }
   }
 >
@@ -606,13 +578,6 @@ exports[`renders text button by default 1`] = `
       "borderWidth": 0,
       "elevation": 0,
       "minWidth": 64,
-      "shadowColor": "#000000",
-      "shadowOffset": Object {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0.24,
-      "shadowRadius": 0,
     }
   }
 >
@@ -696,13 +661,6 @@ exports[`renders text button with mode 1`] = `
       "borderWidth": 0,
       "elevation": 0,
       "minWidth": 64,
-      "shadowColor": "#000000",
-      "shadowOffset": Object {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0.24,
-      "shadowRadius": 0,
     }
   }
 >
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
index f1c52d538..6314b67ca 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -1,5 +1,212 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders list item with custom description 1`] = `
+<View
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      false,
+      Array [
+        Object {
+          "padding": 8,
+        },
+        undefined,
+      ],
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "margin": 8,
+          },
+          Object {
+            "flex": 1,
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <Text
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+              "fontFamily": "Helvetica Neue",
+              "textAlign": "left",
+              "writingDirection": "ltr",
+            },
+            Array [
+              Object {
+                "fontSize": 16,
+              },
+              Object {
+                "color": "rgba(0, 0, 0, 0.87)",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        List Item with custom description
+      </Text>
+      <View>
+        <Text
+          numberOfLines={2}
+          style={
+            Object {
+              "color": "rgba(0, 0, 0, 0.54)",
+              "fontSize": 14,
+            }
+          }
+        >
+          React Native Paper is a high-quality, standard-compliant Design Design library that has you covered in all major use-cases.
+        </Text>
+        <View>
+          <View
+            style={
+              Object {
+                "backgroundColor": "#ebebeb",
+                "borderColor": "#ebebeb",
+                "borderRadius": 16,
+                "borderStyle": "solid",
+                "borderWidth": 0.5,
+                "elevation": 0,
+              }
+            }
+          >
+            <View
+              accessibilityRole="button"
+              accessibilityStates={Array []}
+              accessible={true}
+              isTVSelectable={true}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "overflow": "hidden",
+                  },
+                  Object {
+                    "borderRadius": 16,
+                  },
+                ]
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "paddingHorizontal": 4,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "padding": 4,
+                      },
+                      null,
+                    ]
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    style={
+                      Array [
+                        Object {
+                          "color": "rgba(0, 0, 0, 0.54)",
+                          "fontSize": 18,
+                        },
+                        Array [
+                          Object {
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Array [
+                        Object {
+                          "lineHeight": 24,
+                          "marginVertical": 4,
+                          "minHeight": 24,
+                          "textAlignVertical": "center",
+                        },
+                        Object {
+                          "color": "rgba(0, 0, 0, 0.87)",
+                          "marginLeft": 4,
+                          "marginRight": 8,
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  DOCS.pdf
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`renders list item with custom title and description styles 1`] = `
 <View
   accessible={true}
diff --git a/src/components/__tests__/__snapshots__/Menu.test.js.snap b/src/components/__tests__/__snapshots__/Menu.test.js.snap
index 57226cbcd..0e298c723 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.js.snap
@@ -14,13 +14,6 @@ exports[`renders not visible menu 1`] = `
         "borderWidth": 0.5,
         "elevation": 0,
         "minWidth": 64,
-        "shadowColor": "#000000",
-        "shadowOffset": Object {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0.24,
-        "shadowRadius": 0,
       }
     }
   >
@@ -108,13 +101,6 @@ exports[`renders visible menu 1`] = `
         "borderWidth": 0.5,
         "elevation": 0,
         "minWidth": 64,
-        "shadowColor": "#000000",
-        "shadowOffset": Object {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0.24,
-        "shadowRadius": 0,
       }
     }
   >
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
index 08ceece21..000431ed9 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -150,13 +150,6 @@ exports[`renders snackbar with action button 1`] = `
           "marginHorizontal": 8,
           "marginVertical": 6,
           "minWidth": "auto",
-          "shadowColor": "#000000",
-          "shadowOffset": Object {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0.24,
-          "shadowRadius": 0,
         }
       }
     >