ilink-world/screens/home/IMarker.js

import React,{Component,PureComponent} from 'react';
import MapView,{Marker,MarkerAnimated,Callout,AnimatedRegion} from "react-native-maps"
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Image,
    Animated,
    Easing,
    Platform,
    Text,
} 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: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
        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;