Creating nested screens

src/screens/mainScreens/HomeScreen.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { moduleName } from 'react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+import PostsScreen from '../nestedScreens/PostsScreen';
+import CommentsScreen from '../nestedScreens/CommentsScreen';
+import CreatePostsScreen from '../nestedScreens/CreatePostsScreen';
+
+const NestedScreen = createStackNavigator();
+
+const HomeScreen = () => {
+  return (
+    <NestedScreen.Navigator>
+      <NestedScreen.Screen name="Posts" component={PostsScreen} />
+      <NestedScreen.Screen name="Comments" component={CommentsScreen} />
+      <NestedScreen.Screen name="CreatePosts" component={CreatePostsScreen} />
+    </NestedScreen.Navigator>
+  );
+};
+
+export default NestedScreen;

src/screens/mainScreen/CreatePostsScreen.js → src/screens/nestedScreens/CreatePostsScreen.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   View,
   Text,
@@ -11,6 +11,7 @@ import {
   Image,
 } from 'react-native';
 import { Camera } from 'expo-camera';
+import * as Location from 'expo-location';
 import { FontAwesome, Feather, SimpleLineIcons } from '@expo/vector-icons';
 
 export default function CreatePostsScreen({ navigation }) {
@@ -24,6 +25,8 @@ export default function CreatePostsScreen({ navigation }) {
   const takePhoto = async () => {
     if (camera) {
       const photo = await camera.takePictureAsync(null);
+      const location = await Location.getCurrentPositionAsync({});
+      console.log(location);
       setPhoto(photo.uri);
     }
   };
@@ -33,6 +36,16 @@ export default function CreatePostsScreen({ navigation }) {
     clearData();
   };
 
+  useEffect(() => {
+    (async () => {
+      let { status } = await Location.requestForegroundPermissionsAsync();
+      if (status !== 'granted') {
+        setErrorMsg('Permission to access location was denied');
+        return;
+      }
+    })();
+  });
+
   return (
     <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
       <KeyboardAvoidingView
@@ -173,7 +186,6 @@ const styles = StyleSheet.create({
     borderRadius: 50,
   },
   photoMetaInput: {
-    width: '100%',
     height: 50,
     marginBottom: 16,
     fontSize: 16,
@@ -187,7 +199,6 @@ const styles = StyleSheet.create({
     top: 13,
   },
   publishButton: {
-    width: '100%',
     height: 50,
     marginBottom: 120,
     padding: 16,

src/screens/nestedScreens/MapScreen.js

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useRoute } from '@react-navigation/native';
+import MapView, { Marker } from 'react-native-maps';
+import * as Location from 'expo-location';
+
+export default function MapScreen() {
+  return (
+    <View style={styles.container}>
+      <MapView
+        style={{ flex: 1 }}
+        initialRegion={{
+          latitude: '',
+          longitude: '',
+          latitudeDelta: '',
+          longitudeDelta: '',
+        }}
+      >
+        <Marker
+          coordinate={{
+            latitude: '',
+            longitude: '',
+          }}
+          title={'title'}
+          description={'description'}
+        />
+      </MapView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});