react-native-maps, rendering dynamic markers post run-time

Question

Delete this question please, someone has helped me on another thread.

I am trying to generate markers at certain times in my app so that it will show a blank map at launch, but then sometime later, markers can show up and disappear at certain times.

My state variables are set up like this:

class Map extends Component {   

state = {
    markers: [{
        key: null,
        contactName: null,
        location: null,
    }]
}

The code I am trying to generate the markers with is as follows:

renderMarker = ({ key, contactName, location }) => {
        console.log('renderMarker: ' + key + ', ' + contactName + ', ' + location);
        return this.state.markers.map(Marker => (
            <MapView.Marker  
                key = { key }
                coordinate = {{ 
                    latitude: location[0],
                    longitude: location[1]
                }}
                //image = { carIcon }
                title = { contactName } />
        ))
}

The console.log in there is generating the correct data, so it is returning for example:

renderMarker: 389djhJHDjdkh392sdk, Steve, -30.498767387,120.4398732

My render function looks like this:

render() {
    return (
    <MapContainer>
        <MapView 
            style = { styles.map }
            region = { this.state.mapRegion }
            showsUserLocation = { true }
            followUserLocation = { true }
            onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }>
        </MapView>    
    </MapContainer>
    )
}

But nothing shows up on the map. I have been scouring the interwebs but I can't find a followable example. Do I need to add something to my render() function to make this work? My thoughts were I won't need to because renderMarker is doing that work.

Any ideas guys?

Dapple

Your render function is not rendering the markers as such? You should have {this.renderMarkers()} inside the render method I believe. See this example github.com/RioBus/react-native-app/blob/… – Southsouthwest