TS: Property 'children' does not exist on type

[Tuuben]

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>'

[zmatez]

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

[RikusWiehahn]

Hacky workaround:

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

[pwfcurry]

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;
  }
}

[joe-sam]

A fix for this issue has already been merged in Jun 2022. Apparently this lib only needs a minor/major release.

[oscar-shamrock]

Who is the person that is able to do minor/major release?

[justinadkins]

@oblador any chance a minor release could be published to get the React 18 fix out?

[stevekuznetsov]

Looks like v1.6.1 released that fix. @oblador we can close this issue out!