Hey!
It is really hard to track down the cause of this problem because it only happens in the standalone android app.
I have a state ‘map’ that contains a <MapView>. While creating the ‘map’ variable that finally sets the ‘map’ state, I use a ‘marker’ state to insert markers:
let map = null;
let markerElement = this.state.marker;
map =
(
<View>
<MapView
style={styles.partnerDetailMap}
initialRegion={{
latitude: lat,
longitude: long,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
{markerElement}
</MapView>
</View>
);
this.setState({map});
I made sure that this.state.marker is set before the map initialization. Because of this, the variable markerElement is not null, even in the standalone app.
However, the markers are not displayed in the standalone app, while everything is working fine in the expo app (both on android and iOS).
For reference, here is the function for creating the marker:
_insertMarker = async () => {
let markerContainer = [];
let marker = [];
let thisVar = this;
for (let i = 0; i < this.state.partnerPositions.length; i++) {
let markerColor = this.state.markerFarbe;
if (this.state.partnerPositions[i][8] == "Blabla") {
markerColor = this.state.markerFarbeBlabla;
}
let aktuelleMarkerReferenz = null;
let aktuelleMarkerID = this.state.partnerPositions[i][9];
let lat = Number(this.state.partnerPositions[i][0]);
let long = Number(this.state.partnerPositions[i][1]);
if (!isNaN(lat) && !isNaN(long)) {
console.log(lat+' '+long);
if (lat != 0 && long != 0) {
marker.push(
<Marker
coordinate={{
latitude: Number(lat),
longitude: Number(long),
}}
key={i+'-'+timestamp}
pinColor={markerColor}
ref={marker => (markers[aktuelleMarkerID] = marker)}
>
<Callout onPress={() => this._callShowDirections(lat, long)}>
<View>
<Text style={styles.mapPartnerCalloutTitel}>{this.state.partnerPositions[i][2]}</Text>
<Text style={styles.mapPartnerCalloutKategorie}>{this.state.partnerPositions[i][3]}</Text>
<Text style={styles.mapPartnerCalloutAnschrift}>{this.state.partnerPositions[i][4]} {this.state.partnerPositions[i][5]}</Text>
<Text style={styles.mapPartnerCalloutAnschrift}>{this.state.partnerPositions[i][6]} {this.state.partnerPositions[i][7]}</Text>
<View style={styles.mapPartnerCalloutNavigieren}>
<Button title="Navigation starten" onPress={() => null} />
</View>
</View>
</Callout>
</Marker>
);
}
}
}
markerContainer.push(<View key={'1-'+timestamp}>{marker}</View>);
this.setState({marker: markerContainer}, function() {
this._getSinglePartnerFromDB(); // This function contains above code for creating the map. I made sure that this.state.marker is set.
});
}
Any idea what I’m doing wrong and why it is working perfectly fine while debugging? API key for Google Maps is set.
Thank you! I’m starting to get insane because of this 