fix: navigation

app.config.js

@@ -42,14 +42,14 @@ export default {
     typedRoutes: true,
   },
   updates: {
-    url: "https://u.expo.dev/6002db10-a1bc-4c3a-9332-f42d17dbd6a2"
+    url: 'https://u.expo.dev/6002db10-a1bc-4c3a-9332-f42d17dbd6a2',
   },
   runtimeVersion: {
-    policy: "appVersion"
+    policy: 'appVersion',
   },
   extra: {
     eas: {
-      "projectId": "6002db10-a1bc-4c3a-9332-f42d17dbd6a2"
-    }
-  }
+      projectId: '6002db10-a1bc-4c3a-9332-f42d17dbd6a2',
+    },
+  },
 };

src/app/_layout.tsx

@@ -30,6 +30,15 @@ export default function RootLayout() {
               tabBarIcon: ({ color, focused }) => <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />,
             }}
           />
+          <Tabs.Screen
+            name="settings"
+            options={{
+              title: 'Settings',
+              tabBarIcon: ({ color, focused }) => (
+                <TabBarIcon name={focused ? 'options' : 'options-outline'} color={color} />
+              ),
+            }}
+          />
         </Tabs>
       </ObserverContext.Provider>
     </PaperProvider>

src/app/index.tsx

@@ -1,15 +1,61 @@
-import { Text, View } from 'react-native';
+import React, { useState, useEffect, useContext } from 'react';
+import { ScrollView, Image } from 'react-native';
+import { Card } from 'react-native-paper';
+import { State } from '@/src/types/State';
+import { Status } from '@/src/types/Status';
+import { ObserverContext } from '@/src/app/_layout';
+import { ObserverManager } from '@/src/domain/observers/ObserverManager';
 
-export default function Index() {
+export default function Home() {
+  const observerManager = useContext(ObserverContext) as ObserverManager;
+  const [observablesState, setObservablesState] = useState([]);
+  const imageSelector = (status: Status) => {
+    switch (status) {
+      case Status.SUCCESS:
+        return require('@/src/assets/images/ok_icon_big.png');
+      case Status.CHECKING:
+        return require('@/src/assets/images/running_icon_big.png');
+      case Status.NA:
+        return require('@/src/assets/images/na_icon_big.png');
+      case Status.FAILURE:
+        return require('@/src/assets/images/fail_icon_big.png');
+    }
+  };
+  useEffect(() => {
+    (async () => {
+      await observerManager.refershObservers();
+      setObservablesState((await observerManager.getStates()) as any);
+      const MINUTES_MS = 300000;
+      const interval = setInterval(async () => {
+        setObservablesState((await observerManager.getStates()) as any);
+      }, MINUTES_MS);
+      return () => clearInterval(interval);
+    })();
+  }, []);
   return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <Text>Edit app/index.tsx to edit this screen.</Text>
-    </View>
+    <>
+      <ScrollView>
+        {observablesState.map((state: State, index: number) => (
+          <Card
+            key={`observable_${index}_${state.name}`}
+            style={{
+              marginVertical: 5,
+            }}
+          >
+            <Card.Title
+              title={state.name}
+              subtitle={Status.toString(state.status)}
+              titleStyle={{
+                fontWeight: 'bold',
+                fontSize: 20,
+              }}
+              left={(props) => (
+                <Image style={{ width: 30, height: 30 }} {...props} source={imageSelector(state.status)} />
+              )}
+            />
+          </Card>
+        ))}
+      </ScrollView>
+    </>
   );
 }

src/app/Settings/index.tsx → src/app/settings.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Platform, ScrollView } from 'react-native';
 import { Portal } from 'react-native-paper';
-import { Observers as ObserversComponent } from '../../components/Observers';
-import { mutations } from './helpers/mutations';
+import { Observers as ObserversComponent } from '../components/Observers';
+import { mutations } from './mutations';
 import * as SecureStore from 'expo-secure-store';
-import { ObserverContext } from '../_layout';
+import { ObserverContext } from './_layout';
 import { ObserverManager } from '@/src/domain/observers/ObserverManager';
 
 export default function Settings() {