persist header title state for each screen

apps/mobile/src/components/Header/HeaderTitle.js

@@ -8,11 +8,32 @@ import Heading from '../Typography/Heading';
 
 const opacity = new Animated.Value(0);
 
+let scrollPostions = {};
+
 export const HeaderTitle = () => {
   const [state] = useTracked();
   const {colors, headerTextState} = state;
 
   const onScroll = async (y) => {
+    if (typeof y !== 'number') {
+      if (y.type === 'back') {
+        scrollPostions[y.name] = null;
+        return;
+      }
+      if (scrollPostions[y.name]) {
+        if (scrollPostions[y.name] > 200) {
+          opacity.setValue(1);
+        } else {
+          scrollPostions[y.name] = 0;
+          opacity.setValue(0);
+        }
+      } else {
+        scrollPostions[y.name] = 0;
+        opacity.setValue(0);
+      }
+      return;
+    }
+
     if (y > 75) {
       let yVal = y - 75;
       o = yVal / 75;
@@ -20,6 +41,8 @@ export const HeaderTitle = () => {
     } else {
       opacity.setValue(0);
     }
+    scrollPostions[headerTextState.heading] = y;
+
   };
 
   useEffect(() => {
@@ -27,7 +50,7 @@ export const HeaderTitle = () => {
     return () => {
       eUnSubscribeEvent(eScrollEvent, onScroll);
     };
-  }, []);
+  }, [headerTextState.heading]);
 
   return (
     <Animated.View