Matt Stow Matt Stow - 1 year ago 222
React JSX Question

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 />

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}>

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'

, 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
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

Answer Source

You just need to make your Props interface extends TextProperties:

interface Props extends TextProperties {
    children?: any


You need to import it first:

import { Text, TextProperties } from 'react-native';
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download