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, 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;