diff --git a/package.json b/package.json index 362ad2e9f..ac4475d0a 100644 --- a/package.json +++ b/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", diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts index c489981e1..7b514cf16 100644 --- a/src/components/bottomSheet/types.d.ts +++ b/src/components/bottomSheet/types.d.ts @@ -283,9 +283,9 @@ export interface BottomSheetProps footerComponent?: React.FC; /** * 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 diff --git a/src/components/bottomSheetFooter/types.d.ts b/src/components/bottomSheetFooter/types.d.ts index f523065f7..14c52e86d 100644 --- a/src/components/bottomSheetFooter/types.d.ts +++ b/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); } diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx index e0070c5ce..8ee4f05c7 100644 --- a/src/components/bottomSheetModal/BottomSheetModal.tsx +++ b/src/components/bottomSheetModal/BottomSheetModal.tsx @@ -142,30 +142,36 @@ const BottomSheetModalComponent = forwardRef< } bottomSheetRef.current?.snapToPosition(...args); }, []); - const handleExpand = useCallback((...args) => { + const handleExpand = useCallback((...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( + (...args) => { + if (minimized.current) { + return; + } + bottomSheetRef.current?.collapse(...args); + }, + [] + ); + const handleClose = useCallback((...args) => { if (minimized.current) { return; } bottomSheetRef.current?.close(...args); }, []); - const handleForceClose = useCallback((...args) => { - if (minimized.current) { - return; - } - bottomSheetRef.current?.forceClose(...args); - }, []); + const handleForceClose = useCallback( + (...args) => { + if (minimized.current) { + return; + } + bottomSheetRef.current?.forceClose(...args); + }, + [] + ); //#endregion //#region bottom sheet modal methods diff --git a/src/components/bottomSheetModal/types.d.ts b/src/components/bottomSheetModal/types.d.ts index 9d104e74b..fc1d90817 100644 --- a/src/components/bottomSheetModal/types.d.ts +++ b/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; } diff --git a/src/hooks/useBottomSheetDynamicSnapPoints.ts b/src/hooks/useBottomSheetDynamicSnapPoints.ts index a1c25735d..5e19bd683 100644 --- a/src/hooks/useBottomSheetDynamicSnapPoints.ts +++ b/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] diff --git a/src/hooks/useStableCallback.ts b/src/hooks/useStableCallback.ts index a868620d5..1c788ab72 100644 --- a/src/hooks/useStableCallback.ts +++ b/src/hooks/useStableCallback.ts @@ -8,7 +8,7 @@ type Callback = (...args: any[]) => any; export const useStableCallback = (callback: Callback) => { const callbackRef = useRef(); const memoCallback = useCallback( - (...args) => callbackRef.current && callbackRef.current(...args), + (...args: any) => callbackRef.current && callbackRef.current(...args), [] ); useEffect(() => {