init addScreen and change locations
This commit is contained in:
@@ -5,6 +5,7 @@ import { useTheme } from 'react-native-paper';
|
|||||||
|
|
||||||
export default function TabLayout() {
|
export default function TabLayout() {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tabs screenOptions ={{
|
<Tabs screenOptions ={{
|
||||||
tabBarInactiveTintColor: theme.colors.primary,
|
tabBarInactiveTintColor: theme.colors.primary,
|
||||||
@@ -23,7 +24,7 @@ export default function TabLayout() {
|
|||||||
<Tabs.Screen name="index" options={{ title: 'Home',tabBarIcon: ({ color, focused }) => (
|
<Tabs.Screen name="index" options={{ title: 'Home',tabBarIcon: ({ color, focused }) => (
|
||||||
<Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
|
<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} />
|
<Ionicons name={focused ? 'add-circle-sharp' : 'add-circle-outline'} color={color} size={24} />
|
||||||
),}} />
|
),}} />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|||||||
111
app/(tabs)/addLocation.jsx
Normal file
111
app/(tabs)/addLocation.jsx
Normal file
@@ -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',
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -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',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,22 +1,22 @@
|
|||||||
import { View, StyleSheet, FlatList } from 'react-native';
|
import { View, StyleSheet, FlatList } from 'react-native';
|
||||||
import { useTheme, Card, Text, Button} from 'react-native-paper';
|
import { useTheme, Card, Text, Button} from 'react-native-paper';
|
||||||
import { Link } from 'expo-router';
|
import { Link } from 'expo-router';
|
||||||
|
import { locations } from '@/data/locations';
|
||||||
import { Locations } from '@/constants/Locations';
|
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
console.log(locations);
|
||||||
return (
|
return (
|
||||||
<View style={[styles.container, {backgroundColor: theme.colors.background}]}>
|
<View style={[styles.container, {backgroundColor: theme.colors.background}]}>
|
||||||
<FlatList
|
<FlatList
|
||||||
data={Locations}
|
data={locations}
|
||||||
keyExtractor={(item) => item.name}
|
keyExtractor={(item) => item.name}
|
||||||
renderItem={({ item }) => (
|
renderItem={({ item }) => (
|
||||||
<Card style={{ margin: 10}}>
|
<Card style={{ margin: 10}}>
|
||||||
<Card.Cover style={{ marginBottom:10 }} source={{ uri: item.image }} />
|
<Card.Cover style={{ marginBottom:10 }} source={{ uri: item.image }} />
|
||||||
<Card.Content style={{ marginBottom:10 }}>
|
<Card.Content style={{ marginBottom:10 }}>
|
||||||
<Text variant="titleLarge">{item.name}</Text>
|
<Text variant="titleLarge">{item.name}</Text>
|
||||||
<Text variant="bodyMedium">{item.description}</Text>
|
<Text variant="bodyMedium">{item.description.split('.')[0]}...</Text>
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
<Card.Actions>
|
<Card.Actions>
|
||||||
<Link href={`/location/${item.id}`} asChild>
|
<Link href={`/location/${item.id}`} asChild>
|
||||||
|
|||||||
@@ -3,11 +3,12 @@ import { useColorScheme } from 'react-native';
|
|||||||
import { PaperProvider} from 'react-native-paper';
|
import { PaperProvider} from 'react-native-paper';
|
||||||
import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
|
import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
|
||||||
|
|
||||||
|
|
||||||
|
export default function RootLayout() {
|
||||||
const colorScheme = useColorScheme();
|
const colorScheme = useColorScheme();
|
||||||
const theme = colorScheme === 'dark' ? MD3DarkTheme :
|
const theme = colorScheme === 'dark' ? MD3DarkTheme :
|
||||||
MD3LightTheme;
|
MD3LightTheme;
|
||||||
|
|
||||||
export default function RootLayout() {
|
|
||||||
return (
|
return (
|
||||||
<PaperProvider theme={theme} >
|
<PaperProvider theme={theme} >
|
||||||
<Stack screenOptions={{
|
<Stack screenOptions={{
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
import { View, ScrollView, StyleSheet } from 'react-native';
|
import { View, ScrollView, StyleSheet } from 'react-native';
|
||||||
import { Text, Card } from 'react-native-paper';
|
import { Text, Card } from 'react-native-paper';
|
||||||
import { useLocalSearchParams } from 'expo-router';
|
import { useLocalSearchParams } from 'expo-router';
|
||||||
import { Locations } from '@/constants/Locations';
|
import { locations } from '@/data/locations';
|
||||||
|
|
||||||
export default function Location() {
|
export default function Location() {
|
||||||
const { id } = useLocalSearchParams();
|
const { id } = useLocalSearchParams();
|
||||||
const location = Locations.find(loc => loc.id == id);
|
const location = locations.find(loc => loc.id == id);
|
||||||
|
|
||||||
if (!location) {
|
if (!location) {
|
||||||
return (
|
return (
|
||||||
@@ -14,6 +14,7 @@ export default function Location() {
|
|||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<ScrollView>
|
<ScrollView>
|
||||||
@@ -27,7 +28,7 @@ export default function Location() {
|
|||||||
Opis:
|
Opis:
|
||||||
</Text>
|
</Text>
|
||||||
<Text variant="bodyMedium">
|
<Text variant="bodyMedium">
|
||||||
{location.longDescription}
|
{location.description}
|
||||||
</Text>
|
</Text>
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
|
|
||||||
@@ -41,12 +42,6 @@ export default function Location() {
|
|||||||
<Text variant="bodyMedium" style={{marginBottom: 10}}>
|
<Text variant="bodyMedium" style={{marginBottom: 10}}>
|
||||||
Ludność: {location.population} osób
|
Ludność: {location.population} osób
|
||||||
</Text>
|
</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.Content>
|
||||||
</Card>
|
</Card>
|
||||||
</ScrollView></View>
|
</ScrollView></View>
|
||||||
|
|||||||
@@ -1,58 +0,0 @@
|
|||||||
export const Locations = [
|
|
||||||
{
|
|
||||||
"id": 1,
|
|
||||||
"name": "Warszawa",
|
|
||||||
"description": "Stolica Polski, położona w centralnej części kraju.",
|
|
||||||
"longDescription": "Warszawa jest największym miastem w Polsce, znanym z bogatej historii, kultury i architektury. Warto zobaczyć Zamek Królewski, Stare Miasto oraz Muzeum Powstania Warszawskiego. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry. Warszawa jest również ważnym ośrodkiem gospodarczym i kulturalnym.",
|
|
||||||
"image": "https://www.niesamowitapolska.eu/images/mazowieckie/warszawa/38607734_m.jpg",
|
|
||||||
"area": 517.24,
|
|
||||||
"population": 1790658,
|
|
||||||
"density": 3460,
|
|
||||||
"elevation": 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 2,
|
|
||||||
"name": "Kielce",
|
|
||||||
"description": "Stolica województwa świętokrzyskiego, położona w centralnej Polsce.",
|
|
||||||
"longDescription": "Kielce to miasto w centralnej Polsce, znane z pięknych krajobrazów i bogatej historii. Warto odwiedzić Kielecki Park Etnograficzny, Muzeum Zabawek oraz Katedrę Wniebowzięcia Najświętszej Maryi Panny. Kielce są również znane z licznych festiwali i wydarzeń kulturalnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
|
|
||||||
"image": "https://as2.ftcdn.net/jpg/05/42/90/67/1000_F_542906717_cf5i6HeCJsPluuH5tqq5MbsSdfpopmtT.webp",
|
|
||||||
"area": 109.4,
|
|
||||||
"population": 196000,
|
|
||||||
"density": 1790,
|
|
||||||
"elevation": 350
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 3,
|
|
||||||
"name": "Kraków",
|
|
||||||
"description": "Miasto położone w południowej Polsce, znane z bogatej historii i kultury.",
|
|
||||||
"longDescription": "Kraków to jedno z najstarszych i najpiękniejszych miast w Polsce, znane z bogatej historii, kultury i architektury. Warto zobaczyć Wawel, Stare Miasto oraz Sukiennice. Kraków jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
|
|
||||||
"image": "https://nawakacje.eu/wp-content/uploads/2020/12/krakow-atrakcje.jpg",
|
|
||||||
"area": 326.85,
|
|
||||||
"population": 779115,
|
|
||||||
"density": 2380,
|
|
||||||
"elevation": 219
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 4,
|
|
||||||
"name": "Wrocław",
|
|
||||||
"description": "Miasto w zachodniej Polsce, znane z pięknych mostów i architektury.",
|
|
||||||
"longDescription": "Wrocław to miasto w zachodniej Polsce, znane z pięknych mostów, architektury i bogatej historii. Warto odwiedzić Ostrów Tumski, Rynek oraz Halę Stulecia. Wrocław jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
|
|
||||||
"image": "https://backend.triverna.pl/blog/wp-content/uploads/2023/10/Wroclaw-z-lotu-ptaka-1.jpeg",
|
|
||||||
"area": 292.82,
|
|
||||||
"population": 640000,
|
|
||||||
"density": 2180,
|
|
||||||
"elevation": 120
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 5,
|
|
||||||
"name": "Poznań",
|
|
||||||
"description": "Miasto w zachodniej Polsce, znane z tradycji piwowarskich.",
|
|
||||||
"longDescription": "Poznań to miasto w zachodniej Polsce, znane z tradycji piwowarskich, bogatej historii i kultury. Warto odwiedzić Stary Rynek, Katedrę Poznańską oraz Ostrów Tumski. Poznań jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
|
|
||||||
"image":"https://wycieczkoteka.pl/images/2024/11/07/poznan-co-zwiedzic.jpg",
|
|
||||||
"area": 262.82,
|
|
||||||
"population": 535802,
|
|
||||||
"density": 2030,
|
|
||||||
"elevation": 60
|
|
||||||
|
|
||||||
}
|
|
||||||
]
|
|
||||||
44
data/locations.js
Normal file
44
data/locations.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
export const locations = [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "Warszawa",
|
||||||
|
"description": "Stolica Polski, położona w centralnej części kraju. Warszawa jest największym miastem w Polsce, znanym z bogatej historii, kultury i architektury. Warto zobaczyć Zamek Królewski, Stare Miasto oraz Muzeum Powstania Warszawskiego. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry. Warszawa jest również ważnym ośrodkiem gospodarczym i kulturalnym.",
|
||||||
|
"image": "https://www.niesamowitapolska.eu/images/mazowieckie/warszawa/38607734_m.jpg",
|
||||||
|
"area": 517.24,
|
||||||
|
"population": 1790658,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"name": "Kielce",
|
||||||
|
"description": "Stolica województwa świętokrzyskiego, położona w centralnej Polsce. Kielce to miasto w centralnej Polsce, znane z pięknych krajobrazów i bogatej historii. Warto odwiedzić Kielecki Park Etnograficzny, Muzeum Zabawek oraz Katedrę Wniebowzięcia Najświętszej Maryi Panny. Kielce są również znane z licznych festiwali i wydarzeń kulturalnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
|
||||||
|
"image": "https://as2.ftcdn.net/jpg/05/42/90/67/1000_F_542906717_cf5i6HeCJsPluuH5tqq5MbsSdfpopmtT.webp",
|
||||||
|
"area": 109.4,
|
||||||
|
"population": 196000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"name": "Kraków",
|
||||||
|
"description": "Miasto położone w południowej Polsce, znane z bogatej historii i kultury. Kraków to jedno z najstarszych i najpiękniejszych miast w Polsce, znane z bogatej historii, kultury i architektury. Warto zobaczyć Wawel, Stare Miasto oraz Sukiennice. Kraków jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
|
||||||
|
"image": "https://nawakacje.eu/wp-content/uploads/2020/12/krakow-atrakcje.jpg",
|
||||||
|
"area": 326.85,
|
||||||
|
"population": 779115,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"name": "Wrocław",
|
||||||
|
"description": "Miasto w zachodniej Polsce, znane z pięknych mostów i architektury. Wrocław to miasto w zachodniej Polsce, znane z pięknych mostów, architektury i bogatej historii. Warto odwiedzić Ostrów Tumski, Rynek oraz Halę Stulecia. Wrocław jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
|
||||||
|
"image": "https://backend.triverna.pl/blog/wp-content/uploads/2023/10/Wroclaw-z-lotu-ptaka-1.jpeg",
|
||||||
|
"area": 292.82,
|
||||||
|
"population": 640000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 5,
|
||||||
|
"name": "Poznań",
|
||||||
|
"description": "Miasto w zachodniej Polsce, znane z tradycji piwowarskich. Poznań to miasto w zachodniej Polsce, znane z tradycji piwowarskich, bogatej historii i kultury. Warto odwiedzić Stary Rynek, Katedrę Poznańską oraz Ostrów Tumski. Poznań jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
|
||||||
|
"image":"https://wycieczkoteka.pl/images/2024/11/07/poznan-co-zwiedzic.jpg",
|
||||||
|
"area": 262.82,
|
||||||
|
"population": 535802,
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
Reference in New Issue
Block a user