Markers do not appear

[edenkras]

I'm trying to show markers on a Mapbox mapview but they do not seem to appear.

The code that generates the markers:

createMarkers = (sellers) => {
    let feature = {
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: this.state.centerCoord
        },
        properties: {
            icon: 'user'
        }
    };
    this.setState({ markers: [feature] });
    sellers.forEach(seller => {
        feature = {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [seller.lng, seller.lat]
            },
            properties: {
                icon: seller.gig_id,
                id: seller.id,
            }
        };
        this.setState({ markers: [...this.state.markers, feature] });
    });
}

The MapView:

<MapboxGL.MapView
    ref={(ref) => this._map = ref}
    style={{ flex: 1 }}
    styleURL={MapboxGL.StyleURL.Street}
    centerCoordinate={this.state.centerCoord}
    minZoomLevel={14}>
    <MapboxGL.ShapeSource
        id='ShapeSource'
        onPress={this._onPress}
        images={this.state.icons}
        shape={{
            type: 'FeatureCollection',
            features: this.state.markers
        }}>
        <MapboxGL.SymbolLayer id='SymbolLayer' style={styles.icon} />
    </MapboxGL.ShapeSource>
</MapboxGL.MapView>

const styles = MapboxGL.StyleSheet.create({
    icon: {
        iconImage: '{icon}',
        iconAllowOverlap: true,
        iconSize: 0.5
    }
});

Where this.state.icons = { [icon_name]: { uri: icon_location } } I expect to see the markers on the map but non of them appear, not even the user icon.

[arnaudambro]

@edenkras is your problem solved ? did you want to add markers dynamically ? did you succeed ?