React-native-paper: How to inherit or use component TS Props

[zachariahtimothy]

Ask your Question

As a beneficial best practice, I commonly wrap component library components into my own elements. To do this we generally inherit both component and TS props. For example:

import React from 'react';
import { Button as BaseComp, ButtonProps as BaseProps } from 'react-native-paper';

export interface ButtonProps extends BaseProps {}

export function Button(props: ButtonProps) {
  return <BaseComp {...props} />
}

Given the new release, it seems like extracting component props in TS is now impossible. Maybe it is a different approach and someone can correct me?

In components/Button.tsx I would expect to see something similar to export type ButtonProps = Props.

[satya164]

There's already a way to get component's prop types: React.ComponentProps<typeof Button>

[zachariahtimothy]

Holy blazing fast response! Thank you @satya164 , that works! For others stumbling on this chain I ended up with the following;

import React from 'react';
import { Button as BaseComp } from 'react-native-paper';

export type ButtonProps = React.ComponentProps<typeof BaseComp>;

export function Button(props: ButtonProps) {
  return <BaseComp {...props} />
}

[bboure]

Hi,

FYI,

I wanted to use this approch in order to extend some components as well but I have been having issues with TS going crazy and stopping working when using React.ComponentProps.

I want to overrinde the icon prop in order to use a custom Icon provider.
I was trying to do the following;

ts type Props = React.ComponentProps<typeof Button> & { icon: IconProp; // custom iconProp type. };

After hours of trail/error I found out that the issue was that for some reason, TS would not override/merge the icon prop properly.

After trying the following, everything started working again:

ts type IconComponent = Omit<React.ComponentProps<typeof Button>, 'icon'> & { icon: IconProp; };