LightningInfo: Use FlashList instead of ScrollView

src/windows/LightningInfo/LightningInfo.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useLayoutEffect } from "react";
-import { StyleSheet, View, ScrollView } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { Icon, H1, Fab, Spinner } from "native-base";
 import Long from "long";
 import { StackNavigationProp } from "@react-navigation/stack";
+import { FlashList } from "@shopify/flash-list";
 
 import { LightningInfoStackParamList } from "./index";
 import { useStoreState, useStoreActions } from "../../state/store";
@@ -27,14 +28,16 @@ export default function LightningInfo({ navigation }: ILightningInfoProps) {
   const channels = useStoreState((store) => store.channel.channels);
   const pendingOpenChannels = useStoreState((store) => store.channel.pendingOpenChannels);
   const pendingClosingChannels = useStoreState((store) => store.channel.pendingClosingChannels);
-  const pendingForceClosingChannels = useStoreState((store) => store.channel.pendingForceClosingChannels);
+  const pendingForceClosingChannels = useStoreState(
+    (store) => store.channel.pendingForceClosingChannels,
+  );
   const waitingCloseChannels = useStoreState((store) => store.channel.waitingCloseChannels);
   const getChannels = useStoreActions((store) => store.channel.getChannels);
   const bitcoinUnit = useStoreState((store) => store.settings.bitcoinUnit);
   const fiatUnit = useStoreState((store) => store.settings.fiatUnit);
   const currentRate = useStoreState((store) => store.fiat.currentRate);
   const preferFiat = useStoreState((store) => store.settings.preferFiat);
-  const changePreferFiat  = useStoreActions((store) => store.settings.changePreferFiat);
+  const changePreferFiat = useStoreActions((store) => store.settings.changePreferFiat);
 
   async function getChans() {
     (async () => {
@@ -55,15 +58,15 @@ export default function LightningInfo({ navigation }: ILightningInfoProps) {
   useLayoutEffect(() => {
     navigation.setOptions({
       headerTitle: t("layout.title"),
-      headerBackTitle: t("buttons.back",{ns:namespaces.common}),
+      headerBackTitle: t("buttons.back", { ns: namespaces.common }),
       headerShown: true,
       headerRight: () => {
         return (
           <NavigationButton onPress={getChans}>
             <Icon type="MaterialIcons" name="sync" style={{ fontSize: 22 }} />
           </NavigationButton>
-        )
-      }
+        );
+      },
     });
   }, [navigation]);
 
@@ -75,80 +78,105 @@ export default function LightningInfo({ navigation }: ILightningInfoProps) {
     // return accumulator.add(channel.localBalance!.sub(channel.localChanReserveSat!));
   }, Long.fromInt(0));
 
-  const channelCards = [
-    ...pendingOpenChannels.map((pendingChannel, i) => (
-      <PendingChannelCard
-        key={((pendingChannel?.channel?.channelPoint) ?? "") + i}
-        alias={aliases[pendingChannel.channel!.remoteNodePub!]}
-        type="OPEN"
-        channel={pendingChannel}
-      />
-    )),
-    ...pendingClosingChannels.map((pendingChannel, i) => (
-      <PendingChannelCard
-        key={pendingChannel.closingTxid! + i}
-        alias={aliases[pendingChannel.channel!.remoteNodePub!]}
-        type="CLOSING"
-        channel={pendingChannel}
-      />
-    )),
-    ...pendingForceClosingChannels.map((pendingChannel, i) => (
-      <PendingChannelCard
-        key={pendingChannel.closingTxid! + i}
-        alias={aliases[pendingChannel.channel!.remoteNodePub!]}
-        type="FORCE_CLOSING"
-        channel={pendingChannel}
-      />
-    )),
-    ...waitingCloseChannels.map((pendingChannel, i) => (
-      <PendingChannelCard
-        key={((pendingChannel?.channel?.channelPoint) ?? "") + i}
-        alias={aliases[pendingChannel.channel?.remoteNodePub ?? ""]}
-        type="WAITING_CLOSE"
-        channel={pendingChannel}
-      />
-    )),
-    ...channels.map((channel, i) => (
-      <ChannelCard key={channel.chanId!.toString()} alias={aliases[channel.remotePubkey ?? ""]} channel={channel} />
-    )),
+  const channelsArr = [
+    ...pendingOpenChannels.map((pendingChannel, i) => ({ ...pendingChannel, type: "pendingOpen" })),
+    ...pendingClosingChannels.map((pendingChannel, i) => ({
+      ...pendingChannel,
+      type: "pendingClose",
+    })),
+    ...pendingForceClosingChannels.map((pendingChannel, i) => ({
+      ...pendingChannel,
+      type: "pendingForceClose",
+    })),
+    ...waitingCloseChannels.map((pendingChannel, i) => ({
+      ...pendingChannel,
+      type: "waitingForClose",
+    })),
+    ...channels.map((channel, i) => ({ ...channel, type: "open" })),
   ];
 
   const onPressBalance = async () => {
     await changePreferFiat(!preferFiat);
-  }
+  };
 
   return (
     <Container>
-      {rpcReady &&
-        <ScrollView contentContainerStyle={style.container}>
-          <View style={style.balanceInfo}>
-            <H1 style={[style.spendableAmount]}>
-              {t("balance.title")}
-            </H1>
-            <H1 onPress={onPressBalance}>
-              {preferFiat
-                ? (valueFiat(balance, currentRate).toFixed(2) + " " + fiatUnit)
-                : formatBitcoin(balance, bitcoinUnit)
-              }
-            </H1>
-          </View>
-          <View>{channelCards}</View>
-        </ScrollView>
-      }
-      {!rpcReady &&
+      {rpcReady && (
+        <FlashList
+          estimatedItemSize={334}
+          ListHeaderComponent={
+            <View style={style.balanceInfo}>
+              <H1 style={[style.spendableAmount]}>{t("balance.title")}</H1>
+              <H1 onPress={onPressBalance}>
+                {preferFiat
+                  ? valueFiat(balance, currentRate).toFixed(2) + " " + fiatUnit
+                  : formatBitcoin(balance, bitcoinUnit)}
+              </H1>
+            </View>
+          }
+          data={channelsArr}
+          renderItem={(info) => {
+            if (info.item.type === "pendingOpen") {
+              return (
+                <PendingChannelCard
+                  // key={((pendingChannel?.channel?.channelPoint) ?? "") + i}
+                  alias={aliases[info.item?.channel!.remoteNodePub!]}
+                  type="OPEN"
+                  channel={info.item}
+                />
+              );
+            } else if (info.item.type === "pendingClose") {
+              return (
+                <PendingChannelCard
+                  // key={pendingChannel.closingTxid! + i}
+                  alias={aliases[info.item?.channel!.remoteNodePub!]}
+                  type="CLOSING"
+                  channel={info.item}
+                />
+              );
+            } else if (info.item.type === "pendingForceClose") {
+              return (
+                <PendingChannelCard
+                  // key={pendingChannel.closingTxid! + i}
+                  alias={aliases[info.item?.channel!.remoteNodePub!]}
+                  type="FORCE_CLOSING"
+                  channel={info.item}
+                />
+              );
+            } else if (info.item.type === "waitingForClose") {
+              return (
+                <PendingChannelCard
+                  // key={((pendingChannel?.channel?.channelPoint) ?? "") + i}
+                  alias={aliases[info.item.channel?.remoteNodePub ?? ""]}
+                  type="WAITING_CLOSE"
+                  channel={info.item}
+                />
+              );
+            } else if (info.item.type === "open") {
+              return (
+                <ChannelCard alias={aliases[info.item.remotePubkey ?? ""]} channel={info.item} />
+              );
+            }
+            return <></>;
+          }}
+          contentContainerStyle={style.container}
+        />
+      )}
+      {!rpcReady && (
         <View style={style.loadingContainer}>
           <Spinner color={blixtTheme.light} />
         </View>
-      }
+      )}
       <Fab
         style={style.fab}
         position="bottomRight"
-        onPress={() => navigation.navigate("OpenChannel", {})}>
+        onPress={() => navigation.navigate("OpenChannel", {})}
+      >
         <Icon type="Entypo" name="plus" style={style.fabNewChannelIcon} />
       </Fab>
     </Container>
   );
-};
+}
 
 const style = StyleSheet.create({
   container: {