React Native Maps: Markers image doesn't show using Custom Marker in react-native-maps

Question

I\'m using react-native-maps but I faced a problem that after a lot of googling without answer makes me ask it here. I\'m trying to use Custom Marker for the marker

Answer 1

I Had same problem , from github post

using below(MapView , Image) pattern first load problem will still occour

so adopted below solution : trick is to save current selected marker id in redux

class Map extends React.Component {
render() {
    let {region, markers , markerClick} = this.props;
    const normalMarkerImage = require('../../images/normal_marker.png');
    const selectedMarkerImage = require('../../images/selected_marker.png');
    return !isObjectEmpty(region) && !isObjectEmpty(markers) ? (
        
            {markers && markers.length > 0
                ? markers.map((marker, i) => (
                         markerClick(e, marker)}
                            image={
                                this.props.selectedMarker === marker._id
                                    ? selectedMarkerImage
                                    : normalMarkerImage
                            }
                        />
                  ))
                : null}
        
    ) : null;
  }
}

component Function

markerClick = async (event, data) => {
    this.props.dispatch(
        setMarkerIconInRedux(this.state.popover.currentData._id)
    );
};

Action

export const setMarkerIconInRedux = where => {
    return {
        type: 'SET_MARKER_ICON',
        _id: where,
    };
};

Redux

export const currentSelectedMarker = (state = {selectedMarker: ''}, action) => 
{
    if (action.type === 'SET_MARKER_ICON') {
        return {selectedMarker: action._id};
    } else if (action.type === 'REMOVE_MARKER_ICON') {
        return {selectedMarker: ''};
    } else {
        return state;
    }
};