Skip to content

fix: use ReactElement | null for Text and AnimatedText return type (fixes #4871)#4877

Open
krishnamanieee wants to merge 1 commit intocallstack:mainfrom
krishnamanieee:fix/4871-text-jsx-return-type
Open

fix: use ReactElement | null for Text and AnimatedText return type (fixes #4871)#4877
krishnamanieee wants to merge 1 commit intocallstack:mainfrom
krishnamanieee:fix/4871-text-jsx-return-type

Conversation

@krishnamanieee
Copy link

Motivation

After upgrading to react-native-paper v5.15.0, consumers see TypeScript errors when using Text (and when using styled(Text)):

  1. Text as JSX: 'Text' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element.
  2. styled(Text): Argument of type 'TextComponent<never>' is not assignable to parameter of type 'NativeTarget' | 'WebTarget'.

This happens because the exported component types declared a return type of ReactNode. In current React/TypeScript, a component used as JSX must return React.ReactElement | null. This change updates the TextComponent and customAnimatedText typings to return React.ReactElement | null so that Text and AnimatedText are valid JSX components and compatible with styled().

Related issue

Fixes #4871

Test plan

  • TypeScript: Run yarn typescript in the repo root (and in a consumer app using Text and optionally styled(Text)) and confirm no type errors.
  • Lint/tests: Run yarn lint and yarn test to ensure nothing else is broken.
  • Usage: Use <Text>, <AnimatedText>, and styled(Text) in a TypeScript project; tsc --noEmit (or bun run tsc:check) should pass.

@callstack-bot
Copy link

Hey @krishnamanieee, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TypeScript errors: Text cannot be used as JSX component / styled(Text) type mismatch

3 participants