init edit

app/(tabs)/_layout.tsx

@@ -21,10 +21,11 @@ export default function TabLayout() {
       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="addLocation" options={{title: 'Create'  ,tabBarIcon: ({ color, focused }) => (
+      <Tabs.Screen name="add" options={{title: 'Create'  ,tabBarIcon: ({ color, focused }) => (
             <Ionicons name={focused ? 'add-circle-sharp' : 'add-circle-outline'} color={color} size={24} />
           ),}} />
     </Tabs>

app/(tabs)/add.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { TextInput,  Button } from 'react-native-paper';
+import { StyleSheet, Platform, KeyboardAvoidingView, ScrollView } from 'react-native';
+import { TextInput,  Button, Snackbar } from 'react-native-paper';
 import { locations } from '@/data/locations';
 
 
@@ -12,6 +12,8 @@ export default function FormScreen() {
     area: '',
     population: '',
   });
+  const [message, setMessage] = useState('');
+  const [visible, setVisible] = useState(false);
 
   const [location, setLocation] = useState(locations.sort((a, b) => b.id - a.id));
 
@@ -38,13 +40,27 @@ export default function FormScreen() {
         area: '',
         population: '',
       });
+      setMessage('Lokalizacja została dodana!');
+      setVisible(true);
+    }else{
+      setMessage('Wypełnij wszystkie pola!');
+      setVisible(true);
     }
     }
 
-  
-
   return (
-    <View style={styles.container}>
+    <KeyboardAvoidingView
+    style={{ flex: 1 }}
+    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+  >
+    <ScrollView contentContainerStyle={styles.container}>
+    <Snackbar
+        visible={visible}
+        onDismiss={() => setVisible(false)} 
+        duration={3000} 
+      >
+        {message}
+      </Snackbar>
         <TextInput
           mode="outlined"
           label="Nazwa"
@@ -66,6 +82,7 @@ export default function FormScreen() {
             <TextInput 
           mode="outlined"
           label="Link do zdjęcia"
+          multiline={true}
           placeholder="Wpisz link do zdjęcia"
           style={{ margin: 10, width: '100%', borderRadius:10}}
           value={formData.image}
@@ -94,7 +111,8 @@ export default function FormScreen() {
           mode={'contained'}
           onPress={addLocation}
           >Dodaj</Button>
-      </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
   );
 }
 
@@ -102,7 +120,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#25292e',
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
     alignItems: 'center',
   },
   text: {

app/(tabs)/index.tsx

@@ -5,7 +5,7 @@ import { locations } from '@/data/locations';
 
 export default function Index() {
 const theme = useTheme();
-  console.log(locations);
+locations.sort((a, b) => b.id - a.id);
   return (
     <View style={[styles.container, {backgroundColor: theme.colors.background}]}>
       <FlatList 

app/_layout.jsx

@@ -1,8 +1,8 @@
-import { Stack } from 'expo-router';
+import { Link, Stack } from 'expo-router';
 import { useColorScheme } from 'react-native';
 import { PaperProvider} from 'react-native-paper';
 import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
-
+import Ionicons from '@expo/vector-icons/Ionicons';
 
 export default function RootLayout() {
   const colorScheme = useColorScheme();
@@ -20,11 +20,22 @@ export default function RootLayout() {
         }}>
           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
           <Stack.Screen 
-          name="location/[id]" 
-          options={{ 
+            name="location/[id]" 
+            options={({ route }) => ({
             title: "Lokalizacja", 
             headerBackTitle: "Powrót",
-          }}/>
+            headerRight: () => (
+            <Link 
+            href={`location/edit/${route.params.id}`}
+            asChild 
+            style={{ marginRight: 11 }}
+            >
+          <Ionicons name="pencil" color={theme.colors.primary} size={24} />
+          </Link>
+        ),
+        })}
+        />
+        <Stack.Screen name="location/edit/[id]" options={{ title: "Edycja" }} />
         </Stack>
     </PaperProvider>
   );

app/location/edit/[id].js

@@ -0,0 +1,139 @@
+import { useState, useEffect } from 'react';
+import { StyleSheet, Platform, ScrollView, KeyboardAvoidingView } from 'react-native';
+import { TextInput,  Button, Snackbar } from 'react-native-paper';
+import { locations } from '@/data/locations';
+import { useLocalSearchParams, useRouter } from 'expo-router';
+
+export default function edit() {
+    const { id } = useLocalSearchParams();
+    const router = useRouter();
+    const locationData = locations.find(loc => loc.id == id);
+    const [formData, setFormData] = useState({
+      name: '',
+      description: '',
+      image: '',
+      area: '',
+      population: '',
+    });
+
+    const [message, setMessage] = useState('');
+    const [visible, setVisible] = useState(false);
+
+    useEffect(() => {
+      if (locationData) {
+        console.log(locationData);
+        setFormData({
+          name: locationData.name,
+          description: locationData.description,
+          image: locationData.image,
+          area: locationData.area.toString(),
+          population: locationData.population.toString(),
+        });
+      }
+    }, [locationData]);
+
+
+    const editLocation = () => {
+      if (
+        formData.name &&
+        formData.description &&
+        formData.image &&
+        formData.area &&
+        formData.population
+      ) {
+        const index = locations.findIndex((loc) => loc.id == id);
+        if (index !== -1) {
+          locations[index] = { ...locations[index], ...formData };
+          setMessage('Lokalizacja została zaktualizowana!');
+          setVisible(true);
+        }else{ 
+          setMessage('Błąd spróbuj ponownie póżniej!');
+          setVisible(true);
+        }
+      } else{
+        setMessage('Wypełnij wszystkie pola!');
+        setVisible(true);
+      }
+    };
+
+  
+
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+    <ScrollView contentContainerStyle={styles.container}>
+       <Snackbar
+        visible={visible}
+        onDismiss={() => setVisible(false)} 
+        duration={3000} 
+      >
+        {message}
+      </Snackbar>
+        <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"
+          multiline={true}
+          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}
+          keyboardType='numeric'
+          onChangeText={e => setFormData({ ...formData, population: e })}
+        />
+        
+          <Button 
+          style={{ margin: 10, width: '100%' }}
+          icon="plus-circle-outline"
+          mode={'contained'}
+          onPress={editLocation}
+          >Edytuj</Button>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#fff',
+  },
+});