Fix/grid list padding issue (#2982)

* Fix issue with nested list and contentContainerStyle in GridList

* Fix GridListItem itemSize typing to support string for percentage

Author: ethanshar

demo/src/screens/componentScreens/GridListScreen.tsx

@@ -1,42 +1,76 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {View, Text, Constants, GridList, Card, Spacings, BorderRadiuses, GridListProps} from 'react-native-ui-lib';
+import {
+  View,
+  Text,
+  Constants,
+  GridList,
+  Card,
+  Spacings,
+  BorderRadiuses,
+  GridListProps,
+  GridListItem
+} from 'react-native-ui-lib';
 import products from '../../data/products';
+import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 class GridListScreen extends Component {
   state = {
-    orientation: Constants.orientation
+    orientation: Constants.orientation,
+    useGridListItem: false
   };
 
-  renderItem: GridListProps<typeof products[0]>['renderItem'] = ({item}) => {
+  renderHeader = () => {
     return (
-      <Card flex>
-        <Card.Section imageSource={{uri: item.mediaUrl}} imageStyle={styles.itemImage}/>
-        <View padding-s2>
-          <Text $textDefault>{item.name}</Text>
-          <Text $textDefault>{item.formattedPrice}</Text>
-          {item.inventory.status === 'Out of Stock' && (
-            <Text text90M $textDangerLight>
-              {item.inventory.status}
-            </Text>
-          )}
-        </View>
-      </Card>
+      <View>
+        <Text h1 marginB-s5>
+          GridList
+        </Text>
+        {renderBooleanOption.call(this, 'UseGridListItem', 'useGridListItem')}
+      </View>
     );
   };
 
+  renderItem: GridListProps<(typeof products)[0]>['renderItem'] = ({item}) => {
+    const {useGridListItem} = this.state;
+
+    if (useGridListItem) {
+      return (
+        <GridListItem
+          // containerStyle={{width: '100%', borderWidth: 1}}
+          itemSize={{width: '100%', height: 200}}
+          imageProps={{source: {uri: item.mediaUrl}}}
+          title="Title"
+          subtitle="Subitle"
+          overlayText
+        />
+      );
+    } else {
+      return (
+        <Card flex>
+          <Card.Section imageSource={{uri: item.mediaUrl}} imageStyle={styles.itemImage}/>
+          <View padding-s2>
+            <Text $textDefault>{item.name}</Text>
+            <Text $textDefault>{item.formattedPrice}</Text>
+            {item.inventory.status === 'Out of Stock' && (
+              <Text text90M $textDangerLight>
+                {item.inventory.status}
+              </Text>
+            )}
+          </View>
+        </Card>
+      );
+    }
+  };
+
   render() {
     return (
-      <GridList<typeof products[0]>
-        ListHeaderComponent={
-          <Text h1 marginB-s5>
-            GridList
-          </Text>
-        }
+      <GridList<(typeof products)[0]>
+        ListHeaderComponent={() => this.renderHeader()}
         data={products}
         renderItem={this.renderItem}
-        // numColumns={2}
-        maxItemWidth={140}
+        numColumns={2}
+        // maxItemWidth={140}
         itemSpacing={Spacings.s3}
         listPadding={Spacings.s5}
         // keepItemSize

src/components/gridList/index.tsx

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

src/components/gridList/types.ts

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

src/components/gridList/useGridLayout.ts

@@ -15,6 +15,7 @@ const useGridLayout = (props: GridListBaseProps) => {
     listPadding = 0,
     keepItemSize,
     containerWidth,
+    style,
     contentContainerStyle
   } = props;
 
@@ -47,8 +48,12 @@ const useGridLayout = (props: GridListBaseProps) => {
   const listContentStyle = useMemo(() => {
     return [{paddingHorizontal: listPadding}, contentContainerStyle];
   }, [listPadding, contentContainerStyle]);
+  
+  const listStyle = useMemo(() => {
+    return [{paddingHorizontal: listPadding}, style];
+  }, [listPadding, style]);
 
-  return {itemContainerStyle, numberOfColumns, listContentStyle};
+  return {itemContainerStyle, numberOfColumns, listStyle, listContentStyle};
 };
 
 export default useGridLayout;

src/components/gridListItem/index.tsx

@@ -277,6 +277,6 @@ const styles = StyleSheet.create({
 export default GridListItem;
 
 interface ImageSize {
-  width?: number;
-  height?: number;
+  width?: number | string;
+  height?: number | string;
 }