ilink-world/screens/home/IMarker.js

import React, {PureComponent} from 'react';
import {Marker} from "react-native-maps"
import {Animated, Easing, Image, Platform, StyleSheet, View,} from 'react-native';

const userposi = require('./../../datas/img/png/user_place.png');
const mnetwork = require('./../../datas/img/png/home_network.png');
const othernetwork = require('./../../datas/img/png/other_net.png');

class IMarker extends PureComponent {
    constructor(props) {
        super(props)
        const data = this.props.data
        this.state = {
            animation: new Animated.Value(0),
            subanimation: new Animated.Value(0),
            coordinate: {
                longitude: parseFloat(data.longitude),
                latitude: parseFloat(data.latitude),
            }
        }
    }

    componentWillReceiveProps(nextProps) {
        const duration = 500
        const oldCoord = {
            longitude: parseFloat(this.props.data.longitude),
            latitude: parseFloat(this.props.data.latitude),
        }
        const coord = {
            longitude: parseFloat(nextProps.data.longitude),
            latitude: parseFloat(nextProps.data.latitude),
        }
        if (oldCoord.longitude !== coord.longitude || oldCoord.latitude !== coord.latitude) {
            if (Platform.OS === 'android') {
                if (this.markerRef) {
                    this.markerRef._component.animateMarkerToCoordinate(
                        coord,
                        duration
                    );
                }
            } else {
                /*this.state.coordinate.timing({
                  cord,
                  duration
                }).start();
            */
            }
        }
    }

    startAnimation() {
        const initialValue = 0
        const finalValue = 1
        this.state.animation.setValue(initialValue);  //Step 3
        Animated.timing(     //Step 4
            this.state.animation,
            {
                toValue: finalValue,
                duration: 500,
                easing: Easing.linear(),
                useNativeDriver: true
            }
        ).start();
    }

    handleViewRef = ref => this.view = ref;

    render() {
        const {data, network, isSelected} = this.props;
        const color = isSelected ? "#F48FB1A0" : "transparent"
        const colorSup = isSelected ? "#F06292A0" : "transparent"
        const display = isSelected ? "block" : "none";
        if (data.longitude && data.latitude) {

            return (
                <Marker.Animated
                    coordinate={this.state.coordinate.longitude ? this.state.coordinate : {
                        longitude: data.longitude,
                        latitude: data.latitude
                    }}
                    id={data.id}
                    title={this.props.title}
                    ref={(re) => {
                        this.markerRef = re
                    }}

                    onPress={e => {
                        if (!this.props.isUser)
                            this.props.onPress(data)
                    }}
                    image={this.getImage(data)}
                />

            );
        }
        return (<View/>)

    }

    error(erro) {
        console.log("on error render image");
        console.log(erro);
    }

    componentDidMount() {


    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.props.isUser)
            if (this.markerRef && this.props.isNeedFocus) {
                this.markerRef._component.showCallout()
            }
    }

    getImage(data) {
        const {isUser, network} = this.props;
        if (isUser) {
            return userposi
        } else if (network && data.network === network.name) {
            return mnetwork
        }
        return othernetwork
    }

    getIcon(data) {
        const {isSelected} = this.props
        return isSelected ? (
            <Animated.View style={{
                width: 32,
                height: 32,
                justifyContent: 'center',
                alignItems: 'center',
                borderRadius: 16,
                backgroundColor: isSelected ? "#81D4FAA0" : "transparent",
                transform: [
                    {
                        scaleX: this.animatedValue.interpolate({
                            inputRange: [0, 1],
                            outputRange: [1, 32]
                        })
                    },
                    {
                        scaleY: this.animatedValue.interpolate({
                            inputRange: [0, 1],
                            outputRange: [1, 32]
                        })
                    }
                ]
            }}>
                <Image style={{alignSelf: 'center'}} source={this.getImage(data)}/>
            </Animated.View>
        ) : (<Image style={{alignSelf: 'center'}} source={this.getImage(data)}/>);

    }

    startLoopSelectedAnimation() {
        const initialValue = 0
        const finalValue = 1
        this.state.animation.setValue(initialValue);  //Step 3
        Animated.loop(Animated.timing(     //Step 4
            this.state.subanimation,
            {
                toValue: finalValue,
                duration: 1000,
                easing: Easing.linear(),
                useNativeDriver: true
            }
        ), {iteration: -1}).start();
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: 52,
        height: 52
    },
    ring: {}
});

export default IMarker;