home list view

app.json

@@ -6,7 +6,7 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "splash": {
       "image": "./assets/splash-icon.png",

app/(tabs)/_layout.tsx

@@ -19,11 +19,12 @@ export default function TabLayout() {
         borderBottomWidth:0
       },
       headerTintColor: theme.colors.primary,
+      tabBarItemStyle: { flex: 1 },
       }}>
       <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' ,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 }) => (

app/(tabs)/index.tsx

@@ -1,11 +1,31 @@
-import { Text, View, StyleSheet } from 'react-native';
+import { View, StyleSheet, FlatList } from 'react-native';
-import { useTheme } from 'react-native-paper';
+import { useTheme, Card, Text, Button} from 'react-native-paper';
+import { Link } from 'expo-router';
+
+import { Locations } from '@/constants/Locations';
 
 export default function Index() {
 const theme = useTheme();
   return (
     <View style={[styles.container, {backgroundColor: theme.colors.background}]}>
-
+      <FlatList 
+        data={Locations}
+        keyExtractor={(item) => item.name}
+        renderItem={({ item }) => (
+          <Card style={{ margin: 10}}>
+            <Card.Cover style={{ marginBottom:10 }} source={{ uri: item.image }} />
+            <Card.Content style={{ marginBottom:10 }}>
+              <Text variant="titleLarge">{item.name}</Text>
+              <Text variant="bodyMedium">{item.description}</Text>
+            </Card.Content>
+            <Card.Actions>
+            <Link href="/location/{item.id}" asChild>
+              <Button>Zobacz więcej</Button>
+              </Link>
+            </Card.Actions>
+          </Card>
+        )}>  
+        </FlatList>
     </View>
   );
 }

constants/Locations.js

@@ -0,0 +1,32 @@
+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"
+    },
+    {
+        "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"
+    },
+    {
+        "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"
+    },
+    {
+        "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"
+    },
+    {
+        "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"
+    }
+    ]