refactor: Finally fix the vault scroll performance (#1741)

native/app/inventory/UiRowRenderItem.tsx

@@ -2,11 +2,11 @@ import { UISection, type UISections } from "@/app/inventory/logic/Helpers.ts";
 import EngramsUI from "@/app/inventory/sections/EngramsUI.tsx";
 import CharacterEquipmentUI from "@/app/inventory/sections/CharacterEquipmentUI.tsx";
 import SeparatorUI from "@/app/inventory/sections/SeparatorUI.tsx";
-import Vault5x5UI from "@/app/inventory/sections/Vault5x5UI.tsx";
 import VaultFlexUI from "@/app/inventory/sections/VaultFlexUI.tsx";
 import LostItemsUI from "@/app/inventory/sections/LostItemsUI.tsx";
 import ArtifactUI from "@/app/inventory/sections/ArtifactUI.tsx";
 import VaultSpacerUI from "@/app/inventory/sections/VaultSpacerUI.tsx";
+import LootItemRow from "@/app/inventory/sections/LootItemRow.tsx";
 
 type Props = {
   readonly item: UISections;
@@ -18,8 +18,6 @@ export const UiCellRenderItem = ({ item }: Props) => {
       return <SeparatorUI label={item.label} info={item.info} />;
     case UISection.CharacterEquipment:
       return <CharacterEquipmentUI equipSection={item} />;
-    case UISection.Vault5x5:
-      return <Vault5x5UI iconData={item.inventory} />;
     case UISection.VaultFlex:
       return <VaultFlexUI iconData={item.inventory} minimumSpacerHeight={item.minimumSpacerHeight} />;
     case UISection.Engrams:
@@ -30,5 +28,7 @@ export const UiCellRenderItem = ({ item }: Props) => {
       return <ArtifactUI iconData={item.equipped} />;
     case UISection.VaultSpacer:
       return <VaultSpacerUI size={item.size} />;
+    case UISection.LootIconRow:
+      return <LootItemRow iconData={item.inventory} />;
   }
 };

native/app/inventory/cells/DestinyCell.tsx

@@ -10,7 +10,7 @@ type Props = {
   readonly iconData: DestinyIconData;
 };
 
-const DestinyCell = ({ iconData }: Props) => {
+export default function DestinyCell({ iconData }: Props) {
   "use memo";
 
   const navigation = useNavigation();
@@ -73,6 +73,4 @@ const DestinyCell = ({ iconData }: Props) => {
       </View>
     </TouchableOpacity>
   );
-};
-
-export default DestinyCell;
+}

native/app/inventory/cells/DestinyCell2.tsx

@@ -0,0 +1,92 @@
+import { useNavigation } from "@react-navigation/native";
+import { Text, View, TouchableOpacity, StyleSheet } from "react-native";
+import { Image } from "expo-image";
+
+import { DestinyIconStyles, ICON_SIZE } from "@/app/utilities/UISize.ts";
+import { CRAFTED_OVERLAY } from "@/app/inventory/logic/Constants.ts";
+import type { DestinyIconData } from "@/app/inventory/logic/Types.ts";
+import EmptyCell from "@/app/inventory/cells/EmptyCell.tsx";
+
+type Props = {
+  readonly iconData: DestinyIconData | undefined;
+};
+
+export default function DestinyCell2({ iconData }: Props) {
+  "use memo";
+
+  if (iconData === undefined) {
+    return (
+      <View style={styles.container}>
+        <EmptyCell />
+      </View>
+    );
+  }
+
+  const navigation = useNavigation();
+  const handlePress = () => {
+    navigation.navigate("Details", {
+      characterId: iconData.characterId,
+      itemHash: iconData.itemHash,
+      itemInstanceId: iconData.itemInstanceId,
+      bucketHash: iconData.bucketHash,
+    });
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <View style={DestinyIconStyles.container}>
+        <View style={[DestinyIconStyles.icon, { borderColor: iconData.borderColor }]}>
+          <Image
+            source={{ uri: iconData.icon }}
+            cachePolicy="memory-disk"
+            style={DestinyIconStyles.innerFrameSize}
+            recyclingKey={iconData.icon}
+          />
+
+          <Image
+            source={{ uri: iconData.calculatedWaterMark }}
+            cachePolicy="memory-disk"
+            style={DestinyIconStyles.innerFrameSize}
+            recyclingKey={iconData.calculatedWaterMark}
+          />
+
+          {iconData.crafted && (
+            <Image source={CRAFTED_OVERLAY} cachePolicy="memory" style={DestinyIconStyles.innerFrameSize} />
+          )}
+        </View>
+        {iconData.primaryStat > 0 && (
+          <View style={DestinyIconStyles.primaryStat}>
+            <Text style={DestinyIconStyles.primaryStatText}>{iconData.primaryStat}</Text>
+          </View>
+        )}
+        {iconData.damageTypeIconUri && (
+          <View style={DestinyIconStyles.miniIconBurn}>
+            <Image
+              style={DestinyIconStyles.miniIconBurnSize}
+              source={iconData.damageTypeIconUri}
+              cachePolicy="memory"
+            />
+          </View>
+        )}
+        {iconData.quantity > 1 && (
+          <View style={iconData.stackSizeMaxed ? DestinyIconStyles.quantityMaxed : DestinyIconStyles.quantity}>
+            <Text
+              style={
+                iconData.stackSizeMaxed ? DestinyIconStyles.quantityLevelTextMaxed : DestinyIconStyles.quantityLevelText
+              }
+            >
+              {iconData.quantity}
+            </Text>
+          </View>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+  },
+});

native/app/inventory/logic/Helpers.ts

@@ -110,12 +110,12 @@ export enum UiRowType {
 export enum UISection {
   Separator = 0,
   CharacterEquipment = 1,
-  Vault5x5 = 2,
-  VaultFlex = 3,
-  Engrams = 4,
-  LostItems = 5,
-  Artifact = 6,
-  VaultSpacer = 7,
+  VaultFlex = 2,
+  Engrams = 3,
+  LostItems = 4,
+  Artifact = 5,
+  VaultSpacer = 6,
+  LootIconRow = 7,
 }
 
 export type BaseSection = {
@@ -140,17 +140,17 @@ export type EquipSection = BaseSection & {
   inventory: DestinyIconData[];
 };
 
-export type Vault5x5Section = BaseSection & {
-  type: UISection.Vault5x5;
-  inventory: DestinyIconData[];
-};
-
 export type VaultFlexSection = BaseSection & {
   type: UISection.VaultFlex;
   inventory: DestinyIconData[];
   minimumSpacerHeight?: number;
 };
 
+export type LootIconSection = BaseSection & {
+  type: UISection.LootIconRow;
+  inventory: DestinyIconData[];
+};
+
 export type LostItemsSection = BaseSection & {
   type: UISection.LostItems;
   inventory: DestinyIconData[];
@@ -169,12 +169,12 @@ export type VaultSpacerSection = BaseSection & {
 export type UISections =
   | SeparatorSection
   | EquipSection
-  | Vault5x5Section
   | VaultFlexSection
   | EngramsSection
   | LostItemsSection
   | ArtifactSection
-  | VaultSpacerSection;
+  | VaultSpacerSection
+  | LootIconSection;
 
 export type DestinyItemIdentifier = {
   characterId: CharacterId;

native/app/inventory/sections/LootItemRow.tsx

@@ -0,0 +1,34 @@
+import { View } from "react-native";
+
+import { DEFAULT_MARGIN, ICON_MARGIN, ICON_SIZE, INV_MAX_WIDTH } from "@/app/utilities/UISize.ts";
+import type { DestinyIconData } from "@/app/inventory/logic/Types.ts";
+import DestinyCell2 from "@/app/inventory/cells/DestinyCell2.tsx";
+
+type Props = {
+  readonly iconData: DestinyIconData[];
+};
+
+export default function LootItemRow({ iconData }: Props) {
+  "use memo";
+  return (
+    <View
+      style={{
+        height: ICON_SIZE + ICON_MARGIN,
+        width: ICON_SIZE * 5 + ICON_MARGIN * 4,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignContent: "space-between",
+        alignItems: "center",
+        marginLeft: DEFAULT_MARGIN,
+        marginRight: DEFAULT_MARGIN,
+        maxWidth: INV_MAX_WIDTH,
+      }}
+    >
+      <DestinyCell2 iconData={iconData[0]} />
+      <DestinyCell2 iconData={iconData[1]} />
+      <DestinyCell2 iconData={iconData[2]} />
+      <DestinyCell2 iconData={iconData[3]} />
+      <DestinyCell2 iconData={iconData[4]} />
+    </View>
+  );
+}