/* @flow */
import React, { PureComponent } from 'react';
import type { ChildrenArray } from 'react';
import { View } from 'react-native';

import type { Style } from '../types';

type Props = {
  children: ChildrenArray<*>,
  spacing?: number,
  outerSpacing?: boolean,
  style?: Style,
  itemStyle?: Style,
};

/**
 * A convenience component that uniformly styles and spaces its children.
 *
 * @param spacing Set distance between components by setting
 *     marginBottom on all but the last component.
 * @param outerSpacing Set a margin around the list.
 * @param itemStyle Style applied to each child.
 */
export default class ComponentList extends PureComponent<Props> {
  props: Props;

  static defaultProps = {
    outerSpacing: true,
    spacing: 16,
  };

  render() {
    const { children, itemStyle, spacing, outerSpacing, style } = this.props;
    const outerStyle = outerSpacing ? { margin: spacing } : {};
    const marginStyle = { marginBottom: spacing };

    return (
      <View style={[style, outerStyle]}>
        {React.Children.map(
          children,
          (child, i) =>
            child
            && React.cloneElement(child, {
              style: [child.props.style, i + 1 < children.length ? marginStyle : {}, itemStyle],
            }),
        )}
      </View>
    );
  }
}

@@ -396,20 +396,68 @@
 * @p
-aram 
+rop children - Components to be styled.%0A * @prop %5B
 spacing
+%5D -
  Set
@@ -552,21 +552,21 @@
 t.%0A * @p
-aram 
+rop %5B
 outerSpa
@@ -569,16 +569,19 @@
 rSpacing
+%5D -
  Set a m
@@ -612,13 +612,64 @@
 * @p
-aram 
+rop %5Bstyle%5D - Style of the wrapper container.%0A * @prop %5B
 item
@@ -673,16 +673,19 @@
 temStyle
+%5D -
  Style a

Improve documentation for ComponentList.