init loacation page

app/(tabs)/_layout.tsx

@@ -24,9 +24,9 @@ export default function TabLayout() {
       <Tabs.Screen name="index" options={{ title: 'Home',tabBarIcon: ({ color, focused }) => (
             <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
           ), }} />
-      <Tabs.Screen name="location" options={{ title: 'Location' ,tabBarButton: ()=> null,tabBarIcon: ({ color, focused }) => (
+      {/* <Tabs.Screen name="location" options={{ title: 'Location' ,tabBarButton: ()=> null,tabBarIcon: ({ color, focused }) => (
             <Ionicons name={focused ? 'location-sharp' : 'location-outline'} color={color} size={24} />
-          ),}} />
+          ),}} /> */}
       <Tabs.Screen name="formScreen" options={{title: 'Create/Edit'  ,tabBarIcon: ({ color, focused }) => (
             <Ionicons name={focused ? 'add-circle-sharp' : 'add-circle-outline'} color={color} size={24} />
           ),}} />

app/(tabs)/index.tsx

@@ -19,7 +19,7 @@ const theme = useTheme();
               <Text variant="bodyMedium">{item.description}</Text>
             </Card.Content>
             <Card.Actions>
-            <Link href="/location/{item.id}" asChild>
+            <Link href={`/location/${item.id}`} asChild>
               <Button>Zobacz więcej</Button>
               </Link>
             </Card.Actions>

app/(tabs)/location.tsx

@@ -1,21 +0,0 @@
-import { Text, View, StyleSheet } from 'react-native';
-
-export default function Location() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Location View</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#25292e',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    color: '#fff',
-  },
-});

app/(tabs)/location/[id].js

@@ -0,0 +1,63 @@
+import { View, ScrollView, StyleSheet } from 'react-native';
+import { Text, Card } from 'react-native-paper';
+import { useLocalSearchParams } from 'expo-router';
+import { Locations } from '@/constants/Locations';
+
+export default function Location() {
+  const { id } = useLocalSearchParams();
+  const location = Locations.find(loc => loc.id == id);
+
+  if (!location) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>Brak lokalizaji - {id}</Text>
+      </View>
+    );
+  }
+  return (
+    <View style={styles.container}>
+    <ScrollView>
+      <Card>
+        <Card.Cover style={{marginBottom: 10}} source={{ uri: location.image }} />
+        <Card.Content  style={{marginBottom: 10}}>
+          <Text variant="headlineLarge" style={{marginBottom: 10}}>
+            Opis
+          </Text>
+          <Text variant="bodyMedium">
+            {location.longDescription}
+          </Text>
+        </Card.Content>
+
+        <Card.Content>
+          <Text variant="headlineLarge" style={{marginBottom: 10}}>
+            Statystyki
+          </Text>
+          <Text variant="bodyMedium" style={{marginBottom: 10}}>
+            Powierzchnia: {location.area} km²
+            </Text>
+          <Text variant="bodyMedium" style={{marginBottom: 10}}>
+            Ludność: {location.population} osób
+            </Text>
+          <Text variant="bodyMedium" style={{marginBottom: 10}}>
+            Gęstość zaludnienia: {location.density} osób/km²
+            </Text>
+          <Text variant="bodyMedium" style={{marginBottom: 10}}>
+            Wysokość nad poziomem morza: {location.elevation} m n.p.m.
+            </Text>
+        </Card.Content>
+      </Card>
+    </ScrollView></View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#fff',
+  },
+});

app/_layout.tsx

@@ -7,7 +7,6 @@ const colorScheme = useColorScheme();
 const theme = colorScheme === 'dark' ? MD3DarkTheme :
 MD3LightTheme;
 
