ReactNativeColumn.tsx

import React, { FC } from 'react';
import { ViewProps, View, FlexAlignType } from 'react-native';

interface IProps extends ViewProps {
  alignVertical?:
    | 'flex-start'
    | 'flex-end'
    | 'center'
    | 'space-between'
    | 'space-around'
    | 'space-evenly';
  alignHorizontal?: FlexAlignType;
  flex?: boolean;
}

export const Column: FC<IProps> = props => {
  const { style, flex, alignVertical, alignHorizontal, ...viewProps } = props;

  const styles = [style];

  if (flex) {
    styles.push({ flex: 1 });
  }

  if (alignVertical !== undefined) {
    styles.push({ justifyContent: alignVertical });
  }

  if (alignHorizontal !== undefined) {
    styles.push({ alignItems: alignHorizontal });
  }

  return <View style={styles} {...viewProps} />;
};