Added nested navigation to and from place screen

AJVEATS · AJVEATS · commit 42d6354388ed · 2022-10-21T19:56:42.000+01:00
diff --git a/App.js b/App.js
@@ -7,10 +7,31 @@ import MapScreen from './Screens/MapScreen';
 import ListScreen from './Screens/ListScreen';
 import PlaceScreen from './Screens/PlaceScreen';
 import TestScreen from './Screens/TestScreen';
-import ListStack from './Screens/TestScreen'
+import { createStackNavigator } from '@react-navigation/stack';
 
 const Tab = createBottomTabNavigator();
 
+const appStack = createStackNavigator();
+
+function PlaceStack() {
+  return (
+    <appStack.Navigator screenOptions={{ headerShown: false }}>
+      <appStack.Screen name="ListScreen" component={ListScreen} />
+      <appStack.Screen name="PlaceScreen" component={PlaceScreen} />
+    </appStack.Navigator >
+  )
+}
+
+function MapStack() {
+  return (
+    <appStack.Navigator screenOptions={{ headerShown: false }}>
+      <appStack.Screen name="MapScreen" component={MapScreen} />
+      <appStack.Screen name="PlaceScreen" component={PlaceScreen} />
+    </appStack.Navigator>
+  )
+}
+
+
 function AppNavigator() {
   return (
     <Tab.Navigator
@@ -35,9 +56,8 @@ function AppNavigator() {
         tabBarActiveTintColor: 'teal',
         tabBarInactiveTintColor: 'gray',
       })}>
-      {/* <Tab.Screen name="List" component={ListScreen} /> */}
-      <Tab.Screen name="List" component={TestScreen} />
-      <Tab.Screen name="Map" component={MapScreen} />
+      <Tab.Screen name="List" component={PlaceStack} />
+      <Tab.Screen name="Map" component={MapStack} />
     </Tab.Navigator>
   );
 }
@@ -47,7 +67,6 @@ export default function App() {
   return (
     <NavigationContainer>
       <AppNavigator />
-
     </NavigationContainer>
   );
 }
diff --git a/Components/ListViewComponent.js b/Components/ListViewComponent.js
@@ -2,16 +2,22 @@ import { StyleSheet, View, Image, Text, FlatList, Pressable } from 'react-native
 import React from 'react'
 
 import '../data/nt_places.json';
+import { useNavigation } from '@react-navigation/native';
 