-console.log(colorScheme)
 export default function RootLayout() {
   return (
     <PaperProvider theme={theme} >

constants/Locations.js

@@ -3,30 +3,56 @@ export const Locations = [
         "id": 1,
         "name": "Warszawa",
         "description": "Stolica Polski, położona w centralnej części kraju.",
-        "image": "https://www.niesamowitapolska.eu/images/mazowieckie/warszawa/38607734_m.jpg"
+        "longDescription": "Warszawa jest największym miastem w Polsce, znanym z bogatej historii, kultury i architektury. Warto zobaczyć Zamek Królewski, Stare Miasto oraz Muzeum Powstania Warszawskiego. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry. Warszawa jest również ważnym ośrodkiem gospodarczym i kulturalnym.",
+        "image": "https://www.niesamowitapolska.eu/images/mazowieckie/warszawa/38607734_m.jpg",
+        "area": 517.24,
+        "population": 1790658,
+        "density": 3460,
+        "elevation": 100
     },
     {
         "id": 2,
         "name": "Kielce",
         "description": "Stolica województwa świętokrzyskiego, położona w centralnej Polsce.",
-        "image": "https://as2.ftcdn.net/jpg/05/42/90/67/1000_F_542906717_cf5i6HeCJsPluuH5tqq5MbsSdfpopmtT.webp"
+        "longDescription": "Kielce to miasto w centralnej Polsce, znane z pięknych krajobrazów i bogatej historii. Warto odwiedzić Kielecki Park Etnograficzny, Muzeum Zabawek oraz Katedrę Wniebowzięcia Najświętszej Maryi Panny. Kielce są również znane z licznych festiwali i wydarzeń kulturalnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.", 
+        "image": "https://as2.ftcdn.net/jpg/05/42/90/67/1000_F_542906717_cf5i6HeCJsPluuH5tqq5MbsSdfpopmtT.webp",
+        "area": 109.4,
+        "population": 196000,
+        "density": 1790,
+        "elevation": 350
     },
     {
         "id": 3,
         "name": "Kraków",
         "description": "Miasto położone w południowej Polsce, znane z bogatej historii i kultury.",
-        "image": "https://nawakacje.eu/wp-content/uploads/2020/12/krakow-atrakcje.jpg"
+        "longDescription": "Kraków to jedno z najstarszych i najpiękniejszych miast w Polsce, znane z bogatej historii, kultury i architektury. Warto zobaczyć Wawel, Stare Miasto oraz Sukiennice. Kraków jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
+        "image": "https://nawakacje.eu/wp-content/uploads/2020/12/krakow-atrakcje.jpg",
+        "area": 326.85,
+        "population": 779115,
+        "density": 2380,
+        "elevation": 219
     },
     {
         "id": 4,
         "name": "Wrocław",
         "description": "Miasto w zachodniej Polsce, znane z pięknych mostów i architektury.",
-        "image": "https://backend.triverna.pl/blog/wp-content/uploads/2023/10/Wroclaw-z-lotu-ptaka-1.jpeg"
+        "longDescription": "Wrocław to miasto w zachodniej Polsce, znane z pięknych mostów, architektury i bogatej historii. Warto odwiedzić Ostrów Tumski, Rynek oraz Halę Stulecia. Wrocław jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
+        "image": "https://backend.triverna.pl/blog/wp-content/uploads/2023/10/Wroclaw-z-lotu-ptaka-1.jpeg",
+        "area": 292.82,
+        "population": 640000,
+        "density": 2180,
+        "elevation": 120
     },
     {
         "id": 5,
         "name": "Poznań",
         "description": "Miasto w zachodniej Polsce, znane z tradycji piwowarskich.",
-        "image":"https://wycieczkoteka.pl/images/2024/11/07/poznan-co-zwiedzic.jpg"
+        "longDescription": "Poznań to miasto w zachodniej Polsce, znane z tradycji piwowarskich, bogatej historii i kultury. Warto odwiedzić Stary Rynek, Katedrę Poznańską oraz Ostrów Tumski. Poznań jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
+        "image":"https://wycieczkoteka.pl/images/2024/11/07/poznan-co-zwiedzic.jpg",
+        "area": 262.82,
+        "population": 535802,
+        "density": 2030,
+        "elevation": 60
+
     }
     ]   

tsconfig.json

@@ -15,5 +15,5 @@
     "**/*.ts",
     "**/*.tsx",
     "**/*.jsx"
-  ]
+, "app/(tabs)/location/[id].js"  ]
 }