Simple slide UI + apps search

1 files changed, 40 insertions, 0 deletions

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>
+  );
+};