Merge pull request #4176 from tloncorp/lb/send-scroll-button

native: avoid showing "scroll to" button on message send
tloncorp · Nov 13, 2024 · 4b3d16b · 4b3d16b
2 parents 3f6d0e3 + 77858d1
commit 4b3d16b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/packages/ui/src/components/Channel/Scroller.tsx b/packages/ui/src/components/Channel/Scroller.tsx
@@ -141,8 +141,6 @@ const Scroller = forwardRef(
       [channel]
     );
 
-    const [isAtBottom, setIsAtBottom] = useState(true);
-
     const [hasPressedGoToBottom, setHasPressedGoToBottom] = useState(false);
     const [viewReactionsPost, setViewReactionsPost] = useState<null | db.Post>(
       null
@@ -396,7 +394,8 @@ const Scroller = forwardRef(
       );
     }, [renderEmptyComponentFn]);
 
-    const handleScroll = useScrollDirectionTracker(setIsAtBottom);
+    const [isAtBottom, setIsAtBottom] = useState(true);
+    const handleScroll = useScrollDirectionTracker({ setIsAtBottom });
 
     const scrollIndicatorInsets = useMemo(() => {
       return {

diff --git a/packages/ui/src/contexts/scroll.tsx b/packages/ui/src/contexts/scroll.tsx
@@ -1,4 +1,11 @@
-import React, { createContext, useContext } from 'react';
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { Dimensions, Platform } from 'react-native';
 import {
   Easing,
   type SharedValue,
@@ -18,12 +25,22 @@ export const ScrollContext = createContext<ScrollContextTuple>(INITIAL_VALUE);
 
 export const useScrollContext = () => useContext(ScrollContext);
 
-export const useScrollDirectionTracker = (
-  setIsAtBottom: (isAtBottom: boolean) => void
-) => {
+export const useScrollDirectionTracker = ({
+  setIsAtBottom,
+  atBottomThreshold = 1, // multiple of screen/viewport height
+}: {
+  setIsAtBottom: (isAtBottom: boolean) => void;
+  atBottomThreshold?: number;
+}) => {
   const [scrollValue] = useScrollContext();
   const previousScrollValue = useSharedValue(0);
   const isAtBottom = useSharedValue(true);
+  const viewportHeight = useViewportHeight();
+
+  const AT_BOTTOM_THRESHOLD = useMemo(
+    () => viewportHeight * atBottomThreshold,
+    [viewportHeight, atBottomThreshold]
+  );
 
   return useAnimatedScrollHandler((event) => {
     const { y } = event.contentOffset;
@@ -40,14 +57,30 @@ export const useScrollDirectionTracker = (
 
     previousScrollValue.value = y;
 
-    const atBottom = y <= 0;
+    const atBottom = y <= AT_BOTTOM_THRESHOLD;
     if (isAtBottom.value !== atBottom) {
       isAtBottom.value = atBottom;
       runOnJS(setIsAtBottom)(atBottom);
     }
   });
 };
 
+function useViewportHeight() {
+  const [height, setHeight] = useState(
+    Platform.OS === 'web' ? window.innerHeight : Dimensions.get('window').height
+  );
+
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      const handleResize = () => setHeight(window.innerHeight);
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+    }
+  }, []);
+
+  return height;
+}
+
 export const ScrollContextProvider: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {