React Native: how to extend Text component (the "hook" and the "class" way).

AppText.tsx

import React from 'react'
import { Text, TextProps } from 'react-native'

// The "hook" way.
// The `React.PropsWithChildren` type adds the `children` property to the `TextProps` type.
const AppText1 = ({ children, style, ...rest }: React.PropsWithChildren<TextProps>) => (
  <Text style={[{ fontFamily: 'monospace' }, style]} {...rest}>
    {children}
  </Text>
)

// The "class" way.
// The `React.Component<TextProps>` extends the `Text` component.
class AppText2 extends React.Component<TextProps> {
  render() {
    const { children, style, ...rest } = this.props

    return (
      <Text style={[{ fontFamily: 'monospace' }, style]} {...rest}>
        {children}
      </Text>
    )
  }
}

Thank you, I was trying to create a custom text component but typescript was complaining about my props, and this React.PropsWithChildren<TextProps>) fixed that problem.

Give error = Type '{}' is not assignable to type 'Text'.
Type '{}' is missing the following properties from type 'NativeMethods': measure, measureInWindow, measureLayout, setNativeProps, and 3 more.

Thanks a lot that really helped me out !

Tks :)