feat: initial create of mapview

components/MapView/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import MapView from 'react-native-maps';
+import { StyleSheet, Text, View, Dimensions } from 'react-native';
+
+const Maps = () => {
+  const [region, setRegion] = React.useState({
+    latitude: 37.78825,
+    longitude: -122.4324,
+    latitudeDelta: 0.0922,
+    longitudeDelta: 0.0421,
+  })
+  return (
+    <View style={styles.container}>
+      <MapView
+        style={styles.mapStyle}
+        region={region}
+        onRegionChange={setRegion}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  mapStyle: {
+    width: Dimensions.get('window').width * .95,
+    height: Dimensions.get('window').height / 2,
+    marginTop: 10,
+    borderRadius: 10
+  },
+});
+
+export default Maps

domains/DataCollection/index.js

@@ -11,6 +11,7 @@ import {
 import { layout, theme } from '../../modules/theme';
 
 import Header from '../../components/Header';
+import MapView from '../../components/MapView'
 
 import Forms from './Forms';
 import FormGallery from './FormGallery';
@@ -143,6 +144,8 @@ const DataCollection = ({ navigation }) => {
                 </View>
               </View>
               <View style={styles.horizontalLine} /> */}
+                <MapView />
+
                 <View style={styles.screenFlexRowWrap}>
                   <View style={styles.cardContainer}>
                     <Card style={styles.cardSmallStyle} onPress={() => navigateToNewRecord()}>

package.json

@@ -71,7 +71,8 @@
     "react-redux": "7.2.0",
     "redux": "4.0.5",
     "redux-actions": "2.6.5",
-    "yup": "0.29.3"
+    "yup": "0.29.3",
+    "react-native-maps": "0.27.1"
   },
   "devDependencies": {
     "@babel/core": "7.10.2",