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;