From 0262ed11ea95269c80598c5150e49978a027ee0b Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Thu, 25 May 2023 00:10:48 -0500 Subject: [PATCH] Fix the 'dancing header' problem on web --- src/lib/hooks/useOnMainScroll.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/lib/hooks/useOnMainScroll.ts b/src/lib/hooks/useOnMainScroll.ts index 782c4704..12e42aca 100644 --- a/src/lib/hooks/useOnMainScroll.ts +++ b/src/lib/hooks/useOnMainScroll.ts @@ -2,6 +2,9 @@ import {useState, useCallback, useRef} from 'react' import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native' import {RootStoreModel} from 'state/index' import {s} from 'lib/styles' +import {isDesktopWeb} from 'platform/detection' + +const DY_LIMIT = isDesktopWeb ? 30 : 10 export type OnScrollCb = ( event: NativeSyntheticEvent, @@ -20,9 +23,12 @@ export function useOnMainScroll( const dy = y - (lastY.current || 0) lastY.current = y - if (!store.shell.minimalShellMode && y > 10 && dy > 10) { + if (!store.shell.minimalShellMode && y > 10 && dy > DY_LIMIT) { store.shell.setMinimalShellMode(true) - } else if (store.shell.minimalShellMode && (y <= 10 || dy < -10)) { + } else if ( + store.shell.minimalShellMode && + (y <= 10 || dy < DY_LIMIT * -1) + ) { store.shell.setMinimalShellMode(false) }