Updated “Reached End” experience

src/ReaderScreen/index.jsx

@@ -44,11 +44,10 @@ const Reader = ({ navigation, route }) => {
   const { title, id, titleUni } = route.params.params || {};
   const [isHeader, toggleHeader] = useState(false);
   const [viewLoaded, toggleViewLoaded] = useState(false);
-  const [currentElementId, setCurrentElementId] = useState(savePosition[id] || null);
   const [shouldNavigateBack, setShouldNavigateBack] = useState(false);
   const [dateKey, setDateKey] = useState(Date.now().toString());
   const [titleText, setTitleText] = useState(null);
-  const currentElementIdRef = useRef(null);
+  const currentElementIdRef = useRef(savePosition[id] || null);
 
   const dispatch = useDispatch();
   const { shabad, isLoading } = useFetchShabad(id);
@@ -58,12 +57,11 @@ const Reader = ({ navigation, route }) => {
 
   // Save element ID when leaving screen or app goes to background
   const saveScrollPosition = useCallback(() => {
-    // Prefer element ID if available, otherwise fall back to currentElementId state
-    const elementIdToSave = currentElementIdRef.current || currentElementId;
+    const elementIdToSave = currentElementIdRef.current;
     if (elementIdToSave) {
       dispatch(actions.setPosition(elementIdToSave, id));
     }
-  }, [dispatch, id, currentElementId]);
+  }, [dispatch, id]);
 
   useEffect(() => {
     dispatch(actions.setCurrentBani({ id, title, titleUni }));
@@ -144,11 +142,9 @@ const Reader = ({ navigation, route }) => {
       const savedElementId = savePosition[id];
       // Check if it's a number (old position format) or string (element ID)
       if (typeof savedElementId === "string") {
-        setCurrentElementId(savedElementId);
         currentElementIdRef.current = savedElementId;
       } else if (typeof savedElementId === "number" && savedElementId > 0.9) {
         // Old position format - reset to null if at end
-        setCurrentElementId(null);
         currentElementIdRef.current = null;
       }
     }
@@ -161,7 +157,7 @@ const Reader = ({ navigation, route }) => {
       navigation.goBack();
     }
     return true;
-  }, [saveScrollPosition]);
+  }, [saveScrollPosition, navigation]);
 
   useBackHandler(handleBackPress);
 
@@ -181,19 +177,13 @@ const Reader = ({ navigation, route }) => {
       } else if (data.includes("scroll-elementId-")) {
         // Capture element ID from WebView scroll events
         const elementId = data.split("scroll-elementId-")[1];
-        setCurrentElementId(elementId);
         currentElementIdRef.current = elementId;
         // Save immediately when element ID changes
         dispatch(actions.setPosition(elementId, id));
         if (shouldNavigateBack) {
           navigation.goBack();
           setShouldNavigateBack(false);
         }
-      } else if (data.includes("reached-end")) {
-        // User reached the end - reset saved position
-        setCurrentElementId(null);
-        currentElementIdRef.current = null;
-        dispatch(actions.setPosition(0, id));
       } else if (data.includes("sequenceString-")) {
         const sequenceStringData = data.split("-")[1];
         dispatch(actions.setBookmarkSequenceString(sequenceStringData));
@@ -210,14 +200,14 @@ const Reader = ({ navigation, route }) => {
 
   const handleLoadEnd = useCallback(() => {
     // Scroll to saved element ID after WebView is fully loaded
-    if (webViewRef.current && currentElementId) {
+    if (webViewRef.current && currentElementIdRef.current) {
       const scrollMessage = {
         action: "scrollToPosition",
-        elementId: currentElementId,
+        elementId: currentElementIdRef.current,
       };
       webViewRef.current.postMessage(JSON.stringify(scrollMessage));
     }
-  }, [currentElementId]);
+  }, []);
 
   const handleError = useCallback((syntheticEvent) => {
     const { nativeEvent } = syntheticEvent;

src/ReaderScreen/utils/gutkaScript.js

@@ -12,6 +12,7 @@ let isScrolling;
 let isManuallyScrolling = false;
 let lastHighlightedElement = null;
 let highlightTimeout = null;
+let hasReachedEnd = false;
 
 const clearScrollTimeout=()=> {
   if (autoScrollTimeout != null) {
@@ -22,12 +23,6 @@ const clearScrollTimeout=()=> {
 
 const scrollFunc=(e)=> {
   const elementId = getTopmostElementId();
-  if (elementId) {
-    window.ReactNativeWebView.postMessage("scroll-elementId-" + elementId);
-  }
-  if (window.scrollY == 0) {
-    window.ReactNativeWebView.postMessage("show");
-  }
 
   // Check if user has reached the end of the document
   const scrollHeight = document.documentElement.scrollHeight;
@@ -36,10 +31,24 @@ const scrollFunc=(e)=> {
   const threshold = 50; // pixels from bottom to consider "at end"
   const isAtEnd = scrollTop + clientHeight >= scrollHeight - threshold;
 
-  if (isAtEnd) {
-    window.ReactNativeWebView.postMessage("reached-end");
+  if (isAtEnd && !hasReachedEnd) {
+    hasReachedEnd = true;
+  } else if (!isAtEnd && hasReachedEnd) {
+    // Reset flag when user scrolls away from the end
+    hasReachedEnd = false;
+  }
+  if (elementId && !hasReachedEnd) {
+    window.ReactNativeWebView.postMessage("scroll-elementId-" + elementId);
+  } else if (hasReachedEnd) {
+    window.ReactNativeWebView.postMessage("scroll-elementId-null");
   }
 
+
+  if (window.scrollY == 0) {
+    window.ReactNativeWebView.postMessage("show");
+  }
+
+
   if (typeof scrollFunc.y == "undefined") {
     scrollFunc.y = window.pageYOffset;
   }