Merging/ Extending Typescript React-Native interfaces

Question

So I've a little dilema here, I'm using react native together with Typescript.

Have @types/react-native installed which has an interface 'TextInputStatic' declared under node modules @types/react-native.

export interface TextInputStatic extends NativeMethodsMixin, TimerMixin, React.ComponentClass<TextInputProperties> {
    State: TextInputState;

    /**
     * Returns if the input is currently focused.
     */
    isFocused: () => boolean;

    /**
     * Removes all text from the input.
     */
    clear: () => void;
}

In my component I need to use custom props for TextInput but because of interfaces defined in node modules typescript compiler throws an error:

Type '{ prop1: { name: string; anonymous: boolean; }; prop2: "f"; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<TextInputProperties, ComponentState, nev...'.

When used like this:

<TextInput prop1={{name: 'loginField', anonymous: false }} prop2='f'></TextInput>

I looked at merging/ extending interfaces but no luck so far. Anyone knows how can I extend or allow TextInput to have custom props?

What I've tried to do is created an index.d.ts file and then:

import * as Native from 'react-native';

interface InputType extends Native.TextInputStatic{
    prop1?: any;
}

But no luck

Thanks

I was hoping I'd be able to write an interface or type that extends TextInputStatic or something like that — TSlegaitis
– TSlegaitis, Commented Apr 6, 2018 at 6:27
typescriptlang.org/docs/handbook/declaration-merging.html Something along the lines of this — TSlegaitis
– TSlegaitis, Commented Apr 6, 2018 at 6:49

Adrian Mole · Accepted Answer · 2022-10-22 02:21:56Z

1

First, you have to get the type from the component itself. Like this:

type TextInputStaticType = React.ComponentProps<typeof TextInputStatic>

Then you can extend the interface or type from there.

edited Oct 22, 2022 at 2:21

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Oct 15, 2022 at 17:05

Xiel

614 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cantaş · Accepted Answer · 2023-06-22 15:28:34Z

0

TextInputProps useable from reac-native >0.72 package

answered Jun 22, 2023 at 15:28

cantaş

1361 silver badge8 bronze badges

Collectives™ on Stack Overflow

Merging/ Extending Typescript React-Native interfaces

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related