Extending react-native-paper components in TypeScript

Question

I'm struggling to extend the react-native-paper components correctly. What am I doing wrong or how to do it correctly? actually, I'm not totally new to Typescript, but I always struggled with this one:

// TextInput.tsx
import React from "react";
import { TextInput as PaperTextInput } from "react-native-paper";
import { TextInputProps } from "react-native-paper/lib/typescript/src/components/TextInput/TextInput";

interface MyTextInputProps extends TextInputProps {}

const MyTextInput: React.FC = (props) => {
  return ;
};

export default MyTextInput;

// Usage:

And I get this error:

Property 'theme' is missing in type '{ mode: "outlined"; style: { alignSelf: "stretch"; }; label: string; }' but required in type 'MyTextInputProps'

Peeja_4937 · Answer

It looks like TextInputProps isn't actually the type of the props of TextInput. This is probably because the exported component is wrapped with withTheme():

export default withTheme(TextInput);

It gets real messy in the final compiled types:

declare const _default: (React.ComponentClass & {
    theme?: import("@callstack/react-theme-provider").$DeepPartial | undefined;
}, any> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass & typeof TextInput) | (React.FunctionComponent & typeof TextInput), {}>) | (React.FunctionComponent & {
    theme?: import("@callstack/react-theme-provider").$DeepPartial | undefined;
}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass & typeof TextInput) | (React.FunctionComponent & typeof TextInput), {}>);
export default _default;

Instead of TextInputProps, you can use React.ComponentProps. But because that's not an interface, you can't extend it into a new interface; you'll have to use an object type instead.

// TextInput.tsx
import React from "react";
import { TextInput as PaperTextInput } from "react-native-paper";

type MyTextInputProps = React.ComponentProps & {
  // ...
}

const MyTextInput: React.FC = (props) => {
  return ;
};

export default MyTextInput;

user_339793 · Answer

If you look at the Typescript declaration of the TextInputProps class/interface, it'll have a theme property that is not optional. However, your import there looks really fishy - maybe just use an interface of your own for the props that exposes just what you actually need?

A quick solution to get rid of the warning would be to use Partial:

interface MyTextInputProps extends Partial {}

Note that this will stop TS complaints about any missing properties, but then, all others seem to be optional anyway (no idea why the theme one isn't).

user_9299958 · Answer

You can use defaultProps to set a theme and it should solve the problem.

import React from "react";
import { TextInput as PaperTextInput, DefaultTheme } from "react-native-paper";

interface Props extends TextInputProps {
  yourCustomProperty: string;
}

const MyTextInput = (props : Props) => {
  return ;
};

MyTextInput.defaultProps = {
  theme: DefaultTheme
}

export default MyTextInput;

Extending react-native-paper components in TypeScript

3 Answers