react native stack and spacer

Spacer.tsx

import React from "react";
import { StyleSheet, View, ViewProps } from "react-native";

interface Props extends ViewProps {
  readonly size?: number;
  readonly vertical?: boolean;
}

export const Spacer: React.VFC<Props> = ({
  size = 0,
  vertical = false,
  style,
  ...props
}) => {
  return vertical ? (
    <View {...props} style={StyleSheet.flatten([style, { minHeight: size }])} />
  ) : (
    <View {...props} style={StyleSheet.flatten([style, { minWidth: size }])} />
  );
};

Stack.tsx

import React from "react";
import { StyleSheet, View, ViewProps } from "react-native";
import { Spacer } from "./Spacer";

interface Props extends ViewProps {
  readonly children: React.ReactNode;
  readonly spacing?: number;
  readonly vertical?: boolean;
}

export const Stack: React.FC<Props> = ({
  children,
  spacing = 0,
  vertical = false,
  style,
  ...props
}) => {
  const items = Array.isArray(children) ? children : [children];

  const itemsWithSpacer = items.map((item, index) => (
    <React.Fragment key={index}>
      {item}
      {index < items.length - 1 && (
        <Spacer size={spacing} vertical={vertical} />
      )}
    </React.Fragment>
  ));

  return (
    <View
      {...props}
      style={StyleSheet.flatten([
        style,
        { display: "flex", flexDirection: vertical ? "column" : "row" },
      ])}
    >
      {itemsWithSpacer}
    </View>
  );
};