fix/grid list list padding

demo/src/screens/componentScreens/SortableGridListScreen.tsx

@@ -120,7 +120,7 @@ class SortableGridListScreen extends Component {
 
 const styles = StyleSheet.create({
   list: {
-    padding: Spacings.s5
+    paddingTop: Spacings.s5
   },
   itemImage: {
     width: '100%',

src/components/gridList/gridList.api.json

@@ -27,6 +27,11 @@
       "name": "keepItemSize",
       "type": "boolean",
       "description": "whether to keep the items initial size when orientation changes, in which case the apt number of columns will be calculated automatically."
+    },
+    {
+      "name": "contentContainerStyle",
+      "type": "ScrollView[contentContainerStyle]",
+      "description": "Custom content container style"
     }
   ],
   "snippet": [

src/components/gridList/index.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback} from 'react';
 import {FlatList} from 'react-native';
 import useGridLayout from './useGridLayout';
 import View from '../view';
@@ -17,19 +17,16 @@ function GridList<T = any>(props: GridListProps<T>) {
     ...others
   } = props;
 
-  const {itemContainerStyle, numberOfColumns} = useGridLayout({
+  const {itemContainerStyle, numberOfColumns, listContentStyle} = useGridLayout({
     numColumns,
     itemSpacing,
     maxItemWidth,
     listPadding,
     keepItemSize,
-    containerWidth
+    containerWidth,
+    contentContainerStyle
   });
 
-  const listContentStyle = useMemo(() => {
-    return [{paddingHorizontal: listPadding}, contentContainerStyle];
-  }, [listPadding, contentContainerStyle]);
-
   const _renderItem = useCallback((...args: any[]) => {
     // @ts-expect-error
     return <View style={itemContainerStyle}>{renderItem?.(...args)}</View>;

src/components/gridList/types.ts

@@ -1,32 +1,31 @@
-import {FlatListProps} from 'react-native';
+import {FlatListProps, ScrollViewProps} from 'react-native';
 
-export interface GridListBaseProps {
+export interface GridListBaseProps extends Pick<ScrollViewProps, 'contentContainerStyle'> {
   /**
    * Allow a responsive item width to the maximum item width
    */
-   maxItemWidth?: number;
-   /**
-    * Number of items to show in a row (ignored when passing maxItemWidth)
-    */
-   numColumns?: number;
-   /**
-    * Spacing between each item
-    */
-   itemSpacing?: number;
-   /**
-    * List padding (used for item size calculation)
-    */
-   listPadding?: number;
-   /**
-    * whether to keep the items initial size when orientation changes,
-    * in which case the apt number of columns will be calculated automatically.
-    */
-   keepItemSize?: boolean;
-   /**
-    * Pass when you want to use a custom container width for calculation
-    */
-   containerWidth?: number;
-
+  maxItemWidth?: number;
+  /**
+   * Number of items to show in a row (ignored when passing maxItemWidth)
+   */
+  numColumns?: number;
+  /**
+   * Spacing between each item
+   */
+  itemSpacing?: number;
+  /**
+   * List padding (used for item size calculation)
+   */
+  listPadding?: number;
+  /**
+   * whether to keep the items initial size when orientation changes,
+   * in which case the apt number of columns will be calculated automatically.
+   */
+  keepItemSize?: boolean;
+  /**
+   * Pass when you want to use a custom container width for calculation
+   */
+  containerWidth?: number;
 }
 
-export type GridListProps<T = any> = GridListBaseProps & FlatListProps<T>
+export type GridListProps<T = any> = GridListBaseProps & FlatListProps<T>;

src/components/gridList/useGridLayout.ts

@@ -14,7 +14,8 @@ const useGridLayout = (props: GridListBaseProps) => {
     maxItemWidth,
     listPadding = 0,
     keepItemSize,
-    containerWidth
+    containerWidth,
+    contentContainerStyle
   } = props;
 
   const {orientation} = useOrientation();
@@ -43,7 +44,11 @@ const useGridLayout = (props: GridListBaseProps) => {
     return {width: itemWidth /* + itemSpacing */, marginRight: itemSpacing, marginBottom: itemSpacing};
   }, [itemWidth, itemSpacing]);
 
-  return {itemContainerStyle, numberOfColumns};
+  const listContentStyle = useMemo(() => {
+    return [{paddingHorizontal: listPadding}, contentContainerStyle];
+  }, [listPadding, contentContainerStyle]);
+
+  return {itemContainerStyle, numberOfColumns, listContentStyle};
 };
 
 export default useGridLayout;

src/components/sortableGridList/index.tsx

@@ -16,9 +16,9 @@ function generateItemsOrder(data: SortableGridListProps['data']) {
 }
 
 function SortableGridList<T = any>(props: SortableGridListProps<T>) {
-  const {renderItem, onOrderChange, contentContainerStyle, ...others} = props;
+  const {renderItem, onOrderChange, ...others} = props;
 
-  const {itemContainerStyle, numberOfColumns} = useGridLayout(props);
+  const {itemContainerStyle, numberOfColumns, listContentStyle} = useGridLayout(props);
   const {numColumns = DEFAULT_NUM_COLUMNS, itemSpacing = DEFAULT_ITEM_SPACINGS, data} = others;
   const itemsOrder = useSharedValue<ItemsOrder>(generateItemsOrder(data));
 
@@ -63,7 +63,7 @@ function SortableGridList<T = any>(props: SortableGridListProps<T>) {
 
   return (
     <GestureHandlerRootView>
-      <ScrollView contentContainerStyle={[styles.listContent, contentContainerStyle]}>
+      <ScrollView contentContainerStyle={[styles.listContent, listContentStyle]}>
         {data?.map((item, index) => _renderItem({item, index} as ListRenderItemInfo<ItemProps<T>>))}
       </ScrollView>
     </GestureHandlerRootView>