fix: fix bug with applying backgroundColor to DrawerSection (callstac…

…k#1063)

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 font = 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, ...font, 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);

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();
+ });
+});

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>
+`;