How to extend a native's component's props TypeScript interface in a stateless, functional component in React Native?
react-native, react-props, reactjs, typescript
Solution
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';
Problem
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.