init addScreen and change locations

app/(tabs)/_layout.tsx

@@ -5,6 +5,7 @@ import { useTheme } from 'react-native-paper';
 
 export default function TabLayout() {
   const theme = useTheme();
+  
   return (
     <Tabs  screenOptions ={{ 
       tabBarInactiveTintColor: theme.colors.primary,
@@ -23,7 +24,7 @@ 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="formScreen" options={{title: 'Create/Edit'  ,tabBarIcon: ({ color, focused }) => (
+      <Tabs.Screen name="addLocation" options={{title: 'Create'  ,tabBarIcon: ({ color, focused }) => (
             <Ionicons name={focused ? 'add-circle-sharp' : 'add-circle-outline'} color={color} size={24} />
           ),}} />
     </Tabs>

app/(tabs)/addLocation.jsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { TextInput,  Button } from 'react-native-paper';
+import { locations } from '@/data/locations';
+
+
+export default function FormScreen() {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    image: '',
+    area: '',
+    population: '',
+  });
+
+  const [location, setLocation] = useState(locations.sort((a, b) => b.id - a.id));
+
+  const addLocation = () => {
+    console.log(formData);
+    if(formData.name && formData.description && formData.image && formData.area && formData.population) {
+      const newLocation = {
+        id: locations.length > 0 ? locations[0].id + 1 : 0,
+        name: formData.name,
+        description: formData.description,
+        image: formData.image,
+        area: formData.area,
+        population: formData.population,
+      };
+
+      setLocation([newLocation, ...location]);
+      
+      locations.push(newLocation);
+
+      setFormData({
+        name: '',
+        description: '',
+        image: '',
+        area: '',
+        population: '',
+      });
+    }
+    }
+
+  
+
+  return (
+    <View style={styles.container}>
+        <TextInput
+          mode="outlined"
+          label="Nazwa"
+          placeholder="Wpisz nazwa"
+          style={{ margin: 10, width: '100%' }}
+          value={formData.name}
+          onChangeText={e => setFormData({ ...formData, name: e })}
+
+          />
+        <TextInput 
+          mode="outlined"
+          label="Opis"
+          placeholder="Wpisz opis"
+          style={{ margin: 10, width: '100%' }}
+          multiline={true}
+          value={formData.description}
+          onChangeText={e => setFormData({ ...formData, description: e })}
+          />
+            <TextInput 
+          mode="outlined"
+          label="Link do zdjęcia"
+          placeholder="Wpisz link do zdjęcia"
+          style={{ margin: 10, width: '100%', borderRadius:10}}
+          value={formData.image}
+          onChangeText={e => setFormData({ ...formData, image: e })}
+          />
+        <TextInput
+          mode="outlined"
+          label="Powierzchnia"
+          placeholder="Wpisz powierzchnie"
+          style={{ margin: 10, width: '100%' }}
+          value={formData.area}
+          onChangeText={e => setFormData({ ...formData, area: e })}
+        />
+        <TextInput
+          mode="outlined"
+          label="Ludność"
+          placeholder='Wpisz liczbę ludności'
+          style={{ margin: 10, width: '100%' }}
+          value={formData.population}
+          onChangeText={e => setFormData({ ...formData, population: e })}
+        />
+        
+          <Button 
+          style={{ margin: 10, width: '100%' }}
+          icon="plus-circle-outline"
+          mode={'contained'}
+          onPress={addLocation}
+          >Dodaj</Button>
+      </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#fff',
+  },
+});

app/(tabs)/formScreen.tsx

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

app/(tabs)/index.tsx

@@ -1,22 +1,22 @@
 import { View, StyleSheet, FlatList } from 'react-native';
 import { useTheme, Card, Text, Button} from 'react-native-paper';
 import { Link } from 'expo-router';
-
-import { Locations } from '@/constants/Locations';
+import { locations } from '@/data/locations';
 
 export default function Index() {
 const theme = useTheme();
+  console.log(locations);
   return (
     <View style={[styles.container, {backgroundColor: theme.colors.background}]}>
       <FlatList 
-        data={Locations}
+        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>
+              <Text variant="bodyMedium">{item.description.split('.')[0]}...</Text>
             </Card.Content>
             <Card.Actions>
             <Link href={`/location/${item.id}`} asChild>

app/_layout.tsx

@@ -3,11 +3,12 @@ import { useColorScheme } from 'react-native';
 import { PaperProvider} from 'react-native-paper';
 import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
 
-const colorScheme = useColorScheme();
-const theme = colorScheme === 'dark' ? MD3DarkTheme :
-MD3LightTheme;
 
 export default function RootLayout() {
+  const colorScheme = useColorScheme();
+  const theme = colorScheme === 'dark' ? MD3DarkTheme :
+  MD3LightTheme;
+
   return (
     <PaperProvider theme={theme} >
         <Stack screenOptions={{

app/location/[id].js

@@ -1,11 +1,11 @@
 import { View, ScrollView, StyleSheet } from 'react-native';
 import { Text, Card } from 'react-native-paper';
 import { useLocalSearchParams } from 'expo-router';
-import { Locations } from '@/constants/Locations';
+import { locations } from '@/data/locations';
 
 export default function Location() {
   const { id } = useLocalSearchParams();
-  const location = Locations.find(loc => loc.id == id);
+  const location = locations.find(loc => loc.id == id);
 
   if (!location) {
     return (
@@ -14,6 +14,7 @@ export default function Location() {
       </View>
     );
   }
+
   return (
     <View style={styles.container}>
     <ScrollView>
@@ -27,7 +28,7 @@ export default function Location() {
             Opis:
           </Text>
           <Text variant="bodyMedium">
-            {location.longDescription}
+            {location.description}
           </Text>
         </Card.Content>
 
@@ -41,12 +42,6 @@ export default function Location() {
           <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>