How to create Typescript Definition for React Native Nested Components

Question

I'm trying to create a Typescript definition for the React Native component "react-native-tabs" and I'm getting the following error on the Text element:

Property 'name' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

Does anyone know how to modify my ts definition so I can tell the compiler that 'name' is a string property of Text when a child of Tabs?

My JSX looks like:

<Tabs selected={this.state.page} style={{backgroundColor:'white'}}
                  selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}>
                <Text name="first">First</Text>
                <Text name="second" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>
                <Text name="third">Third</Text>
                <Text name="fourth" selectedStyle={{color:'green'}}>Fourth</Text>
                <Text name="fifth">Fifth</Text>
</Tabs>

My Typescript definition looks like:

declare module "react-native-tabs" {
    import React, { Component } from "react";

    interface TabProps {
        style?: React.ViewStyle;
        selectedStyle?: {};
        onSelect?: (el:any) => void;
        selected?: string
    }


    export default class Tabs extends Component<TabProps, any> {
        constructor(props: TabProps);
    }

}

Thanks :-)

Hi @caesay I'm using Typescript 2.2.1 and I installed the react-native definition from [@]Types using the command: npm install --save [@]types/react-native (note brackets around [@] are so I can post comment on stackoverflow) — Francesco
– Francesco, Commented Mar 22, 2017 at 7:49

caesay · Accepted Answer · 2017-03-22 07:58:10Z

1

You can extend typescript modules by re-declaring them - for instance you could re-declare react-native to add items to the react native namespace. You can also extend types/interfaces by re-declaring them in the same way. One possibility might be to simply add the following to the same file that you've defined the tabs typing:

declare module "react-native" {
    export interface TextProperties {
        name?: string;
    }
}

From looking at the source code of the typings located here, it looks like this is the right place - note that this will affect the text component globally, not just nested ones.

Also note that this is how react-native itself extends the react namespace, you can see the comments that describe this at the top of the file i linked in the last paragraph.

answered Mar 22, 2017 at 7:58

caesay

17.3k16 gold badges100 silver badges167 bronze badges

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

1 Comment

Francesco Over a year ago

Thanks @caesay that worked! I created a new definition file in my project called react-native.d.ts with your code and added the following lines at the beginning: import * as ReactNative from 'react-native'; export default ReactNative;

Collectives™ on Stack Overflow

How to create Typescript Definition for React Native Nested Components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related