feat: improve IconList layout with responsive columns

website/components/ListItem.js

@@ -5,14 +5,14 @@ import PressableOpacity from "./PressableOpacity";
 
 const ListItem = ({ name, family, onPress }) => {
   return (
-    <PressableOpacity onPress={onPress}>
+    <PressableOpacity onPress={onPress} style={{ flex: 1 }}>
       <View style={styles.container}>
         <View style={{ width: 50, justifyContent: 'center', alignItems: 'center' }}>
           <Icon family={family} name={name} size={30} />
         </View>
         <View style={styles.textView}>
-          <Text style={styles.name}>{name}</Text>
-          <Text style={styles.family}>{family}</Text>
+          <Text numberOfLines={1} style={styles.name}>{name}</Text>
+          <Text numberOfLines={1} style={styles.family}>{family}</Text>
         </View>
       </View>
     </PressableOpacity>
@@ -26,11 +26,14 @@ const styles = StyleSheet.create({
     paddingVertical: 15,
     alignItems: "center",
     borderBottomWidth: 1,
-    borderBottomColor: "#e3e3e3",
+    borderRightWidth: 1,
+    borderColor: "#e3e3e3",
   },
   textView: {
     flexDirection: "column",
     marginLeft: 20,
+    marginRight: 10,
+    flex: 1,
   },
   name: {
     fontSize: 18,

website/screens/List.js

@@ -5,7 +5,13 @@ import React, {
   useImperativeHandle,
   forwardRef,
 } from "react";
-import { StyleSheet, View, FlatList, TextInput } from "react-native";
+import {
+  StyleSheet,
+  View,
+  FlatList,
+  TextInput,
+  useWindowDimensions
+} from "react-native";
 import { useDebouncedCallback } from "use-debounce";
 import { IconsArray } from "../IconConstants";
 import ListItem from "../components/ListItem";
@@ -188,26 +194,55 @@ const IconList = React.memo(({ query, filters, navigation }) => {
 
   const renderItem = React.useCallback(
     ({ item }) => {
-      return <IconRow item={item} navigation={navigation} />;
+      if (!item) {
+        return <View style={styles.emptyItem} />;
+      }
+      return <IconItem item={item} navigation={navigation} />;
     },
     [navigation]
   );
 
+  const { width } = useWindowDimensions();
+
+  const numColumns = React.useMemo(() => {
+    return getNumColumns(width);
+  }, [width]);
+
+  const data = React.useMemo(() => {
+    return padList(icons, numColumns);
+  }, [icons, numColumns]);
+
   return (
     <FlatList
       style={{ flex: 1 }}
-      data={icons}
+      data={data}
       renderItem={renderItem}
       keyExtractor={keyExtractor}
+      numColumns={numColumns}
+      key={numColumns}
     />
   );
 });
 
-function keyExtractor(item) {
-  return `${item.family}-${item.name}`;
+function keyExtractor(item, index) {
+  return item ? `${item.family}-${item.name}` : `empty-${index}`;
 }
 
-const IconRow = React.memo(({ item, navigation }) => {
+function getNumColumns(width, columnWidth = 300) {
+  const numColumns = Math.floor(width / columnWidth);
+  return Math.max(numColumns, 1);
+}
+
+function padList(items = [], itemsPerRow) {
+  if (!Number.isInteger(itemsPerRow) || itemsPerRow <= 0) return items;
+
+  const remainerInLastRow = items.length % itemsPerRow;
+  if (remainerInLastRow === 0) return items;
+
+  return [...items, ...Array(itemsPerRow - remainerInLastRow).fill(null)];
+}
+
+const IconItem = React.memo(({ item, navigation }) => {
   return (
     <ListItem
       family={item.family}
@@ -289,6 +324,9 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     alignSelf: "center",
   },
+  emptyItem: {
+    flex: 1,
+  },
 });
 
 export default List;