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',
+  },
+});