feat: Add sectionContainerStyle prop to Accordion (#247)

Gives users the ability to add styling to the entire accordion container.
oblador · Oct 4, 2018 · ff18c22 · ff18c22
1 parent 3392a03
commit ff18c22
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/Accordion.d.ts b/Accordion.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 import { EasingMode } from './index';
 
 export interface AccordionProps {
@@ -100,6 +101,11 @@ export interface AccordionProps {
    * Object of props to pass to the touchable component
    */
   touchableProps?: {};
+
+ /**
+   * Optional styling for the section container
+   */
+  sectionContainerStyle?: StyleProp<ViewStyle>;
 }
 
 export default class Accordion extends React.Component<AccordionProps> {}
diff --git a/Accordion.js b/Accordion.js
@@ -25,6 +25,7 @@ export default class Accordion extends Component {
     expandFromBottom: PropTypes.bool,
     expandMultiple: PropTypes.bool,
     onAnimationEnd: PropTypes.func,
+    sectionContainerStyle: ViewPropTypes.style,
   };
 
   static defaultProps = {
@@ -35,6 +36,7 @@ export default class Accordion extends Component {
     touchableComponent: TouchableHighlight,
     renderSectionTitle: () => null,
     onAnimationEnd: () => null,
+    sectionContainerStyle: {},
   };
 
   _toggleSection(section) {
@@ -77,6 +79,7 @@ export default class Accordion extends Component {
 
     const {
       activeSections,
+      sectionContainerStyle,
       expandFromBottom,
       sections,
       underlayColor,
@@ -101,7 +104,7 @@ export default class Accordion extends Component {
     return (
       <View {...viewProps}>
         {sections.map((section, key) => (
-          <View key={key}>
+          <View key={key} style={sectionContainerStyle}>
             {renderSectionTitle(section, key, activeSections.includes(key))}
 
             {expandFromBottom && renderCollapsible(section, key)}

diff --git a/README.md b/README.md
@@ -67,6 +67,7 @@ import Accordion from 'react-native-collapsible/Accordion';
 | **`onAnimationEnd(key, index)`**                        | See `Collapsible`.                                                                                             |
 | **`expandFromBottom`**                                  | Expand content from the bottom instead of the top                                                              |
 | **`expandMultiple`**                                    | Allow more than one section to be expanded. Defaults to false.                                                 |
+| **`sectionContainerStyle`**                             | Optional styling for the section container.                                                                    |
 
 ## Demo