Skip to content

Instantly share code, notes, and snippets.

@mtt87
Created March 5, 2020 18:15
Show Gist options
  • Save mtt87/84b92a8bd916a706b598434a4f7dab08 to your computer and use it in GitHub Desktop.
Save mtt87/84b92a8bd916a706b598434a4f7dab08 to your computer and use it in GitHub Desktop.
/* 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment