react-native-map-coordinate-picker/lib/module/FakeMarker.js

An animated marker component used for map coordinate picking

import { Animated } from 'react-native';
import React, { useEffect } from 'react'; // @ts-ignore

import styled from 'styled-components/native';

const marker = require('./marker_icon.png');

const Container = styled.View`
  left: 50%;
  margin-left: -24px;
  margin-top: -40px;
  top: 50%;
  align-items: center;
  position: absolute;
`;
const Shadow = styled(Animated.View)`
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 10px;
  margin-top: -5px;
  bottom: 0px;
  background: #444;
  opacity: 0.5;
`;
const MarkerBox = styled(Animated.View)``;
const MarkerImage = styled.Image`
  width: 48px;
  height: 48px;
`;
export const FakeMarker = props => {
  const {
    dragging,
    icon
  } = props;
  const animatedValue = new Animated.Value(0.01);
  useEffect(() => {
    Animated.spring(animatedValue, {
      toValue: dragging ? -1 : 1,
      friction: 3,
      useNativeDriver: true
    }).start(); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dragging]);
  return /*#__PURE__*/React.createElement(Container, props, /*#__PURE__*/React.createElement(Shadow, {
    style: {
      transform: [{
        scale: animatedValue.interpolate({
          inputRange: [-1, 1],
          outputRange: [0.7, 1.5]
        })
      }]
    }
  }), /*#__PURE__*/React.createElement(MarkerBox, {
    style: {
      transform: [{
        translateY: animatedValue.interpolate({
          inputRange: [-1, 1],
          outputRange: [-10, 0]
        })
      }]
    }
  }, /*#__PURE__*/React.createElement(MarkerImage, {
    source: icon || marker
  })));
};
//# sourceMappingURL=FakeMarker.js.map