From ec6782ba68d15706b1d5e3490704aa98c216a3d7 Mon Sep 17 00:00:00 2001
From: Akshay Nair <phenax5@gmail.com>
Date: Sun, 12 May 2024 17:44:31 +0530
Subject: Simple slide UI + apps search

---
 src/screens/AppList.tsx | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/screens/AppList.tsx

(limited to 'src/screens/AppList.tsx')

diff --git a/src/screens/AppList.tsx b/src/screens/AppList.tsx
new file mode 100644
index 0000000..187fbed
--- /dev/null
+++ b/src/screens/AppList.tsx
@@ -0,0 +1,40 @@
+import {matchSorter} from 'match-sorter';
+import React, {useMemo, useState} from 'react';
+import {ScrollView, Text, TextInput, View} from 'react-native';
+import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
+
+export const AppList: React.FC<{apps: AppDetail[]}> = ({apps}) => {
+  const [searchText, setSearchText] = useState('');
+
+  const filteredApps = useMemo(() => {
+    if (searchText === '') return apps;
+
+    return matchSorter(apps, searchText, {keys: ['label', 'packageName']});
+  }, [apps, searchText]);
+
+  return (
+    <View>
+      <View>
+        <TextInput
+          autoFocus
+          autoCorrect={false}
+          value={searchText}
+          onChangeText={setSearchText}
+        />
+      </View>
+
+      <ScrollView contentInsetAdjustmentBehavior="automatic">
+        <View className="flex-1">
+          {filteredApps.map((app, index) => (
+            <View className="mt-4 px-4" key={app.packageName + index}>
+              <Text className="text-md font-bold dark:text-white">
+                {app.label}
+              </Text>
+              <Text className="text-xs">{app.packageName}</Text>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
-- 
cgit v1.3.1