Commit 057ef084 authored by Milan DiGiuseppe's avatar Milan DiGiuseppe

GeoMarker animation WIP

parent dece2182
......@@ -25,6 +25,15 @@
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"stylers": [
......
import React, { useMemo } from 'react';
import React, { useMemo, useRef, useEffect } from 'react';
import { Callout, Marker, LatLng } from 'react-native-maps';
import { View, StyleSheet, ViewStyle } from 'react-native';
import {
View, StyleSheet, ViewStyle, Animated, Vibration,
} from 'react-native';
import { Icon } from 'react-native-elements';
import GeoText from './GeoText';
import theme from '../theme';
import { CacheType } from '../store/caches/CachesState';
import { cacheTypeToColorGradient, cacheTypeToIconName } from '../utils/CacheUtils';
const ANIMATION_DURATION = 250;
const ICON_SIZE = 40;
const BUBBLE_SIZE = 80;
const BORDER_COLOR = theme.colors.black;
const BORDER_WIDTH = 2;
const PIN_HEIGHT_SMALL = 10;
const PIN_HEIGHT_LARGE = 30;
const styles = StyleSheet.create({
bubble: {
height: BUBBLE_SIZE,
width: BUBBLE_SIZE,
// height: BUBBLE_SE,
justifyContent: 'center',
alignItems: 'center',
borderRadius: BUBBLE_SIZE,
......@@ -25,7 +29,7 @@ const styles = StyleSheet.create({
pin: {
alignSelf: 'center',
width: BORDER_WIDTH,
height: 30,
// height: 30,
backgroundColor: BORDER_COLOR,
},
callout: {
......@@ -57,6 +61,7 @@ export const GeoMarkerBubble: React.FC<BubbleProps> = ({ cacheType, style }) =>
interface GeoMarkerProps {
inRange?: boolean; // TODO: make required
location: LatLng;
message?: string;
onPress?: () => void;
......@@ -65,31 +70,84 @@ interface GeoMarkerProps {
}
const GeoMarker: React.FC<GeoMarkerProps> = ({
inRange,
location,
message,
onPress,
identifier,
cacheType = 'Game', // Temporary default
}) => (
<Marker coordinate={location} identifier={identifier} onPress={onPress}>
<View>
<GeoMarkerBubble cacheType={cacheType} />
<View style={styles.pin} />
</View>
{ false && message && onPress && (
<Callout
onPress={onPress}
tooltip={false}
style={styles.callout}
>
<GeoText
text={message}
variant={'text'}
style={{ flex: 1, flexWrap: 'wrap' }}
numberOfLines={3}
/>
</Callout>
)}
</Marker>
);
}) => {
const iconName = useMemo(() => cacheTypeToIconName(cacheType!), [cacheType]);
const iconColor = useMemo(() => cacheTypeToColorGradient(cacheType!)[0], [cacheType]);
const pinHeight = useRef(new Animated.Value(PIN_HEIGHT_SMALL)).current;
const bubbleSize = useRef(new Animated.Value(BUBBLE_SIZE / 2)).current;
useEffect(() => {
Animated.parallel([
Animated.timing(
bubbleSize,
{
toValue: inRange ? BUBBLE_SIZE : BUBBLE_SIZE / 2,
duration: ANIMATION_DURATION,
},
),
Animated.timing(
pinHeight,
{
toValue: inRange ? PIN_HEIGHT_LARGE : PIN_HEIGHT_SMALL,
duration: ANIMATION_DURATION,
},
),
]).start();
}, [pinHeight, bubbleSize, inRange]);
useEffect(() => {
if (inRange) {
Vibration.vibrate(1000);
}
}, [inRange]);
return (
<Marker coordinate={location} identifier={identifier} onPress={onPress}>
<View>
{/* <GeoMarkerBubble cacheType={cacheType} /> */}
<Animated.View style={[
styles.bubble,
{
backgroundColor: iconColor,
width: bubbleSize,
height: bubbleSize,
},
]}
>
<Icon
color={theme.colors.white}
name={iconName}
type={'font-awesome-5'}
size={BUBBLE_SIZE / 4}
/>
</Animated.View>
<Animated.View style={[styles.pin, { height: pinHeight }]} />
</View>
{ false && message && onPress && (
<Callout
onPress={onPress}
tooltip={false}
style={styles.callout}
>
<GeoText
text={message}
variant={'text'}
style={{ flex: 1, flexWrap: 'wrap' }}
numberOfLines={3}
/>
</Callout>
)}
</Marker>
);
};
export default GeoMarker;
import React, { useCallback } from 'react';
import { StyleSheet, View } from 'react-native';
import { StyleSheet, Vibration, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { reverseGeocodeAsync } from 'expo-location';
import { useNavigation } from '@react-navigation/native';
......@@ -44,6 +44,8 @@ const DevScreen: React.FC = () => {
alert(`${name} ${street} ${city} ${region} ${country}`); // eslint-disable-line no-alert
}, []);
const onVibrate = () => Vibration.vibrate(1000);
return (
<View style={styles.fullscreen}>
<GeoButton
......@@ -56,6 +58,11 @@ const DevScreen: React.FC = () => {
onPress={onReverseGeocode}
style={styles.button}
/>
<GeoButton
title={'Vibrate ;)'}
onPress={onVibrate}
style={styles.button}
/>
</View>
);
};
......
......@@ -85,6 +85,9 @@ const DiscoverScreen: React.FC = () => {
setModalOpen(true);
}, [setModalOpen, setCurrCache]);
const [inRange, setInRange] = useState<boolean>(false);
return (
<Drawer
ref={drawerRef}
......@@ -99,6 +102,7 @@ const DiscoverScreen: React.FC = () => {
{discoveredCaches.map((cache) => (
<GeoMarker
key={cache.id}
inRange={inRange}
location={{
latitude: cache.lat,
longitude: cache.lng,
......@@ -143,6 +147,17 @@ const DiscoverScreen: React.FC = () => {
containerStyle={{ margin: 0 }}
/>
</View>
<View style={styles.iconButton}>
<Icon
name={'hand-point-up'}
type={'font-awesome-5'}
raised
onPress={() => setInRange(!inRange)}
color={theme.colors.green}
size={30}
containerStyle={{ margin: 0 }}
/>
</View>
</View>
<CacheFoundModal
show={modalOpen}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment