React(Native) Stack Component (Whitespace defined by parent)

Stack.js

import React, { Fragment } from "react"
import { View } from "./"

const Stack = ({ children, gap = 2, ...rest }) => {
  const Wrapper = Object.keys(rest).length > 0 ? View : Fragment
  const childrenWithProps = React.Children.map(children, (child, index) => {
    if (!child) return null
    if (index === 0 || index === children.length - 1) {
      return child
    }
    const addProps =
      typeof child.props.m !== "undefined" ||
      typeof child.props.my !== "undefined"
    ? null
        : {
            mt: child.props.mt || gap,
            mb: child.props.mb || gap
          }
    return React.cloneElement(child, addProps)
  })
  return <Wrapper {...rest}>{childrenWithProps}</Wrapper>
}

export default Stack

Usage.js

import React from 'react'
import { Stack, View } from './components'

export default () => (
  <Stack gap={2} px={2}>
    <View ... />
    <View ... />
  </Stack>
)

View is a styled component with at least ${space} from styled-system:
const View = styled.div'${space}'