ilink-world/screens/home/IMap.js

import React, {Component} from 'react';
import MapView from "react-native-maps"
import PropTypes from 'prop-types';
import {StyleSheet, View} from 'react-native';
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import IMarker from "./IMarker";
import I18n from "react-native-i18n";
import MapViewDirections from 'react-native-maps-directions';
import {IlinkEmitter} from "./../../utils/events";

const theme = require("../../utils/theme");

const API_KEY = "AIzaSyBUQoQYY31-S3DPp7aRRIAjEda8T2pZvJE";
const mnetwork = require('./../../datas/img/png/home_network.png');
const othernetwork = require('./../../datas/img/png/other_net.png');


class IMap extends Component {
    static propTypes = {
        markers: PropTypes.array,
        map: PropTypes.object,
        network: PropTypes.object,
        myNetwork: PropTypes.object,
        selectedMarker: PropTypes.object,
        myPosition: PropTypes.object,
        onMarkerClick: PropTypes.func,
        initialRegion: PropTypes.object,
        typeMap: PropTypes.string,
        needRoad: PropTypes.bool,
        isNeedUserFocus: PropTypes.bool,
        onNeedRoadReady: PropTypes.func,
        onNeedRoadError: PropTypes.func,
        onMapReady: PropTypes.func,
        onLayout: PropTypes.func
    };

    static defaultProps = {
        isNeedUserFocus: false
    };

    constructor(props) {
        super(props)
        this.state = {
            markers: [],
            roadReady: false,
            isNeedUserFocus: false,
            positionMarkerText: I18n.t("YOUR_THERE")
        }
        IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
    }

    getPositionMarkerText() {
        let currentLanguage = I18n.currentLocale();
        let myPositionMarkerText = null;
        switch (currentLanguage) {
            case "fr":
                myPositionMarkerText = "Vous êtes ici";
                break;

            case "en":
                myPositionMarkerText = "You are here";
                break;

            default:
                myPositionMarkerText = I18n.t("YOUR_THERE")
                break;

        }

        return myPositionMarkerText;
    }

    updateLangue() {
        //Alert.alert("Langue", I18n.currentLocale(), [{ text: "Ok", onPress: () => { } }]);
        this.setState({positionMarkerText: this.getPositionMarkerText()})
    }

    mapRef = (ref) => {
        this.mapview = ref
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.positionMarkerText !== this.state.positionMarkerText) {
            this.forceUpdate();
        }
    }

    getMapRef = () => this.mapview

    componentWillReceiveProps(nextProps, nextContext) {
        const markers = this.state.markers
        const newmarkers = nextProps.markers
        if (markers.length <= 0)
            this.setState({markers: newmarkers})
        else if (markers.length !== newmarkers) {
            this.setState({markers: newmarkers})
        }
        this.setState({isNeedUserFocus: nextProps.isNeedUserFocus})
    }

    render() {
        const {markers, initialRegion, myPosition, myNetwork, typeMap, selectedMarker} = this.props
        if (initialRegion !== null && myNetwork !== null)
            return (
                <View style={styles.container}>
                    <MapView
                        style={{flex: 1}}
                        initialRegion={initialRegion}
                        mapType={typeMap}
                        ref={(re) => this.mapview = re}
                        onMapReady={this.props.onMapReady}
                        onLayout={this.props.onLayout}
                        onRegionChangeComplete={(re) => {
                            this.onRegionChangeOver(re)
                        }}>
                        {this.state.markers.map((item, index) => {
                            return (
                                <IMarker
                                    isUser={false}
                                    title={item.lastname}
                                    isSelected={(selectedMarker && selectedMarker.id === item.id)}
                                    data={item}
                                    onPress={(e, marker) => this.props.onMarkerClick(e, marker)}
                                    network={myNetwork}
                                />)
                        })}
                        {this.renderMyPosition()}
                        {this.makeDirection()}

                    </MapView>
                </View>)
        else return (<View/>)
    }

    focusToUser() {
        this.setState({isNeedUserFocus: true})
    }

    closeUserFocus() {
        this.setState({isNeedUserFocus: false})
    }

    onRegionChangeOver(region) {

    }

    makeDirection() {
        let {myPosition, selectedMarker, needRoad} = this.props
        if (myPosition !== null && selectedMarker !== null && selectedMarker !== undefined && myPosition !== undefined && needRoad) {
            setTimeout(() => {
                if (!this.state.roadReady) {
                    this.setState({roadReady: true})
                    this.props.onNeedRoadError()
                }
            }, 10000)

            return (<MapViewDirections
                origin={myPosition}
                destination={selectedMarker}
                apikey={API_KEY}
                strokeWidth={3}
                onReady={(data) => {
                    this.setState({roadReady: true})
                    this.props.onNeedRoadReady(data)
                }
                }
                onError={() => {
                    this.setState({roadReady: true})
                    this.props.onNeedRoadError()
                }
                }
                strokeColor={theme.primary}
            />)
        }
    }

    renderMyPosition() {
        const {myPosition, myNetwork} = this.props
        if (myPosition != null) {
            return (<IMarker
                isUser={true}
                lang={this.props.lang}
                isNeedFocus={this.state.isNeedUserFocus}
                title={this.state.positionMarkerText}
                data={{
                    longitude: myPosition.longitude,
                    latitude: myPosition.latitude
                }}
            />)
        }
    }
}

export default IMap;
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF',
    },
    myClusterTextStyle: {
        color: "white"
    },
    myClusterStyle: {
        backgroundColor: theme.accent,
        height: 32,
        justifyContent: 'center',
        alignItems: 'center',
        width: 32,
        borderRadius: 16
    },
    rowContainer: {
        height: 52,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    iconContainer: {
        marginRight: 16,
    },
    mapmarker: {
        width: 52,
        height: 52,
    },
    slidingup: {
        backgroundColor: "transparent",
        position: "absolute",
        height: 300,
        bottom: 0,
        right: 35,
        zIndex: 1
    },
    panel: {
        flex: 1,
        backgroundColor: 'white',
        position: 'relative'
    },
    panelHeader: {
        height: 120,
        backgroundColor: '#b197fc',
        alignItems: 'center',
        justifyContent: 'center'
    },
    favoriteIcon: {
        left: responsiveWidth(75),
        backgroundColor: theme.primary,
        width: 64,
        justifyContent: 'center',
        alignContent: 'center',
        bottom: -64,
        position: 'absolute',
        height: 64,
        padding: 8,
        zIndex: 1,
        borderRadius: 32,
    },
    hambuger: {},
    topBar: {
        position: 'absolute',
        alignSelf: 'center',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: responsiveHeight(4),
        width: responsiveWidth(95),

    },
    searchInput: {
        width: responsiveWidth(70),
        fontSize: 14
    },
    search: {
        width: responsiveWidth(70),
        height: responsiveHeight(10),
        backgroundColor: '#00000000',


    },

    map: {
        width: responsiveWidth(100),
        height: responsiveHeight(100),
    },
    backgroundd_drawer: {
        backgroundColor: '#000',
    },
    cardsearch: {
        width: responsiveWidth(90),
        height: responsiveHeight(10),
        position: 'absolute',
        alignSelf: 'center',
        marginTop: 5,

    },
    actionButtonIcon: {
        fontSize: 20,
        height: 22,

        color: 'white',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});