Refactor app view screens

2 files changed, 21 insertions, 11 deletions

diff --git a/App.tsx b/App.tsx
index 08886a0..9bdcdcc 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,22 +1,16 @@
-import React, {Suspense, useEffect} from 'react';
-import {BackHandler, SafeAreaView, View} from 'react-native';
+import React, {Suspense} from 'react';
+import {SafeAreaView, View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {AppView} from './src/AppView';
 import {Provider as JotaiProvider} from 'jotai';
 
 const App: React.FC = () => {
-  // Disable back button
-  useEffect(() => {
-    const sub = BackHandler.addEventListener('hardwareBackPress', () => true);
-    return () => sub.remove();
-  }, []);
-
   return (
     <Suspense fallback={<View className="flex flex-1 bg-black" />}>
       <JotaiProvider>
         <GestureHandlerRootView>
           <SafeAreaView className="flex flex-1 bg-black text-slate-200">
-            <AppView />
+            <AppView key="view" />
           </SafeAreaView>
         </GestureHandlerRootView>
       </JotaiProvider>
diff --git a/src/AppView.tsx b/src/AppView.tsx
index cca64f6..2f8e0b2 100644
--- a/src/AppView.tsx
+++ b/src/AppView.tsx
@@ -3,15 +3,30 @@ import Swiper from 'react-native-swiper';
 import {AppList} from './screens/AppList';
 import {Home} from './screens/Home';
 import {useInstalledApps} from './hooks/useInstalledApps';
+import {BackHandler} from 'react-native';
+
+const screens = [
+  {id: 'home', component: Home},
+  {id: 'appList', component: AppList},
+];
 
 export const AppView: React.FC = React.memo(() => {
   const {refreshApps} = useInstalledApps();
   const [screenIndex, setScreenIndex] = useState(0);
 
+  // Refresh app list when switching between screens
   useEffect(() => {
     refreshApps();
   }, [screenIndex, refreshApps]);
 
+  // Disable back button
+  useEffect(() => {
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      return true;
+    });
+    return () => sub.remove();
+  }, []);
+
   return (
     <Swiper
       horizontal
@@ -20,8 +35,9 @@ export const AppView: React.FC = React.memo(() => {
       dot={<></>}
       activeDot={<></>}
       onIndexChanged={setScreenIndex}>
-      <Home active={screenIndex === 0} />
-      <AppList active={screenIndex === 1} />
+      {screens.map(({id, component: Screen}, i) => (
+        <Screen key={id} active={screenIndex === i} />
+      ))}
     </Swiper>
   );
 });