ReactNativePadding.tsx

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

interface IProps {
  top?: number;
  right?: number;
  bottom?: number;
  left?: number;
  horizontal?: number;
  vertical?: number;
  all?: number;
}

export const Padding: FC<IProps> = ({
  children,
  top,
  right,
  bottom,
  left,
  horizontal,
  vertical,
  all,
}) => {
  const style: ViewStyle = {};
  if (all !== undefined) {
    style.padding = all;
  }
  if (vertical !== undefined) {
    style.paddingVertical = vertical;
  }
  if (horizontal !== undefined) {
    style.paddingHorizontal = horizontal;
  }
  if (top !== undefined) {
    style.paddingTop = top;
  }
  if (right !== undefined) {
    style.paddingRight = right;
  }
  if (bottom !== undefined) {
    style.paddingBottom = bottom;
  }
  if (left !== undefined) {
    style.paddingLeft = left;
  }
  return <View style={style}>{children}</View>;
};