Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to extend a native's component's props TypeScript interface in a stateless, functional component in React Native?

For consistent styling, the React Native docs recommend writing a <CustomText /> text component that wraps the native <Text /> component.

While this is easy to do, I can't work out with TypeScript 2 how to make <CustomText /> have all of the props from <Text /> without having to redeclare them.

Here's my component:

import React from 'react';
import { Text } from 'react-native';


interface Props {
    children?: any
}

const CustomText: React.SFC<Props> = (props) => (
    <Text {...props}>
        {props.children}
    </Text>
);

And if I try to use it with <CustomText numberOfLines={1} /> it will result in an error

TS2339: Property 'numberOfLines' does not exist on type 'IntrinsicAttributes & Props'

In react-native.d.ts, I see that there's this export:

export interface TextProperties extends React.Props<TextProperties> {

    /**
     * Specifies should fonts scale to respect Text Size accessibility setting on iOS.
     */
    allowFontScaling?: boolean

    /**
     * Line Break mode. Works only with numberOfLines.
     * clip is working only for iOS
     */
    lineBreakMode?: 'head' | 'middle' | 'tail' | 'clip'

    /**
     * Used to truncate the text with an elipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.
     */
    numberOfLines?: number

    /**
     * Invoked on mount and layout changes with
     *
     * {nativeEvent: { layout: {x, y, width, height}}}.
     */
    onLayout?: ( event: LayoutChangeEvent ) => void

    /**
     * This function is called on press.
     * Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting).
     */
    onPress?: () => void

    /**
     * @see https://facebook.github.io/react-native/docs/text.html#style
     */
    style?: TextStyle

    /**
     * Used to locate this view in end-to-end tests.
     */
    testID?: string
}

but I'm not sure how to extend it to take advantage of it in my component's Props interface.

like image 424
Matt Stow Avatar asked Oct 27 '16 23:10

Matt Stow


People also ask

How do you pass props in functional component TypeScript?

To pass a function as props in React TypeScript: Define a type for the function property in the component's interface. Define the function in the parent component. Pass the function as a prop to the child component.

How do you pass optional props in React TypeScript?

To set optional props with default values in React TypeScript: Mark the props on the type as optional using a question mark. Provide default values for the props when destructuring them in the function's definition.


1 Answers

You just need to make your Props interface extends TextProperties:

interface Props extends TextProperties {
    children?: any
}

Edit

You need to import it first:

import { Text, TextProperties } from 'react-native';
like image 93
Nitzan Tomer Avatar answered Oct 08 '22 07:10

Nitzan Tomer