Simple slide UI + apps search

2 files changed, 59 insertions, 108 deletions

diff --git a/App.tsx b/App.tsx
index 125fe1b..a0eda25 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,118 +1,29 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-import React from 'react';
-import type {PropsWithChildren} from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-function Section({children, title}: SectionProps): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-}
+import React, {useState} from 'react';
+import {SafeAreaView, Text, View} from 'react-native';
+import {InstalledApps} from 'react-native-launcher-kit';
+import Swiper from 'react-native-swiper';
+import {AppList} from './src/screens/AppList';
 
 function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
+  const [apps, _setApps] = useState(() => InstalledApps.getSortedApps());
 
   return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
+    <SafeAreaView className="flex flex-1 bg-slate-100 dark:bg-black">
+      <Swiper
+        autoplay={false}
+        horizontal
+        loop={false}
+        loadMinimal
+        dot={<></>}
+        activeDot={<></>}>
+        <View>
+          <Text>Wow</Text>
         </View>
-      </ScrollView>
+
+        <AppList apps={apps} />
+      </Swiper>
     </SafeAreaView>
   );
 }
 
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
-
 export default App;
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>
+  );
+};