[v4] 'BottomSheetBackdrop' cannot be used as a JSX component.

[LouisKraemer]

Bug

When upgrading to RN 0.72, I encountered this ts issue.

'BottomSheetBackdrop' cannot be used as a JSX component.
  Its return type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not a valid JSX element.
    Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'Element'.
      Types of property 'key' are incompatible.
        Type 'Key | null' is not assignable to type 'string | null'.
          Type 'number' is not assignable to type 'string'.ts(2786)

Environment info

Library	Version
@gorhom/bottom-sheet	4.5.1
react-native	0.72.7
react-native-reanimated	3.5.4
react-native-gesture-handler	2.14.0
typescript	4.9.5

Steps To Reproduce

Describe what you expected to happen:

No TS error

Reproducible sample code

import { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
import React from 'react';

export const CustomBackdrop = (backdropProps: BottomSheetDefaultBackdropProps) => (
  <BottomSheetBackdrop {...backdropProps} disappearsOnIndex={-1} appearsOnIndex={0} />
);

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[towhid135]

Still facing the issue

[comertcimen]

"@types/react-test-renderer": "^18.0.0",

Using this version will solve the problem.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.