Repository: callstack/react-native-paper (ts)

Issue:
List.accordion no titleStyle?
I created a page using List.Section,Accordion and Item where when the List.accordion and List.Item is pressed it will automatically update its styles (font color, bg color). So far the List.Item is the only one working properly atm. Any suggestions on this ?

Pull request:
Feat: missing titleStyle and descriptionStyle for List.Accordion and List.Section
This PR introduces missing style props:
List.Accordion:
- `titleStyle`
- `descriptionStyle`

List.Section
- `titleStyle`

Also improves `style` prop type and description in these components.
### Motivation

Fixes #973 

### Test plan

You can play around by passing these props to List.Accordion and List.Section examples.


Patch:
diff --git a/src/components/Appbar/Appbar.js b/src/components/Appbar/Appbar.js
index 539c1fcf3..7c49a466c 100644
--- a/src/components/Appbar/Appbar.js
+++ b/src/components/Appbar/Appbar.js
@@ -135,12 +135,9 @@ class Appbar extends React.Component<Props> {
           .map((child, i) => {
             if (
               !React.isValidElement(child) ||
-              ![
-                'AppbarContent',
-                'AppbarAction',
-                'AppbarBackAction',
-                'AppbarHeader',
-              ].includes(child.type.name)
+              ![AppbarContent, AppbarAction, AppbarBackAction].includes(
+                child.type
+              )
             ) {
               return child;
             }
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
index 6789ad993..d4fc21134 100644
--- a/src/components/Card/Card.js
+++ b/src/components/Card/Card.js
@@ -19,7 +19,7 @@ type Props = React.ElementConfig<typeof Surface> & {|
   /**
    * Resting elevation of the card which controls the drop shadow.
    */
-  elevation?: number,
+  elevation: number,
   /**
    * Function to execute on long press.
    */
@@ -97,7 +97,6 @@ class Card extends React.Component<Props, State> {
   };
 
   state = {
-    /* $FlowFixMe: somehow default props are not respected */
     elevation: new Animated.Value(this.props.elevation),
   };
 
@@ -110,7 +109,6 @@ class Card extends React.Component<Props, State> {
 
   _handlePressOut = () => {
     Animated.timing(this.state.elevation, {
-      /* $FlowFixMe: somehow default props are not respected */
       toValue: this.props.elevation,
       duration: 150,
     }).start();
diff --git a/src/components/List/ListAccordion.js b/src/components/List/ListAccordion.js
index 53dab52bc..4b3327c8b 100644
--- a/src/components/List/ListAccordion.js
+++ b/src/components/List/ListAccordion.js
@@ -8,6 +8,10 @@ import Icon from '../Icon';
 import Text from '../Typography/Text';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
+import type {
+  ViewStyleProp,
+  TextStyleProp,
+} from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 type Props = {|
   /**
@@ -40,7 +44,18 @@ type Props = {|
    * @optional
    */
   theme: Theme,
-  style?: any,
+  /**
+   * Style that is passed to the wrapping TouchableRipple element.
+   */
+  style?: ViewStyleProp,
+  /**
+   * Style that is passed to Title element.
+   */
+  titleStyle?: TextStyleProp,
+  /**
+   * Style that is passed to Description element.
+   */
+  descriptionStyle?: TextStyleProp,
 |};
 
 type State = {
@@ -119,7 +134,16 @@ class ListAccordion extends React.Component<Props, State> {
   };
 
   render() {
-    const { left, title, description, children, theme, style } = this.props;
+    const {
+      left,
+      title,
+      description,
+      children,
+      theme,
+      titleStyle,
+      descriptionStyle,
+      style,
+    } = this.props;
     const titleColor = color(theme.colors.text)
       .alpha(0.87)
       .rgb()
@@ -157,6 +181,7 @@ class ListAccordion extends React.Component<Props, State> {
                   {
                     color: expanded ? theme.colors.primary : titleColor,
                   },
+                  titleStyle,
                 ]}
               >
                 {title}
@@ -169,6 +194,7 @@ class ListAccordion extends React.Component<Props, State> {
                     {
                       color: descriptionColor,
                     },
+                    descriptionStyle,
                   ]}
                 >
                   {description}
diff --git a/src/components/List/ListSection.js b/src/components/List/ListSection.js
index 5363a0d58..c0781f1ed 100644
--- a/src/components/List/ListSection.js
+++ b/src/components/List/ListSection.js
@@ -5,6 +5,7 @@ import { View, StyleSheet } from 'react-native';
 import ListSubheader from './ListSubheader';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
+import type { TextStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 type Props = React.ElementConfig<typeof View> & {
   /**
@@ -19,6 +20,10 @@ type Props = React.ElementConfig<typeof View> & {
    * @optional
    */
   theme: Theme,
+  /**
+   * Style that is passed to Title element.
+   */
+  titleStyle?: TextStyleProp,
   style?: any,
 };
 
@@ -59,11 +64,11 @@ class ListSection extends React.Component<Props> {
   static displayName = 'List.Section';
 
   render() {
-    const { children, title, style, ...rest } = this.props;
+    const { children, title, titleStyle, style, ...rest } = this.props;
 
     return (
       <View {...rest} style={[styles.container, style]}>
-        {title && <ListSubheader>{title}</ListSubheader>}
+        {title && <ListSubheader style={titleStyle}>{title}</ListSubheader>}
         {children}
       </View>
     );
diff --git a/src/components/List/ListSubheader.js b/src/components/List/ListSubheader.js
index 2eb9b21c0..ec1d04137 100644
--- a/src/components/List/ListSubheader.js
+++ b/src/components/List/ListSubheader.js
@@ -12,6 +12,9 @@ type Props = React.ElementConfig<typeof Text> & {
    * @optional
    */
   theme: Theme,
+  /**
+   * Style that is passed to Text element.
+   */
   style?: any,
 };
 
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 7d983014f..e1ea5a15d 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -66,17 +66,19 @@ type State = {
  *   render() {
  *     const { visible } = this.state;
  *     return (
- *       <Portal>
- *         <Modal visible={visible} onDismiss={this._hideModal}>
- *           <Text>Example Modal</Text>
- *         </Modal>
- *         <Button
- *           style={{ marginTop: 30 }}
- *           onPress={this._showModal}
- *         >
- *           Show
- *         </Button>
- *       </Portal>
+ *      <Provider>
+ *        <Portal>
+ *          <Modal visible={visible} onDismiss={this._hideModal}>
+ *            <Text>Example Modal</Text>
+ *          </Modal>
+ *          <Button
+ *            style={{ marginTop: 30 }}
+ *            onPress={this._showModal}
+ *          >
+ *            Show
+ *          </Button>
+ *        </Portal>
+ *      </Provider>
  *     );
  *   }
  * }
diff --git a/src/components/Portal/PortalConsumer.js b/src/components/Portal/PortalConsumer.js
index 6ecdcb0e1..ad4b984cc 100644
--- a/src/components/Portal/PortalConsumer.js
+++ b/src/components/Portal/PortalConsumer.js
@@ -11,13 +11,7 @@ type Props = {|
 
 export default class PortalConsumer extends React.Component<Props> {
   async componentDidMount() {
-    if (!this.props.manager) {
-      throw new Error(
-        'Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.\n\n' +
-          "Please read our getting-started guide and make sure you've followed all the required steps.\n\n" +
-          'https://callstack.github.io/react-native-paper/getting-started.html'
-      );
-    }
+    this._checkManager();
 
     // Delay updating to prevent React from going to infinite loop
     await Promise.resolve();
@@ -26,15 +20,28 @@ export default class PortalConsumer extends React.Component<Props> {
   }
 
   componentDidUpdate() {
+    this._checkManager();
+
     this.props.manager.update(this._key, this.props.children);
   }
 
   componentWillUnmount() {
+    this._checkManager();
+
     this.props.manager.unmount(this._key);
   }
 
   _key: any;
 
+  _checkManager() {
+    if (!this.props.manager) {
+      throw new Error(
+        'Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.\n\n' +
+          "Please read our getting-started guide and make sure you've followed all the required steps.\n\n" +
+          'https://callstack.github.io/react-native-paper/getting-started.html'
+      );
+    }
+  }
   render() {
     return null;
   }
diff --git a/typings/components/List.d.ts b/typings/components/List.d.ts
index 6d2b0f4ba..3b9ca371c 100644
--- a/typings/components/List.d.ts
+++ b/typings/components/List.d.ts
@@ -17,6 +17,8 @@ export interface AccordionProps {
   onPress?: () => any;
   left?: (props: { color: string }) => React.ReactNode;
   style?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  descriptionStyle?: StyleProp<TextStyle>;
   theme?: ThemeShape;
 }
 
@@ -47,6 +49,7 @@ export interface SectionProps extends ViewProps {
   children: React.ReactNode;
   title?: string;
   theme?: ThemeShape;
+  titleStyle?: StyleProp<TextStyle>,
 }
 
 export declare class Section extends React.Component<SectionProps> {}


Test patch:
diff --git a/src/components/__tests__/Appbar/Appbar.test.js b/src/components/__tests__/Appbar/Appbar.test.js
index 6dfcf5da5..1c07030f2 100644
--- a/src/components/__tests__/Appbar/Appbar.test.js
+++ b/src/components/__tests__/Appbar/Appbar.test.js
@@ -15,4 +15,18 @@ describe('Appbar', () => {
 
     expect(tree).toMatchSnapshot();
   });
+
+  it('passes additional props to AppbarBackAction, AppbarContent and AppbarAction', () => {
+    const tree = renderer
+      .create(
+        <Appbar>
+          <Appbar.BackAction onPress={() => {}} />
+          <Appbar.Content title="Examples" />
+          <Appbar.Action icon="menu" onPress={() => {}} />
+        </Appbar>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
index 60343d331..aa0881d0d 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
@@ -232,3 +232,308 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
   </View>
 </View>
 `;
+
+exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and AppbarAction 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#6200ee",
+      "elevation": 4,
+      "flexDirection": "row",
+      "height": 56,
+      "paddingHorizontal": 4,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 3,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 4,
+    }
+  }
+>
+  <View
+    accessibilityLabel="Back"
+    accessibilityRole="button"
+    accessible={true}
+    hitSlop={
+      Object {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
+      }
+    }
+    isTVSelectable={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 18,
+            "height": 36,
+            "justifyContent": "center",
+            "margin": 6,
+            "overflow": "visible",
+            "width": 36,
+          },
+          undefined,
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={null}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 24,
+              "width": 24,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "transform": Array [
+                Object {
+                  "rotate": "0deg",
+                },
+              ],
+            }
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 24,
+                  "transform": Array [
+                    Object {
+                      "scaleX": 1,
+                    },
+                  ],
+                  "width": 24,
+                },
+              ]
+            }
+          >
+            <Image
+              source={
+                Object {
+                  "testUri": "../../../src/assets/back-chevron.png",
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "height": 21,
+                    "resizeMode": "contain",
+                    "width": 21,
+                  },
+                  Object {
+                    "tintColor": "#ffffff",
+                  },
+                ]
+              }
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+          "paddingHorizontal": 12,
+        },
+        Array [
+          Object {
+            "marginLeft": 8,
+          },
+          Object {
+            "alignItems": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <Text
+      accessibilityRole="header"
+      accessibilityTraits="header"
+      numberOfLines={1}
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+            "fontFamily": "Helvetica Neue",
+            "textAlign": "left",
+            "writingDirection": "ltr",
+          },
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "Helvetica Neue",
+            },
+            Object {
+              "fontSize": 17,
+            },
+            undefined,
+          ],
+        ]
+      }
+    >
+      Examples
+    </Text>
+  </View>
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    hitSlop={
+      Object {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
+      }
+    }
+    isTVSelectable={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 18,
+            "height": 36,
+            "justifyContent": "center",
+            "margin": 6,
+            "overflow": "visible",
+            "width": 36,
+          },
+          undefined,
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={null}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 24,
+              "width": 24,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "transform": Array [
+                Object {
+                  "rotate": "0deg",
+                },
+              ],
+            }
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+                Object {
+                  "fontFamily": "Material Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
diff --git a/src/components/__tests__/ListAccordion.test.js b/src/components/__tests__/ListAccordion.test.js
index 090681294..63be4be25 100644
--- a/src/components/__tests__/ListAccordion.test.js
+++ b/src/components/__tests__/ListAccordion.test.js
@@ -65,3 +65,20 @@ it('renders expanded accordion', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('renders list accordion with custom title and description styles', () => {
+  const tree = renderer
+    .create(
+      <ListAccordion
+        title="Accordion item 1"
+        description="Describes the expandable list item"
+        titleStyle={{ color: 'red' }}
+        descriptionStyle={{ color: 'red' }}
+      >
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/__tests__/ListSection.test.js b/src/components/__tests__/ListSection.test.js
index 190e48e90..db9e1ec9b 100644
--- a/src/components/__tests__/ListSection.test.js
+++ b/src/components/__tests__/ListSection.test.js
@@ -45,3 +45,22 @@ it('renders list section with subheader', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('renders list section with custom title style', () => {
+  const tree = renderer
+    .create(
+      <ListSection title="Some title" titleStyle={{ color: 'red' }}>
+        <ListItem
+          title="First Item"
+          left={props => <ListIcon {...props} icon="folder" />}
+        />
+        <ListItem
+          title="Second Item"
+          left={props => <ListIcon {...props} icon="folder" />}
+        />
+      </ListSection>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
index 762c1b7bf..85f2a37d9 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
@@ -63,6 +63,7 @@ exports[`renders expanded accordion 1`] = `
                 Object {
                   "color": "#6200ee",
                 },
+                undefined,
               ],
             ]
           }
@@ -302,6 +303,7 @@ exports[`renders list accordion with children 1`] = `
                 Object {
                   "color": "rgba(0, 0, 0, 0.87)",
                 },
+                undefined,
               ],
             ]
           }
@@ -359,6 +361,159 @@ exports[`renders list accordion with children 1`] = `
 </View>
 `;
 
+exports[`renders list accordion with custom title and description styles 1`] = `
+<View>
+  <View
+    accessibilityRole="button"
+    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
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        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)",
+                },
+                Object {
+                  "color": "red",
+                },
+              ],
+            ]
+          }
+        >
+          Accordion item 1
+        </Text>
+        <Text
+          numberOfLines={2}
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
+                "textAlign": "left",
+                "writingDirection": "ltr",
+              },
+              Array [
+                Object {
+                  "fontSize": 14,
+                },
+                Object {
+                  "color": "rgba(0, 0, 0, 0.54)",
+                },
+                Object {
+                  "color": "red",
+                },
+              ],
+            ]
+          }
+        >
+          Describes the expandable list item
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "margin": 8,
+            },
+            Object {
+              "alignItems": "center",
+              "height": 40,
+              "justifyContent": "center",
+            },
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          allowFontScaling={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "color": "rgba(0, 0, 0, 0.87)",
+                "fontSize": 24,
+              },
+              Array [
+                Object {
+                  "transform": Array [
+                    Object {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                Object {
+                  "backgroundColor": "transparent",
+                },
+              ],
+              Object {
+                "fontFamily": "Material Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`renders list accordion with left items 1`] = `
 <View>
   <View
@@ -472,6 +627,7 @@ exports[`renders list accordion with left items 1`] = `
                 Object {
                   "color": "rgba(0, 0, 0, 0.87)",
                 },
+                undefined,
               ],
             ]
           }
@@ -592,6 +748,7 @@ exports[`renders multiline list accordion 1`] = `
                 Object {
                   "color": "rgba(0, 0, 0, 0.87)",
                 },
+                undefined,
               ],
             ]
           }
@@ -615,6 +772,7 @@ exports[`renders multiline list accordion 1`] = `
                 Object {
                   "color": "rgba(0, 0, 0, 0.54)",
                 },
+                undefined,
               ],
             ]
           }
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
index 829822663..870549ab4 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
@@ -1,5 +1,309 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders list section with custom title style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginVertical": 8,
+      },
+      undefined,
+    ]
+  }
+  theme={
+    Object {
+      "colors": Object {
+        "accent": "#03dac4",
+        "backdrop": "rgba(0, 0, 0, 0.5)",
+        "background": "#f6f6f6",
+        "disabled": "rgba(0, 0, 0, 0.26)",
+        "error": "#B00020",
+        "notification": "#f50057",
+        "placeholder": "rgba(0, 0, 0, 0.54)",
+        "primary": "#6200ee",
+        "surface": "#ffffff",
+        "text": "#000000",
+      },
+      "dark": false,
+      "fonts": Object {
+        "light": "HelveticaNeue-Light",
+        "medium": "HelveticaNeue-Medium",
+        "regular": "Helvetica Neue",
+        "thin": "HelveticaNeue-Thin",
+      },
+      "roundness": 4,
+    }
+  }
+>
+  <Text
+    numberOfLines={1}
+    style={
+      Array [
+        Object {
+          "color": "#000000",
+          "fontFamily": "Helvetica Neue",
+          "textAlign": "left",
+          "writingDirection": "ltr",
+        },
+        Array [
+          Object {
+            "paddingHorizontal": 16,
+            "paddingVertical": 13,
+          },
+          Object {
+            "color": "rgba(0, 0, 0, 0.54)",
+            "fontFamily": "HelveticaNeue-Medium",
+          },
+          Object {
+            "color": "red",
+          },
+        ],
+      ]
+    }
+  >
+    Some title
+  </Text>
+  <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="box-none"
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "height": 40,
+              "justifyContent": "center",
+              "margin": 8,
+              "width": 40,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          allowFontScaling={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "color": "rgba(0, 0, 0, 0.54)",
+                "fontSize": 24,
+              },
+              Array [
+                Object {
+                  "transform": Array [
+                    Object {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                Object {
+                  "backgroundColor": "transparent",
+                },
+              ],
+              Object {
+                "fontFamily": "Material Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <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,
+              ],
+            ]
+          }
+        >
+          First Item
+        </Text>
+      </View>
+    </View>
+  </View>
+  <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="box-none"
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "height": 40,
+              "justifyContent": "center",
+              "margin": 8,
+              "width": 40,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          allowFontScaling={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "color": "rgba(0, 0, 0, 0.54)",
+                "fontSize": 24,
+              },
+              Array [
+                Object {
+                  "transform": Array [
+                    Object {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                Object {
+                  "backgroundColor": "transparent",
+                },
+              ],
+              Object {
+                "fontFamily": "Material Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <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,
+              ],
+            ]
+          }
+        >
+          Second Item
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`renders list section with subheader 1`] = `
 <View
   style={