chore: fixed types (#1123)(by @stropho)

* fix: react 18 types

* fix: allow providing whatever version of react types the library consumer needs as optional peer dependecies

Author: stropho

package.json

@@ -67,11 +67,21 @@
     "typescript": "^4.2.4"
   },
   "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-native": "*",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": ">=1.10.1",
     "react-native-reanimated": ">=2.2.0"
   },
+  "peerDependenciesMeta": {
+    "@types/react-native": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    }
+  },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",

src/components/bottomSheet/types.d.ts

@@ -283,9 +283,9 @@ export interface BottomSheetProps
   footerComponent?: React.FC<BottomSheetFooterProps>;
   /**
    * A scrollable node or normal view.
-   * @type React.ReactNode[] | React.ReactNode
+   * @type (() => React.ReactElement) | React.ReactNode[] | React.ReactNode
    */
-  children: (() => React.ReactNode) | React.ReactNode[] | React.ReactNode;
+  children: (() => React.ReactElement) | React.ReactNode[] | React.ReactNode;
   //#endregion
 
   //#region private

src/components/bottomSheetFooter/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { ViewStyle } from 'react-native';
 import type Animated from 'react-native-reanimated';
 
@@ -31,7 +31,7 @@ export interface BottomSheetDefaultFooterProps extends BottomSheetFooterProps {
   /**
    * Component to be placed in the footer.
    *
-   * @type {ReactNode | ReactNode[]}
+   * @type {ReactNode | ReactNode[] | (() => ReactElement)}
    */
-  children?: ReactNode | ReactNode[];
+  children?: ReactNode | ReactNode[] | (() => ReactElement);
 }

src/components/bottomSheetModal/BottomSheetModal.tsx

@@ -142,30 +142,36 @@ const BottomSheetModalComponent = forwardRef<
     }
     bottomSheetRef.current?.snapToPosition(...args);
   }, []);
-  const handleExpand = useCallback((...args) => {
+  const handleExpand = useCallback<BottomSheetMethods['expand']>((...args) => {
     if (minimized.current) {
       return;
     }
     bottomSheetRef.current?.expand(...args);
   }, []);
-  const handleCollapse = useCallback((...args) => {
-    if (minimized.current) {
-      return;
-    }
-    bottomSheetRef.current?.collapse(...args);
-  }, []);
-  const handleClose = useCallback((...args) => {
+  const handleCollapse = useCallback<BottomSheetMethods['collapse']>(
+    (...args) => {
+      if (minimized.current) {
+        return;
+      }
+      bottomSheetRef.current?.collapse(...args);
+    },
+    []
+  );
+  const handleClose = useCallback<BottomSheetMethods['close']>((...args) => {
     if (minimized.current) {
       return;
     }
     bottomSheetRef.current?.close(...args);
   }, []);
-  const handleForceClose = useCallback((...args) => {
-    if (minimized.current) {
-      return;
-    }
-    bottomSheetRef.current?.forceClose(...args);
-  }, []);
+  const handleForceClose = useCallback<BottomSheetMethods['forceClose']>(
+    (...args) => {
+      if (minimized.current) {
+        return;
+      }
+      bottomSheetRef.current?.forceClose(...args);
+    },
+    []
+  );
   //#endregion
 
   //#region bottom sheet modal methods

src/components/bottomSheetModal/types.d.ts

@@ -44,10 +44,10 @@ export interface BottomSheetModalProps
 
   /**
    * A scrollable node or normal view.
-   * @type React.ReactNode[] | React.ReactNode
+   * @type React.ReactNode[] | React.ReactNode | (({ data: any }?) => React.ReactElement)
    */
   children:
-    | (({ data: any }?) => React.ReactNode)
+    | (({ data: any }?) => React.ReactElement)
     | React.ReactNode[]
     | React.ReactNode;
 }

src/hooks/useBottomSheetDynamicSnapPoints.ts

@@ -39,13 +39,18 @@ export const useBottomSheetDynamicSnapPoints = (
     );
   }, []);
 
+  type HandleContentLayoutProps = {
+    nativeEvent: {
+      layout: { height: number };
+    };
+  };
   // callbacks
   const handleContentLayout = useCallback(
     ({
       nativeEvent: {
         layout: { height },
       },
-    }) => {
+    }: HandleContentLayoutProps) => {
       animatedContentHeight.value = height;
     },
     [animatedContentHeight]

src/hooks/useStableCallback.ts

@@ -8,7 +8,7 @@ type Callback = (...args: any[]) => any;
 export const useStableCallback = (callback: Callback) => {
   const callbackRef = useRef<Callback>();
   const memoCallback = useCallback(
-    (...args) => callbackRef.current && callbackRef.current(...args),
+    (...args: any) => callbackRef.current && callbackRef.current(...args),
     []
   );
   useEffect(() => {