location show page

app/(tabs)/_layout.tsx

@@ -24,9 +24,6 @@ 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 }) => (
-            <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/_layout.tsx

@@ -10,8 +10,20 @@ MD3LightTheme;
 export default function RootLayout() {
   return (
     <PaperProvider theme={theme} >
-        <Stack>
+        <Stack screenOptions={{
+                headerStyle: {
+                  backgroundColor: theme.colors.primaryContainer,
+                  borderBottomWidth:0
+                },
+                headerTintColor: theme.colors.primary,
+        }}>
           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen 
+          name="location/[id]" 
+          options={{ 
+            title: "Lokalizacja", 
+            headerBackTitle: "Powrót",
+          }}/>
         </Stack>
     </PaperProvider>
   );

app/location/[id].js

@@ -17,11 +17,14 @@ export default function Location() {
   return (
     <View style={styles.container}>
     <ScrollView>
-      <Card>
+      <Card style={{ margin: 10}}>
         <Card.Cover style={{marginBottom: 10}} source={{ uri: location.image }} />
         <Card.Content  style={{marginBottom: 10}}>
           <Text variant="headlineLarge" style={{marginBottom: 10}}>
-            Opis
+            {location.name}
+          </Text>
+          <Text variant="headlineLarge" style={{marginBottom: 10}}>
+            Opis:
           </Text>
           <Text variant="bodyMedium">
             {location.longDescription}
@@ -30,7 +33,7 @@ export default function Location() {
 
         <Card.Content>
           <Text variant="headlineLarge" style={{marginBottom: 10}}>
-            Statystyki
+            Statystyki:
           </Text>
           <Text variant="bodyMedium" style={{marginBottom: 10}}>
             Powierzchnia: {location.area} km²

tsconfig.json

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