fix: added error message when dynamic sizing enabled with a wrong children type

Author: gorhom

src/components/bottomSheet/BottomSheet.tsx

@@ -168,13 +168,17 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     //#region validate props
-    usePropsValidator({
-      index: _providedIndex,
-      snapPoints: _providedSnapPoints,
-      enableDynamicSizing,
-      topInset,
-      bottomInset,
-    });
+    if (__DEV__) {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      usePropsValidator({
+        index: _providedIndex,
+        snapPoints: _providedSnapPoints,
+        enableDynamicSizing,
+        topInset,
+        bottomInset,
+        children,
+      });
+    }
     //#endregion
 
     //#region layout variables

src/components/bottomSheetScrollable/BottomSheetFlatList.tsx

@@ -21,6 +21,8 @@ const BottomSheetFlatListComponent = createBottomSheetScrollableComponent<
 
 const BottomSheetFlatList = memo(BottomSheetFlatListComponent);
 BottomSheetFlatList.displayName = 'BottomSheetFlatList';
+//@ts-ignore
+BottomSheetFlatList.$bottomSheetIntegrated = true;
 
 export default BottomSheetFlatList as <T>(
   props: BottomSheetFlatListProps<T>

src/components/bottomSheetScrollable/BottomSheetScrollView.tsx

@@ -21,6 +21,8 @@ const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent<
 
 const BottomSheetScrollView = memo(BottomSheetScrollViewComponent);
 BottomSheetScrollView.displayName = 'BottomSheetScrollView';
+//@ts-ignore
+BottomSheetScrollView.$bottomSheetIntegrated = true;
 
 export default BottomSheetScrollView as (
   props: BottomSheetScrollViewProps

src/components/bottomSheetScrollable/BottomSheetSectionList.tsx

@@ -22,6 +22,8 @@ const BottomSheetSectionListComponent = createBottomSheetScrollableComponent<
 
 const BottomSheetSectionList = memo(BottomSheetSectionListComponent);
 BottomSheetSectionList.displayName = 'BottomSheetSectionList';
+//@ts-ignore
+BottomSheetSectionList.$bottomSheetIntegrated = true;
 
 export default BottomSheetSectionList as <ItemT, SectionT = DefaultSectionT>(
   props: BottomSheetSectionListProps<ItemT, SectionT>

src/components/bottomSheetScrollable/BottomSheetVirtualizedList.tsx

@@ -24,6 +24,8 @@ const BottomSheetVirtualizedListComponent =
 
 const BottomSheetVirtualizedList = memo(BottomSheetVirtualizedListComponent);
 BottomSheetVirtualizedList.displayName = 'BottomSheetVirtualizedList';
+//@ts-ignore
+BottomSheetVirtualizedList.$bottomSheetIntegrated = true;
 
 export default BottomSheetVirtualizedList as <T>(
   props: BottomSheetVirtualizedListProps<T>

src/components/bottomSheetView/BottomSheetView.tsx

@@ -98,5 +98,7 @@ function BottomSheetViewComponent({
 
 const BottomSheetView = memo(BottomSheetViewComponent);
 BottomSheetView.displayName = 'BottomSheetView';
+//@ts-ignore
+BottomSheetView.$bottomSheetIntegrated = true;
 
 export default BottomSheetView;

src/hooks/useNormalizedSnapPoints.ts

@@ -77,8 +77,11 @@ export const useNormalizedSnapPoints = (
           : containerHeight.value
       );
 
-    // push dynamic snap point into the normalized snap points.
-    _normalizedSnapPoints.push(dynamicSnapPoint);
+    // push dynamic snap point into the normalized snap points,
+    // only if it does not exists in the provided list already.
+    if (!_normalizedSnapPoints.includes(dynamicSnapPoint)) {
+      _normalizedSnapPoints.push(dynamicSnapPoint);
+    }
 
     // sort all snap points.
     _normalizedSnapPoints = _normalizedSnapPoints.sort((a, b) => b - a);

src/hooks/usePropsValidator.ts

@@ -14,9 +14,15 @@ export const usePropsValidator = ({
   enableDynamicSizing,
   topInset,
   bottomInset,
+  children,
 }: Pick<
   BottomSheetProps,
-  'index' | 'snapPoints' | 'enableDynamicSizing' | 'topInset' | 'bottomInset'
+  | 'index'
+  | 'snapPoints'
+  | 'enableDynamicSizing'
+  | 'topInset'
+  | 'bottomInset'
+  | 'children'
 >) => {
   useMemo(() => {
     //#region snap points
@@ -78,4 +84,18 @@ export const usePropsValidator = ({
 
     // animations
   }, [index, snapPoints, topInset, bottomInset, enableDynamicSizing]);
+
+  useMemo(() => {
+    invariant(
+      (enableDynamicSizing &&
+        children &&
+        // @ts-ignore
+        children.type &&
+        // @ts-ignore
+        children.type.$bottomSheetIntegrated) ||
+        !enableDynamicSizing,
+      `'enableDynamicSizing' is enabled but children type is not integrated with the library !` +
+        ` expected children types are\n- BottomSheetView\n- BottomSheetFlatList\n- BottomSheetScrollView\n- BottomSheetSectionList\n- BottomSheetVirtualizedList`
+    );
+  }, [enableDynamicSizing, children]);
 };