Hi @adamjnav,
Sure I can!
I’ve left out the styling code as it all works, just not in production.
Map
import React, {Component} from 'react';
import {ImageBackground, Linking, StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native';
import {MapView, Permissions, SQLite} from 'expo';
import {MaterialIcons} from '@expo/vector-icons';
import PageBreak from './../../Components/PageBreak';
import colors from "../../Styles/colors";
import mainStyles from "../../Styles/styles";
import dimensions from "../../Styles/dimensions";
const db = SQLite.openDatabase('xxx.db');
export default class xxx extends Component {
state = {
isPermissionGranted: false,
newTitle: '',
newMessage: '',
region: {
latitude: 0,
longitude: 0,
latitudeDelta: 0.005,
longitudeDelta: 0.005,
},
markers: [],
selectedMarker: {},
error: null,
isFormHidden: true,
isCalloutHidden: true,
};
// Get current location on page load
componentDidMount() {
this.checkLocationPermission();
}
// Check for permission to use the device's location
checkLocationPermission = () => {
Permissions.askAsync(Permissions.LOCATION)
.then((response) => {
if (response.status === 'granted') {
this.getLocation();
this.setState({isPermissionGranted: true});
} else {
this.setState({isPermissionGranted: false});
}
})
.catch((error) => {
console.log('Map component location permission error: ', error);
})
};
getLocation() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
region: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: 0.005,
longitudeDelta: 0.005,
},
error: null,
});
},
(error) => this.setState({error: error.message}),
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
);
// Get markers from database
this.getMarkersFromDB();
}
// Get all markers from the database and add the to the state
getMarkersFromDB() {
db.transaction(tx => {
tx.executeSql('select * from xxx', [], (_, {rows}) => {
// console.log('DTT rows: ', rows._array);
const dbRows = rows._array;
const markersArray = [];
this.setState({markers: []});
// Map over the dbRows, creating a marker for each row
// Push the row to the markers state
dbRows.map((row) => {
let marker = {
marker: {
id: 0,
title: '',
message: '',
latLng: {
latitude: 0,
longitude: 0,
},
}
};
marker.marker.id = row.id;
marker.marker.title = row.title;
marker.marker.message = row.message;
marker.marker.latLng.latitude = row.latitude;
marker.marker.latLng.longitude = row.longitude;
markersArray.push(marker.marker);
});
this.setState({markers: markersArray});
});
});
};
render() {
return (
<ImageBackground source={require('../../Assets/images/background.png')}
style={{width: '100%', height: '100%'}}>
<View style={[{flex: 1}, mainStyles.pageColour]}>
{this.state.isPermissionGranted ?
<View style={{flex: 1}}>
{/***** Map *****/}
<MapView
style={{flex: 1}}
initialRegion={{
latitude: this.state.region.latitude,
longitude: this.state.region.longitude,
latitudeDelta: this.state.region.latitudeDelta,
longitudeDelta: this.state.region.longitudeDelta,
}}
showsUserLocation={true}
showsMyLocationButton={true}
showsScale={true}
loadingEnabled={true}
onPress={() => this.toggleCalloutVisibility('map')}>
{/***** Marker *****/}
{/*Render the list of Markers if there are any, click to open the Callout*/}
{this.state.markers.map(marker => (
<MapView.Marker
key={marker.id}
identifier={`${marker.id}`}
coordinate={marker.latLng}
title={marker.title}
description={marker.message}
draggable={true}
onPress={() => this.toggleCalloutVisibility('marker', marker)}>
<MapView.Callout tooltip={true}>
<View style={styles.calloutContainer}>
<Text style={styles.calloutTitle}>{marker.title}</Text>
<Text>{marker.message}</Text>
<PageBreak/>
<Text style={styles.latLngText}>Lat: {marker.latLng.latitude}</Text>
<Text style={styles.latLngText}>Lng: {marker.latLng.longitude}</Text>
</View>
</MapView.Callout>
</MapView.Marker>
))}
</MapView>
</View>
:
<View style={styles.permissionContainer}>
<Text style={[mainStyles.smallText, styles.permissionText]}>
You need to grant location access to enable the Map</Text>
</View>
}
</View>
</ImageBackground>
);
}
}
App.json
{
"expo": {
"name": "xxx",
"icon": "./App/Assets/images/xxx.png",
"orientation": "portrait",
"version": "0.3",
"sdkVersion": "32.0.0",
"android": {
"package": "com.xxx.xxx",
"versionCode": 3,
"config": {
"googleMaps": {
"apiKey": "myApiKey"
}
}
},
"ios": {
"bundleIdentifier": "com.xxx.xxx",
"infoPlist": {
"NSLocationWhenInUseUsageDescription": "This app uses your location for xxx"
}
}
}
}