Extending typescript type with default react view properties

April 18, 2022

I have an AudioButton component defined as below.

Component

import { View } from "react-native";


type PlayerProps = {
  audioId: string | undefined;
  autoPlay?: boolean;
  size?: number;
};

type IAudioButtonProps = PlayerProps & View["props"];

export default function AudioButton(props: IAudioButtonProps) {
  const { audioId, autoPlay, size, ...otherProps } = props;
  ...
  return (
      <View
        style={{
          ...otherProps,
        }}
      >    
      </View>
  )
}

Rendering component (showing error)

When I render the component, the layout looks as expected, however, I am getting a tsc warning because I am setting the marginRight property. Any idea why? I’d think that the View props + PlayerProps should cover this?

  <AudioButton
    audioId={c.id}
    size={30}
    marginRight={0}
   />

Error

Type ‘{ audioId: string; size: number; marginRight: number; }’ is not assignable to type ‘IntrinsicAttributes & PlayerProps & Readonly & Readonly<{ children?: ReactNode; }>’.
Property ‘marginRight’ does not exist on type ‘IntrinsicAttributes & PlayerProps & Readonly & Readonly<{ children?: ReactNode; }>’.

>Solution :

You may need to add in React.CSSProperties, this should resolve the tsc error.

export default function AudioButton(props: IAudioButtonProps & React.CSSProperties) {
  const { audioId, autoPlay, size, ...otherProps } = props;
  ...
  return (
      <View
        style={{
          ...otherProps,
        }}
      >    
      </View>
  )
}