better smooth scrolling
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import {useImperativeHandle, useRef, useState} from 'react'
|
import {useEffect, useImperativeHandle, useRef, useState} from 'react'
|
||||||
import {type TextInput} from 'react-native'
|
import {type TextInput} from 'react-native'
|
||||||
|
|
||||||
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
|
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
|
||||||
@@ -114,6 +114,13 @@ function GifPickerBody({
|
|||||||
void fetchNextPage()
|
void fetchNextPage()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Scroll to top when the effective query/category changes, NOT on every
|
||||||
|
// keystroke. Calling scrollToOffset on the FlatList while its sticky header
|
||||||
|
// holds the focused input blurs that input on web.
|
||||||
|
useEffect(() => {
|
||||||
|
listRef.current?.scrollToOffset({offset: 0, animated: false})
|
||||||
|
}, [effectiveSearch, isRecentsActive])
|
||||||
|
|
||||||
const onClearSearch = () => {
|
const onClearSearch = () => {
|
||||||
textInputRef.current?.clear()
|
textInputRef.current?.clear()
|
||||||
setRawSearch('')
|
setRawSearch('')
|
||||||
@@ -130,12 +137,10 @@ function GifPickerBody({
|
|||||||
|
|
||||||
const onChangeSearch = (text: string) => {
|
const onChangeSearch = (text: string) => {
|
||||||
setRawSearch(text)
|
setRawSearch(text)
|
||||||
listRef.current?.scrollToOffset({offset: 0, animated: false})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectCategory = (category: GifCategory) => {
|
const onSelectCategory = (category: GifCategory) => {
|
||||||
setActiveCategory(category.id)
|
setActiveCategory(category.id)
|
||||||
listRef.current?.scrollToOffset({offset: 0, animated: false})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleSelectGif = (gif: Gif) => {
|
const handleSelectGif = (gif: Gif) => {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import {forwardRef} from 'react'
|
import {forwardRef} from 'react'
|
||||||
import {useWindowDimensions, View} from 'react-native'
|
import {Platform, useWindowDimensions, View} from 'react-native'
|
||||||
|
|
||||||
import {cleanError} from '#/lib/strings/errors'
|
import {cleanError} from '#/lib/strings/errors'
|
||||||
import {type ListMethods} from '#/view/com/util/List'
|
import {type ListMethods} from '#/view/com/util/List'
|
||||||
@@ -75,8 +75,12 @@ export const GifPickerGrid = forwardRef<ListMethods, Props>(
|
|||||||
ListHeaderComponent={<>{header}</>}
|
ListHeaderComponent={<>{header}</>}
|
||||||
stickyHeaderIndices={[0]}
|
stickyHeaderIndices={[0]}
|
||||||
onEndReached={onEndReached}
|
onEndReached={onEndReached}
|
||||||
onEndReachedThreshold={4}
|
onEndReachedThreshold={1}
|
||||||
keyboardDismissMode="on-drag"
|
// On web, "on-drag" blurs the focused input on ANY scroll event,
|
||||||
|
// including programmatic scrolls (e.g., content shrinking when search
|
||||||
|
// results swap in). That breaks search-while-scrolled — the blur fires
|
||||||
|
// mid-typing and subsequent keystrokes go nowhere.
|
||||||
|
keyboardDismissMode={Platform.OS === 'web' ? 'none' : 'on-drag'}
|
||||||
ListFooterComponent={
|
ListFooterComponent={
|
||||||
hasData ? (
|
hasData ? (
|
||||||
<ListFooter
|
<ListFooter
|
||||||
|
|||||||
Reference in New Issue
Block a user