Use rowGap and columnGap feature in our GridList and SortableGridList… (#3064)

* Use rowGap and columnGap feature in our GridList and SortableGridList components

* PR review fixes

Author: ethanshar

src/components/gridList/index.tsx

@@ -18,7 +18,7 @@ function GridList<T = any>(props: GridListProps<T>) {
     ...others
   } = props;
 
-  const {itemContainerStyle, numberOfColumns, listStyle} = useGridLayout({
+  const {itemContainerStyle, numberOfColumns, listStyle, listContentStyle, listColumnWrapperStyle} = useGridLayout({
     numColumns,
     itemSpacing,
     maxItemWidth,
@@ -39,10 +39,11 @@ function GridList<T = any>(props: GridListProps<T>) {
     <FlatList
       key={numberOfColumns}
       {...others}
-      /* NOTE: Using style instead of contentContainerStyle because of RN issue with a flatlist nested in another flatlist 
+      /* NOTE: Using style with contentContainerStyle because of RN issue with a flatlist nested in another flatlist 
       losing their contentContainerStyle */
       style={listStyle}
-      // contentContainerStyle={listContentStyle}
+      columnWrapperStyle={listColumnWrapperStyle}
+      contentContainerStyle={listContentStyle}
       renderItem={_renderItem}
       numColumns={numberOfColumns}
     />

src/components/gridList/types.ts

@@ -1,6 +1,6 @@
-import {FlatListProps, ScrollViewProps} from 'react-native';
+import {FlatListProps} from 'react-native';
 
-export interface GridListBaseProps extends Pick<ScrollViewProps, 'style' | 'contentContainerStyle'> {
+export interface GridListBaseProps extends Pick<FlatListProps<any>, 'style' | 'contentContainerStyle' | 'columnWrapperStyle'> {
   /**
    * Allow a responsive item width to the maximum item width
    */

src/components/gridList/useGridLayout.ts

@@ -16,7 +16,8 @@ const useGridLayout = (props: GridListBaseProps) => {
     keepItemSize,
     containerWidth,
     style,
-    contentContainerStyle
+    contentContainerStyle,
+    columnWrapperStyle
   } = props;
 
   const {orientation} = useOrientation();
@@ -42,18 +43,22 @@ const useGridLayout = (props: GridListBaseProps) => {
   }, [numberOfColumns, itemSpacing, keepItemSize ? undefined : _containerWidth]);
 
   const itemContainerStyle = useMemo(() => {
-    return {width: itemWidth /* + itemSpacing */, marginRight: itemSpacing, marginBottom: itemSpacing};
-  }, [itemWidth, itemSpacing]);
+    return {width: itemWidth /* , marginRight: itemSpacing, marginBottom: itemSpacing */};
+  }, [itemWidth]);
 
   const listContentStyle = useMemo(() => {
-    return [{paddingHorizontal: listPadding}, contentContainerStyle];
-  }, [listPadding, contentContainerStyle]);
-  
+    return [{/* paddingHorizontal: listPadding, */ rowGap: itemSpacing}, contentContainerStyle];
+  }, [itemSpacing, contentContainerStyle]);
+
   const listStyle = useMemo(() => {
-    return [{paddingHorizontal: listPadding}, style];
-  }, [listPadding, style]);
+    return [{paddingHorizontal: listPadding, rowGap: itemSpacing}, style];
+  }, [listPadding, itemSpacing, style]);
+
+  const listColumnWrapperStyle = useMemo(() => {
+    return [{columnGap: itemSpacing}, columnWrapperStyle];
+  }, [itemSpacing, columnWrapperStyle]);
 
-  return {itemContainerStyle, numberOfColumns, listStyle, listContentStyle};
+  return {itemContainerStyle, numberOfColumns, listStyle, listContentStyle, listColumnWrapperStyle};
 };
 
 export default useGridLayout;

src/components/sortableGridList/index.tsx

@@ -19,7 +19,8 @@ function generateItemsOrder(data: SortableGridListProps['data']) {
 function SortableGridList<T = any>(props: SortableGridListProps<T>) {
   const {renderItem, onOrderChange, flexMigration, ...others} = props;
 
-  const {itemContainerStyle, numberOfColumns, listContentStyle} = useGridLayout(props);
+  const {itemContainerStyle, numberOfColumns, listStyle, listContentStyle, listColumnWrapperStyle} =
+    useGridLayout(props);
   const {itemSpacing = DEFAULT_ITEM_SPACINGS, data} = others;
   const itemsOrder = useSharedValue<ItemsOrder>(generateItemsOrder(data));
 
@@ -50,14 +51,12 @@ function SortableGridList<T = any>(props: SortableGridListProps<T>) {
   }, [onOrderChange, data]);
 
   const _renderItem = useCallback(({item, index}: ListRenderItemInfo<ItemProps<T>>) => {
-    const lastItemInRow = (index + 1) % numberOfColumns === 0;
-
     return (
       <SortableItem
         key={item.id}
         data={data}
         {...presenter}
-        style={[itemContainerStyle, lastItemInRow && {marginRight: 0}]}
+        style={itemContainerStyle}
         itemsOrder={itemsOrder}
         id={item.id}
         onChange={onChange}
@@ -67,11 +66,14 @@ function SortableGridList<T = any>(props: SortableGridListProps<T>) {
       </SortableItem>
     );
   },
-  [data]);
+  [data, itemContainerStyle, onChange, renderItem]);
 
   return (
     <GestureHandlerRootView style={flexMigration ? styles.container : undefined}>
-      <ScrollView contentContainerStyle={[styles.listContent, listContentStyle]}>
+      <ScrollView
+        style={listStyle}
+        contentContainerStyle={[styles.listContent, listContentStyle, listColumnWrapperStyle]}
+      >
         {_.map(data, (item, index) => _renderItem({item, index} as ListRenderItemInfo<ItemProps<T>>))}
       </ScrollView>
     </GestureHandlerRootView>