TypeScript error when using a signal inside a React Native <Text> component

[elliotwaite]

When I try to use a signal as a child of a React Native <Text> component, it works, but I get the following TypeScript errors. Is there a way to make TypeScript allow the use of signals inside <Text> components?

This is the error when <Text> contains only a signal:

const count = signal(0)

export function Component() {
  return <Text>{count}</Text>
               ^^^^^^^
    TS2769: No overload matches this call.
      Overload 1 of 2, '(props: TextProps | Readonly<TextProps>): Text', gave the following error.
        Type 'Signal<number>' is not assignable to type 'ReactNode'.
      Overload 2 of 2, '(props: TextProps, context: any): Text', gave the following error.
        Type 'Signal<number>' is not assignable to type 'ReactNode'.

}

This is the error when <Text> contains both text and a signal:

const count = signal(0)

export function Component() {
  return <Text>Count: {count}</Text>
          ^^^^
    TS2746: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.
    -----------------------------------------------------------------------------------------------------------------------
    TS2769: No overload matches this call.
      This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.
      This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.

}

[Cybermage83]

Confirming the issue, got the same

[ShivamJoker]

any updates on this?

[Voznov]

I solved it patching react-native typings

diff --git a/node_modules/react-native/Libraries/Text/Text.d.ts b/node_modules/react-native/Libraries/Text/Text.d.ts
index a9d2a1b..8274e84 100644
--- a/node_modules/react-native/Libraries/Text/Text.d.ts
+++ b/node_modules/react-native/Libraries/Text/Text.d.ts
@@ -19,6 +19,7 @@ import {
   NativeSyntheticEvent,
   TextLayoutEventData,
 } from '../Types/CoreEventTypes';
+import { Signal } from '@preact/signals-react';
 
 export interface TextPropsIOS {
   /**
@@ -107,7 +108,7 @@ export interface TextProps
    */
   allowFontScaling?: boolean | undefined;
 
-  children?: React.ReactNode;
+  children?: React.ReactNode | Signal<React.ReactNode>;
 
   /**
    * This can be one of the following values:

[geyang]

running into similar issue with react in the web.