Energy tooltip

src/components/effect/AnimatedFlask.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Animated, StyleSheet, View } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useIsFocused } from '@react-navigation/native';

src/components/map/DropyMap.js

@@ -18,6 +18,7 @@ import MapLoadingOverlay from '../overlays/MapLoadingOverlay';
 import DebugText from '../other/DebugText';
 import FadeInWrapper from '../effect/FadeInWrapper';
 import EnergyPopup from '../overlays/EnergyPopup';
+import Storage from '../../utils/storage';
 import EnergyTooltip from './EnergyTooltip';
 import RetrievedDropyMapMarker from './RetrievedDropyMapMarker';
 import Sonar from './Sonar';
@@ -49,6 +50,8 @@ const DropyMap = ({
   const osMap = useRef(null);
   const [mapIsReady, setMapIsReady] = useState(false);
 
+  const [isFirstLaunch, setIsFirstLaunch] = useState(false);
+
   const handleDropyPressed = async (dropy) => {
     try {
       if (dropy == null)
@@ -108,6 +111,15 @@ const DropyMap = ({
     retrievedDropies
   ]);
 
+  useEffect(() => {
+    Storage.getItem('alreadyLaunched').then((value) => {
+      if (value === null) {
+        Storage.setItem('alreadyLaunched', true);
+        setIsFirstLaunch(true);
+      }
+    });
+  }, []);
+
   const setMapCameraPosition = async (forceHeading = false, forceZoom = false) => {
     const currentCamera = await osMap.current?.getMapRef()?.getCamera();
     if (currentCamera == null)
@@ -208,7 +220,7 @@ const DropyMap = ({
 
       <SafeAreaView style={styles.controlsView}>
         <FadeInWrapper visible={!museumVisible}>
-          <EnergyTooltip>
+          <EnergyTooltip isFirstLaunch={isFirstLaunch}>
             <AnimatedFlask />
           </EnergyTooltip>
           <FadeInWrapper visible={currentZoom < Map.MAX_ZOOM - 0.1}>

src/components/map/EnergyTooltip.js

@@ -3,22 +3,15 @@ import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import Styles, { Colors, Fonts } from '../../styles/Styles';
 import useCurrentUser from '../../hooks/useCurrentUser';
-import Storage from '../../utils/storage';
 
-const EnergyTooltip = ({ style, children }) => {
+const EnergyTooltip = ({ style, isFirstLaunch, children }) => {
   const { user } = useCurrentUser();
   const tooltipAnimatedValue = useRef(new Animated.Value(0)).current;
 
   const [isPressed, setIsPressed] = useState(false);
 
-  Storage.getItem('alreadyLaunched').then((value) => {
-    if (value === null) {
-      Storage.setItem('alreadyLaunched', true);
-      setIsPressed(true);
-    }
-  });
-
   useEffect(() => {
+    isFirstLaunch && setIsPressed(true);
     const anim = Animated.timing(tooltipAnimatedValue, {
       toValue: isPressed ? 1 : 0,
       duration: 200,
@@ -32,6 +25,7 @@ const EnergyTooltip = ({ style, children }) => {
     <View style={{ ...Styles.center, ...style }}>
       <Animated.View style={{ ...styles.tooltipContainer, opacity: tooltipAnimatedValue }}>
         <TouchableOpacity
+          activeOpacity={1}
           onPressIn={() => setIsPressed(false)}
         >
           <View style={styles.titleView}>