Separator.js

import React, { Component } from 'react';

import {View} from "glamorous-native";

import * as Colors from "colors";
import {getColor} from "colors";
import { greyD } from "colors";


const Separator = ({
                     spacing = 10,
                     vertical = false,
                     borderWidth = 1,
                     ...props,
                   }) => {
  const color = getColor(props,greyD);

  const sizeProps = vertical ?
    {height: '100%'} :
    {width: '100%'};

  const spacingProps = vertical ?
    {marginRight: spacing, marginLeft: spacing} :
    {marginTop: spacing, marginBottom: spacing};

  return (
    <View
      {...sizeProps}
      {...spacingProps}
      {...props}
      borderWidth={borderWidth}
      borderColor={color}
    />
  );
};


export const WithSeparators = ({children, ...props}) => React.Children.toArray(children)
  .map((childrenItem,i) => (
    <React.Fragment key={`${i}`}>
      {i > 0 && <Separator {...props}/>}
      {childrenItem}
    </React.Fragment>
  ));



export default Separator;