Custom Markers.js

/* Map.js */ 
calculateAnnotations() {
    const { markers } = this.props;

    const annotations = _.map(markers, marker => {
    
        const markerState = {
            marker,
            animated,
            price: marker.price,
        };
        markersState.push(markerState);

        return {
            ...marker,
            view: (
                <MapView.Marker.Animated
                    key={_.get(marker, 'branch.branch_id')}
                    coordinate={_.pick(marker, 'latitude', 'longitude')}
                    onPress={() => this.onPressMarker(marker, markerState)}
                    style={styles.marker}>
                    <Marker marker={marker} animated={animated}/>
                </MapView.Marker.Animated>
            )
        };
    });

    this.setState({annotations});
}
    
render() {
    const { annotations, region } = this.state;
    
    return (
        <MapView.Animated
            ref="map"
            mapType={"standard"}
            region={region}
            style={styles.map}
            showsUserLocation={true}
            showsCompass={false}
            rotateEnabled={false}
            toolbarEnabled={false}
            onRegionChange={this.throttledOnRegionChange}
            onRegionChangeComplete={this.onRegionChangeComplete} >
            {annotations && annotations.map((annotation, i) => annotation.view)}
        </MapView.Animated>
    );
}

/* Marker.js */ 

render() {
    const { marker } = this.props;

    let imageStyle = [styles.image, this.animatedStyles.image];

    return (
        <View>
            <Animated.Image
                style={circleStyle}
                source={this.getCircleImage(marker.color)}
            />
            <Text style={styles.label}>{marker.text}</Text>
        </View>
    );
}