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

import type { React$Node, Style } from '../types';

type Props = {|
  children: $ReadOnlyArray<React$Node>,
  spacing?: number,
  outerSpacing: boolean,
  style?: Style,
  itemStyle?: Style,
|};

/**
 * A convenience component that uniformly styles and spaces its children.
 *
 * @prop children - Components to be styled.
 * @prop [spacing] - Set distance between components by setting
 *     marginBottom on all but the last component.
 * @prop [outerSpacing] - Set a margin around the list.
 * @prop [style] - Style of the wrapper container.
 * @prop [itemStyle] - Style applied to each child.
 */
export default class ComponentList extends PureComponent<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>
    );
  }
}

@@ -1051,168 +1051,165 @@
  %7D;%0A
-%0A
     
-return (%0A      %3CView style=%7B%5Bstyle, outerStyle%5D%7D%3E%0A        %7BReact.Children.map(%0A          children,%0A          (child, i) =%3E%0A            child%0A       
+const childrenToRender = React.Children.toArray(children).filter(child =%3E child);%0A    const childrenWithStyles = childrenToRender.map((child, i) =%3E%0A
      
-&&
  Rea
@@ -1233,22 +1233,16 @@
 hild, %7B%0A
-      
         
@@ -1284,16 +1284,24 @@
 children
+ToRender
 .length 
@@ -1342,48 +1342,92 @@
     
-      %7D),%0A    
+%7D),%0A
     )
-%7D
+;%0A
 %0A    
-  
+return %3CView style=%7B%5Bstyle, outerStyle%5D%7D%3E%7BchildrenWithStyles%7D
 %3C/View%3E
-%0A    )
 ;%0A  

Fix a layout issue adding extra space at bottom.