TypeScript not working with react 18, due to the removal of implicit children

[Elias-Graf]

Issue

The implicit children property was removed in react 18: DefinitelyTyped/DefinitelyTyped#56210. This means that (pretty much all) the components currently throw:

No overload matches this call.
  Overload 1 of 2, '(props: MenuProps | Readonly<MenuProps>): Menu', gave the following error.
    Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Menu> & Readonly<MenuProps>'.
  Overload 2 of 2, '(props: MenuProps, context: any): Menu', gave the following error.
    Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Menu> & Readonly<MenuProps>'.

(the above error courses on a Menu element)

Workaround

Due to TypeScript declaration merging, it is possible to "patch" the type definitions using the following code:

module 'react-native-popup-menu' {
	interface MenuProps extends React.PropsWithChildren {}
	interface MenuTriggerProps extends React.PropsWithChildren {}
	interface MenuOptionProps extends React.PropsWithChildren {}
	interface MenuOptionsProps extends React.PropsWithChildren {}
	interface MenuProviderProps extends React.PropsWithChildren {}
        // Extend with other neccessary props in your usecase...
}

(should be placed in some globally available declaration file)

Actual fix

1. Use the PropsWithChildren type

export class Menu extends React.Component<React.PropsWithChildren<MenuProps>>

2. Supply a custom children property

interface MenuProps {
        children?: React.ReactNode; // Or constraint the children somehow, eg. `React.ReactElement<MenuTriggerProps>`
        // ...
}

You probably want to read DefinitelyTyped/DefinitelyTyped#56210. They provide a "codemod" to fix the issue.,

[sodik82]

should be fixed with react-native-popup-menu@0.15.13