ReactNativeRow.tsx

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

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

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

  const styles: StyleProp<ViewStyle>[] = [style, { flexDirection: 'row' }];

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

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

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

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