-const ListViewComponent = ({ navigation }) => {
+const ListViewComponent = () => {
 
     const nationalTrustPlaces = require('../data/nt_places.json');
     const placesArray = Object.values(nationalTrustPlaces);
 
+    const navigation = useNavigation();
+
+    const changeScreenOnPress = (item) => {
+        navigation.push('PlaceScreen', { data: item.id });
+    }
 
     const placesRenderItem = ({ item }) => {
         return (
-            <Pressable key={item} style={styles.placeCard} >
+            <Pressable key={item} style={styles.placeCard} onPress={() => changeScreenOnPress(item)} >
                 <View style={styles.placeImageContainer}>
                     <Image style={styles.placeImage} source={{ uri: item.imageUrl }} />
                 </View>
@@ -32,34 +38,35 @@ const ListViewComponent = ({ navigation }) => {
     );
 }
 
+
 export default ListViewComponent
 
 const styles = StyleSheet.create({
     placeCard: {
         width: '100%',
         marginTop: 7,
-        height: 300,
+        height: 275,
         alignItems: 'center',
     },
     placeImageContainer: {
         width: '95%',
-        height: 235,
+        height: 200,
     },
     placeImage: {
         width: '100%',
         height: '100%',
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10,
     },
     placeTextContainer: {
         width: '95%',
-        height: 65,
+        height: 75,
         marginHorizontal: 2,
         paddingHorizontal: 10,
         backgroundColor: 'white',
         // transform: [{ translateY: -10 }],
-        borderBottomLeftRadius: 20,
-        borderBottomRightRadius: 20,
+        borderBottomLeftRadius: 10,
+        borderBottomRightRadius: 10,
         justifyContent: 'center',
     },
     placeText: {
diff --git a/Components/MapComponents.js b/Components/MapComponents.js
@@ -1,20 +1,37 @@
+import { useNavigation } from '@react-navigation/native';
 import React from 'react';
-import { StyleSheet, Dimensions } from 'react-native';
-import MapView, { Marker } from "react-native-maps";
+import { StyleSheet, Dimensions, Button, Text, View } from 'react-native';
+import MapView, { Callout, Marker } from "react-native-maps";
 import '../data/nt_places.json';
 
 
 
 const MapComponent = () => {
     let nationalTrustPlaces = require('../data/nt_places.json');
 
+    const navigation = useNavigation();
+
+    const changeScreenOnPress = (item) => {
+        navigation.push('PlaceScreen', { data: item.id });
+    }
+
     const styles = StyleSheet.create({
         map: {
             width: Dimensions.get('window').width,
             height: Dimensions.get('window').height,
             alignContent: 'center',
             justifyContent: 'center',
-            flex: 1
+            flex: 1,
+        },
+        markerCallout: {
+            width: 300,
+            height: 300
+        },
+        markerView: {
+            alignItems: 'center',
+        },
+        markerTitle: {
+            // fontSize: 24,
         },
     });
 
@@ -27,13 +44,19 @@ const MapComponent = () => {
                 latitudeDelta: 0.09,
                 longitudeDelta: 0.04,
             }}>
-            {Object.values(nationalTrustPlaces).map(index => {
+            {Object.values(nationalTrustPlaces).map(item => {
                 return <Marker
-                    key={index.id}
-                    coordinate={{ latitude: index.location.latitude, longitude: index.location.longitude }}
-                    title={index.title}
-                    description={index.description}
-                    icon={{ uri: 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/samsung/320/round-pushpin_1f4cd.png' }} />
+                    key={item.id}
+                    coordinate={{ latitude: item.location.latitude, longitude: item.location.longitude }}
+                    icon={{ uri: 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/samsung/320/round-pushpin_1f4cd.png' }}
+                    onCalloutPress={() => changeScreenOnPress(item)} >
+                    <Callout>
+                        <View style={styles.markerView}>
+                            <Text style={styles.markerTitle}>{item.title}</Text>
+                            <Button title="find more" onProgress={() => navigation.push('PlaceScreen', { data: item.id })} />
+                        </View>
+                    </Callout>
+                </Marker>
             })}
         </MapView>
     )
diff --git a/Navigation/PlaceNavigator.js b/Navigation/PlaceNavigator.js
@@ -0,0 +1,27 @@
+// import { StyleSheet, Text, View } from 'react-native'
+// import React from 'react'
+// import { createStackNavigator } from '@react-navigation/stack'
+// import MapScreen from '../Screens/MapScreen';
+// import PlaceScreen from '../Screens/PlaceScreen';
+// import ListScreen from '../Screens/ListScreen';
+
+// const itemStack = createStackNavigator();
+
+// function PlaceStack() {
+//     return (
+//         <itemStack.Navigator>
+//             <itemStack.Screen name="list" component={ListScreen} />
+//             <itemStack.Screen name="place" component={PlaceScreen} />
+//         </itemStack.Navigator>
+//     )
+// }
+
+// const PlaceNavigator = () => {
+//     return (
+//         <PlaceStack />
+//     )
+// }
+
+// export default PlaceNavigator
+
+// const styles = StyleSheet.create({})
diff --git a/Screens/ListScreen.js b/Screens/ListScreen.js
@@ -1,26 +1,17 @@
-import { Image, StyleSheet, Text, View, SafeAreaView, StatusBar } from 'react-native'
+import { StyleSheet, Text, View, SafeAreaView, StatusBar } from 'react-native'
 import React from 'react'
 import ListViewComponent from '../Components/ListViewComponent'
 
-import '../data/nt_places.json'
-
 const ListScreen = () => {
-    const nationalTrustPlaces = require('../data/nt_places.json');
-    const nationalTrustPlacesSize = Object.keys(nationalTrustPlaces).length;
 
     return (
+
         <SafeAreaView style={styles.listViewContainer}>
             <StatusBar hidden />
             <View style={styles.listContainer}/*Ask Ben about this in the lab*/>
                 <View style={styles.listTitleContainer}>
-                    <View style={styles.listTitleImage}>
-                        <Image source={require('../assets/images/leaf-solid.png')} style={{ width: 50, height: 50 }} />
-                    </View>
-                    <View>
-                        <Text style={styles.listTitle}>Explore {nationalTrustPlacesSize} places, starting from</Text >
-                    </View>
                     <View>
-                        <Text style={styles.listSubTitle}>Bournemouth, Dorset</Text>
+                        <Text style={styles.listTitle}>National Trust</Text >
                     </View>
                 </View >
                 <View style={styles.listScrollContainer}>
@@ -42,30 +33,15 @@ const styles = StyleSheet.create({
         width: '100%',
     },
     listTitleContainer: {
-        backgroundColor: 'teal',
+        backgroundColor: '#007A3B',
         width: '100%',
         alignItems: 'center',
         borderBottomStartRadius: 10,
         borderBottomEndRadius: 10,
     },
-    listTitleImage: {
-        alignContent: 'center',
-        textAlign: 'center',
-        marginTop: 10
-    },
     listTitle: {
         color: 'white',
-        marginTop: 10,
-        fontSize: 17
-    },
-    listSubTitle: {
-        color: 'white',
-        marginTop: 5,
-        fontStyle: 'italic',
-        fontSize: 15,
-        marginBottom: 10,
-    },
-    listScrollContainer: {
-
+        marginVertical: 20,
+        fontSize: 24,
     },
 })
diff --git a/Screens/PlaceScreen.js b/Screens/PlaceScreen.js
@@ -1,14 +1,52 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, ScrollView, View, Image, Button } from 'react-native'
 import React from 'react'
+import { useNavigation } from '@react-navigation/native';
+
+import '../data/nt_places.json';
+
+const PlaceScreen = (item) => {
+    const nationalTrustPlaces = require('../data/nt_places.json');
+    const place = nationalTrustPlaces[item.route.params.data];
+
+    const navigation = useNavigation();
 
-const PlaceScreen = () => {
     return (
-        <View>
-            <Text>Place Screen</Text>
-        </View>
-    )
+        <ScrollView style={styles.place}>
+            <View>
+                <Button title="Go Back" style={styles.backButton} onPress={() => navigation.goBack()} />
+            </View>
+            <View style={styles.placeImageContainer}>
+                <Image style={styles.placeImage} source={{ uri: place.imageUrl }} />
+            </View>
+            <View style={styles.placeTitle}>
+                <Text style={styles.placeTitleText}>{place.title}</Text>
+            </View>
+
+        </ScrollView>
+    );
 }
 
 export default PlaceScreen
 
-const styles = StyleSheet.create({})
+const styles = StyleSheet.create({
+    backButton: {
+    },
+    place: {
+        width: '100%',
+    },
+    placeImageContainer: {
+        width: '100%',
+        height: 300,
+    },
+    placeImage: {
+        width: '100%',
+        height: '100%',
+    },
+    placeTitle: {
+        backgroundColor: 'teal',
+
+    },
+    placeTitleText: {
+        color: 'white',
+    },
+})
diff --git a/Screens/TestScreen.js b/Screens/TestScreen.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { StyleSheet, Text, SafeAreaView, Button } from 'react-native'
 import { createStackNavigator } from '@react-navigation/stack'
-import { NavigationContainer } from '@react-navigation/native'
 import { StatusBar } from 'expo-status-bar'
 
 function Screen1({ navigation }) {
diff --git a/assets/images/leaf-solid.png b/assets/images/leaf-solid.png
