Destructure Components Props using Interfaces

DestructureWithInterface.tsx

import React from 'react';
import { TextInput, TextInputProps } from 'react-native';
import styled from 'styled-components/native';
import { ColorProps, SpaceProps, color, compose, space } from 'styled-system';

interface WrapperProps extends ColorProps, SpaceProps {
  // ColorProps will et al. add `bg`, `backgroundColor` props
  // SpaceProps => `margin`, `padding`, `paddingTop` etc.
}

const Wrapper = styled.View<WrapperProps>`
  ${compose(space, color)}
`;

interface MyTextInputProps extends WrapperProps, TextInputProps {}

const MyTextInput: React.FC<MyTextInputProps> = ({
  [WrapperProps]: wrapperProps,
  [TextInputProps]: textInputProps,
  ...restOfProps
}) => {
  return (
    <Wrapper {...wrapperProps}>
      <TextInput {...textInputProps} />
    </Wrapper>
  );
};

const App = () => {
  <>
    <MyTextInput
      margin={16}
      color={'yellow'}
      onChangeText={() => {}}
      value=""
    />
    <MyTextInput
      marginBottom={16}
      backgroundColor={'papayawhip'}
      onChangeText={() => {}}
      value=""
    />
  </>;
};