un temp screen

Route.tsx

@@ -25,6 +25,7 @@ import MasterRankingScreen from './src/screens/InAppScreens/TravellersScreen/Mas
 import LPIRanking from './src/screens/InAppScreens/TravellersScreen/LPIRankingScreen';
 import InMemoriamScreen from './src/screens/InAppScreens/TravellersScreen/InMemoriamScreen';
 import InHistoryScreen from './src/screens/InAppScreens/TravellersScreen/InHistoryScreen';
+import UNMastersScreen from './src/screens/InAppScreens/TravellersScreen/UNMasters';
 
 import { NAVIGATION_PAGES } from './src/types';
 import { storage, StoreType } from './src/storage';
@@ -130,6 +131,10 @@ const Route = () => {
                     name={NAVIGATION_PAGES.IN_HISTORY}
                     component={InHistoryScreen}
                   />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.UN_MASTERS}
+                    component={UNMastersScreen}
+                  />
                 </ScreenStack.Navigator>
               )}
             </BottomTab.Screen>

src/database/unMastersService/index.ts

@@ -151,13 +151,13 @@ function getMasterById(id: number) {
 }
 
 export function getUNMastersTypes() {
-  const types = loadData('types');
+  const types = loadData<TypeData[]>('types');
   if (!types) return null;
 
   return types;
 }
 
-interface Master {
+export interface Master {
   id: number;
   type: number;
   origin: string;
@@ -193,7 +193,7 @@ interface Master {
   interviews: string[];
 }
 
-interface TypeData {
+export interface TypeData {
   name: string;
   start: number;
   type: number;
@@ -203,6 +203,6 @@ interface SortData {
   [key: string]: number[];
 }
 
-interface MastersData {
+export interface MastersData {
   [key: string]: Master[];
 }

src/screens/InAppScreens/TravellersScreen/UNMasters/index.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+import { FlatList, View, Text } from 'react-native';
+
+import HorizontalSelect from '../Components/HorizontalSelect';
+
+import { Header, PageWrapper } from '../../../../components';
+import { getMastersByType, Master, TypeData } from '../../../../database/unMastersService';
+
+const UNMastersScreen = () => {
+  const [selectedType, setSelectedType] = useState<TypeData | null>(null);
+  const [masters, setMasters] = useState<Master[] | null>([]);
+
+  useEffect(() => {
+    const data = getMastersByType(selectedType?.type || 1);
+
+    setMasters(data);
+  }, [selectedType]);
+
+  return (
+    <PageWrapper>
+      <Header label={'UN Masters'} />
+      <HorizontalSelect selectedType={(type) => setSelectedType(type)} />
+      <FlatList
+        maxToRenderPerBatch={20}
+        data={masters}
+        renderItem={({ item }) => (
+          <View style={{ borderStyle: 'solid', borderWidth: 1, borderColor: 'red' }}>
+            <Text>{item.age}</Text>
+          </View>
+        )}
+      />
+    </PageWrapper>
+  );
+};
+
+export default UNMastersScreen;

src/screens/InAppScreens/TravellersScreen/index.tsx

@@ -26,7 +26,10 @@ const buttons: MenuButtonType[] = [
   },
   {
     label: 'UN Masters',
-    icon: <CrownIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+    icon: <CrownIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
+    buttonFn: (navigation) => {
+      navigation.navigate(NAVIGATION_PAGES.UN_MASTERS);
+    }
   },
   {
     label: 'LPI Ranking',

src/types/navigation.ts

@@ -14,6 +14,7 @@ export enum NAVIGATION_PAGES {
   LPI_RANKING = 'inAppLpiRanking',
   IN_MEMORIAM = 'inAppInMemoriam',
   IN_HISTORY = 'inAppInHistory',
+  UN_MASTERS = 'inAppUNMaster',
   IN_APP_PROFILE = 'Profile',
   PROFILE_TAB = 'inAppProfile',
   EDIT_PERSONAL_INFO = 'editPersonalInfo',