react-native-collapsible TS: Property 'children' does not exist on type

After updating to "react-native": "0.70.3" and "react": "18.1.0" types break when passing children to a <Collapsible /> component. Same issue occurred with other libraries as well but got fixed when updated to latest versions. But this issue seems to not be fixed in version 1.6.0.

Full TS error

No overload matches this call.
  Overload 1 of 2, '(props: CollapsibleProps | Readonly<CollapsibleProps>): Collapsible', gave the following error.
    Type '{ children: ReactNode; collapsed: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Collapsible> & Readonly<CollapsibleProps>'.

      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Collapsible> & Readonly<CollapsibleProps>'.

  Overload 2 of 2, '(props: CollapsibleProps, context: any): Collapsible', gave the following error.
    Type '{ children: ReactNode; collapsed: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Collapsible> & Readonly<CollapsibleProps>'.

      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Collapsible> & Readonly<CollapsibleProps>'

Oct 26 '22 10:10 Tuuben

Quick fix: Just add to CollapsibleProps in index.d.ts property children: ReactNode; and it works well.

Nov 05 '22 12:11 zmatez

Hacky workaround:

<Collapsible
  collapsed={isCollapsed}
  // workaround: children prop not in TS definitions
  {...{
    children: props.children // <-- put children here
  }}
/>

Nov 28 '22 03:11 RikusWiehahn

You can safely extend the type without modifying any files in node_modules:

import { CollapsibleProps as OriginalCollapsibleProps } from "react-native-collapsible";

declare module "react-native-collapsible" {
  interface CollapsibleProps extends OriginalCollapsibleProps {
    children?: React.ReactNode;
  }
}

EDIT this can be simplified:

// this file must be a module - at least one import/export will force that
export {};

declare module "react-native-collapsible" {
  // https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
  interface CollapsibleProps {
    children?: React.ReactNode;
  }
}