View.tsx

/* eslint react/jsx-props-no-spreading:0 */
import React, { ReactNode } from 'react';
import { ViewProps } from 'react-native';
import {
  SpaceProps,
  ColorProps,
  LayoutProps,
  FlexProps,
  FlexDirectionProps,
  AlignItemsProps,
  JustifyContentProps,
  FlexWrapProps,
  BorderProps,
  AlignSelfProps,
  space,
  layout,
  typography,
  color,
  variant as styledVariant,
  position,
  border,
  alignSelf,
} from 'styled-system';
import styled from '@emotion/native';
import { useTheme } from 'emotion-theming';
import { Theme } from '../theme';

type Variants = keyof Theme['variants'];

const ViewComponent = styled.View`
  ${space}
  ${layout}
  ${typography}
  ${color}
  ${styledVariant}
  ${position}
  ${border}
  ${alignSelf}
`;

interface Props
  extends ViewProps,
    SpaceProps,
    ColorProps,
    LayoutProps,
    FlexProps,
    FlexDirectionProps,
    AlignItemsProps,
    JustifyContentProps,
    FlexWrapProps,
    BorderProps,
    AlignSelfProps {
  variant?: Variants;
  children?: ReactNode;
}

function View({ variant, children, ...rest }: Props) {
  const theme = useTheme<Theme>();
  return (
    <ViewComponent {...(variant && theme.variants[variant])} {...rest}>
      {children}
    </ViewComponent>
  );
}

export default View;