CODEWITHSUNDEEP
javascriptreactjstypescriptreact-nativetypes
TSlegaitis
TSlegaitis

Reputation: 1310

Merging/ Extending Typescript React-Native interfaces

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

Upvotes: 1

Views: 2051

Answers (2)

cantaş
cantaş

Reputation: 136

TextInputProps useable from reac-native >0.72 package

Upvotes: 0

Xiel
Xiel

Reputation: 51

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.

Upvotes: 1

Related Questions