React Native Button using styled-system

Button.tsx

import styled from '@emotion/native';
import {useTheme} from 'emotion-theming';
import theme from '../theme';
import {space, layout, typography, color, variant} from 'styled-system';

type Variants = keyof typeof theme.buttons;

const BtnWrapper = styled.View`
  ${space}
  ${layout}
  ${typography}
  ${color}
  ${variant}
`;

const BtnText = styled.Text`
  ${color}
  ${typography}
`;

interface Props {
  variant: string;
  children: string;
  disabled?: boolean;
}

interface Theme {
  buttons: Variants;
}

function Button({variant, children, disabled = false, ...rest}: Props) {
  const theme = useTheme<Theme>();
  return (
    <BtnWrapper
      {...theme.buttons[variant]}
      opacity={disabled ? 0.3 : 1}
      {...rest}>
      <BtnText {...theme.buttons[variant]}>{children}</BtnText>
    </BtnWrapper>
  );
}

export default Button;