fix(gallery-native): removed padding and memoized item renderer function

Author: MxKevinBeqo

packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx

@@ -1,4 +1,4 @@
-import { createElement, ReactElement, ReactNode } from "react";
+import { createElement, ReactElement, ReactNode, useCallback } from "react";
 import { Text, FlatList, Pressable, View, ViewProps, Platform, TouchableOpacity } from "react-native";
 import { ObjectItem, DynamicValue } from "mendix";
 import DeviceInfo from "react-native-device-info";
@@ -32,38 +32,52 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
     const numColumns = DeviceInfo.isTablet() ? props.tabletColumns : props.phoneColumns;
     const firstItemId = props.items?.[0]?.id;
     const lastItemId = props.items?.[props.items.length - 1]?.id;
+    const { name, style, itemRenderer } = props;
 
     const onEndReached = (): void => {
         if (props.pagination === "virtualScrolling" && props.hasMoreItems) {
             props.loadMoreItems();
         }
     };
 
-    const renderItem = (item: { item: T }): ReactElement =>
-        props.itemRenderer((children, onPress) => {
-            const listItemWrapperProps: ViewProps = {
-                style: isScrollDirectionVertical && { width: `${100 / numColumns}%` },
-                testID: `${props.name}-list-item-${item.item.id}`
-            };
-            const renderListItemContent = (
-                <View
-                    style={[
-                        props.style.listItem,
-                        firstItemId === item.item.id && props.style.firstItem,
-                        lastItemId === item.item.id && props.style.lastItem
-                    ]}
-                >
-                    {children}
-                </View>
-            );
-            return onPress ? (
-                <Pressable {...listItemWrapperProps} onPress={onPress}>
-                    {renderListItemContent}
-                </Pressable>
-            ) : (
-                <View {...listItemWrapperProps}>{renderListItemContent}</View>
-            );
-        }, item.item);
+    const renderItem = useCallback(
+        (item: { item: T }): ReactElement =>
+            itemRenderer((children, onPress) => {
+                const listItemWrapperProps: ViewProps = {
+                    style: isScrollDirectionVertical && { width: `${100 / numColumns}%` },
+                    testID: `${name}-list-item-${item.item.id}`
+                };
+                const renderListItemContent = (
+                    <View
+                        style={[
+                            style.listItem,
+                            firstItemId === item.item.id && style.firstItem,
+                            lastItemId === item.item.id && style.lastItem
+                        ]}
+                    >
+                        {children}
+                    </View>
+                );
+                return onPress ? (
+                    <Pressable {...listItemWrapperProps} onPress={onPress}>
+                        {renderListItemContent}
+                    </Pressable>
+                ) : (
+                    <View {...listItemWrapperProps}>{renderListItemContent}</View>
+                );
+            }, item.item),
+        [
+            isScrollDirectionVertical,
+            numColumns,
+            itemRenderer,
+            name,
+            style.listItem,
+            style.firstItem,
+            style.lastItem,
+            firstItemId,
+            lastItemId
+        ]
+    );
 
     const loadMoreButton = (): ReactElement | null => {
         const renderButton = (
@@ -80,7 +94,7 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
         );
 
         const buttonProps = {
-            testID: `${props.name}-pagination-button`,
+            testID: `${name}-pagination-button`,
             onPress: () => props.hasMoreItems && props.loadMoreItems && props.loadMoreItems(),
             style: loadMoreButtonContainerStyle
         };
@@ -111,7 +125,7 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
     );
 
     return (
-        <View testID={`${props.name}`} style={props.style.container}>
+        <View testID={`${name}`} style={props.style.container}>
             {props.filters ? <View>{props.filters}</View> : null}
             <FlatList
                 {...(isScrollDirectionVertical && props.pullDown ? { onRefresh: props.pullDown } : {})}
@@ -121,7 +135,6 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
                     ...props.style.loadMoreButtonContainer,
                     ...(isScrollDirectionVertical ? { marginTop: 8 } : { marginStart: 8 })
                 }}
-                contentContainerStyle={props.pagination === "virtualScrolling" && props.style.listContainer}
                 refreshing={props.pullDownIsExecuting}
                 data={props.items}
                 horizontal={!isScrollDirectionVertical}
@@ -132,7 +145,7 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
                 scrollEventThrottle={50}
                 renderItem={renderItem}
                 style={props.style.list}
-                testID={`${props.name}-list`}
+                testID={`${name}-list`}
             />
         </View>
     );

packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap

@@ -13,7 +13,6 @@ exports[`Gallery rendering rendering with load more button it shouldn't render t
         "marginTop": 8,
       }
     }
-    contentContainerStyle={false}
     data={
       [
         {
@@ -342,7 +341,6 @@ exports[`Gallery rendering rendering with load more button renders correctly 1`]
         "marginTop": 8,
       }
     }
-    contentContainerStyle={false}
     data={
       [
         {
@@ -717,7 +715,6 @@ exports[`Gallery rendering rendering with load more button renders correctly wit
         "marginTop": 8,
       }
     }
-    contentContainerStyle={false}
     data={
       [
         {

packages/pluggableWidgets/gallery-native/src/ui/Styles.ts

@@ -14,7 +14,6 @@ export interface GalleryStyle {
     emptyPlaceholder?: ViewStyle;
     firstItem?: ViewStyle;
     lastItem?: ViewStyle;
-    listContainer?: ViewStyle;
     list?: ViewStyle;
     listItem?: ViewStyle;
     loadMoreButtonContainer?: ViewStyle;
@@ -47,8 +46,5 @@ export const defaultGalleryStyle: GalleryStyle = {
         fontSize: 12,
         fontWeight: "bold",
         lineHeight: 14
-    },
-    listContainer: {
-        paddingBottom: 250
     }
 };