[CLOSES #560] Add logic to make sure that if one card has a tooltip then another shouldn't be opened

src/screens/UserAAuthorizedScreens/ClimateFeedScreen.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native';
+import { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, Animated, Dimensions, FlatList, StyleSheet, View } from 'react-native';
 
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { ClimateFeedStackParams } from 'src/navigation/Stacks/ClimateFeedStack';
@@ -9,13 +9,26 @@ import ClimateEffect from 'src/types/ClimateEffect';
 import { CmTypography, Screen, Content, Section } from '@shared/components';
 import { ClimateFeedCard } from '@features/climate-feed/components';
 import { useAppSelector } from 'src/store/hooks';
+import { useCmTooltip } from 'src/shared/hooks';
 
 type Props = NativeStackScreenProps<ClimateFeedStackParams, 'ClimateFeedScreen'>;
 
 function ClimateFeedScreen({ navigation }: Props) {
   const apiClient = useApiClient();
   const sessionId = useAppSelector((state) => state.auth.sessionId);
   const [climateFeed, setClimateFeed] = useState<ClimateEffect[]>();
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const { fadeOut } = useCmTooltip(fadeAnim);
+
+  const handleScroll = (event: { nativeEvent: { contentOffset: { y: number } } }) => {
+    // Set the threshold for scrolling
+    const threshold = Dimensions.get('window').height;
+    // Check if the user has scrolled beyond the threshold
+    if (event.nativeEvent.contentOffset.y > threshold) {
+      // Fade out the tooltip
+      fadeOut();
+    }
+  };
 
   function gotoDetailsScreen(climateEffect: ClimateEffect) {
     navigation.navigate('ClimateDetailsScreen', { climateEffect });
@@ -26,20 +39,22 @@ function ClimateFeedScreen({ navigation }: Props) {
   }, [sessionId]);
 
   if (climateFeed === undefined) {
-    return <ActivityIndicator size='large' color='black' style={{ marginTop: 100 }} />;
+    return <ActivityIndicator size="large" color="black" style={{ marginTop: 100 }} />;
   }
 
   return (
     <Screen view="View">
       <Section style={{ paddingVertical: 0 }}>
         <Content style={{ alignItems: 'stretch' }}>
           <FlatList
+            onScroll={handleScroll}
             ListHeaderComponent={
               <>
-                <CmTypography variant='h1' style={styles.heading}>Explore climate change impacts</CmTypography>
-                <CmTypography variant='body' style={styles.text}>
-                  This is your personalized homepage based on your unique climate personality. Check out
-                  these articles to stay informed!
+                <CmTypography variant="h1" style={styles.heading}>
+                  Explore climate change impacts
+                </CmTypography>
+                <CmTypography variant="body" style={styles.text}>
+                  This is your personalized homepage based on your unique climate personality. Check out these articles to stay informed!
                 </CmTypography>
               </>
             }

src/shared/hooks/useCmTooltip.tsx

@@ -40,6 +40,7 @@ function useCmTooltip(fadeAnim: Animated.Value | Animated.ValueXY) {
     activeTooltipIndex,
     toggleTooltip,
     handleCardPress,
+    fadeOut,
   };
 }