Fix dragging up in flat list dialogs on Android (#5817)

This commit is contained in:
Hailey
2024-10-17 14:28:38 -07:00
committed by GitHub
parent 92ef756943
commit fd2e94f353
+32 -11
View File
@@ -15,10 +15,12 @@ import {
useKeyboardHandler, useKeyboardHandler,
} from 'react-native-keyboard-controller' } from 'react-native-keyboard-controller'
import {runOnJS} from 'react-native-reanimated' import {runOnJS} from 'react-native-reanimated'
import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/reanimated2/hook/commonTypes'
import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {ScrollProvider} from '#/lib/ScrollContext'
import {logger} from '#/logger' import {logger} from '#/logger'
import {isAndroid, isIOS} from '#/platform/detection' import {isAndroid, isIOS} from '#/platform/detection'
import {useA11y} from '#/state/a11y' import {useA11y} from '#/state/a11y'
@@ -228,6 +230,9 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
nativeSnapPoint === BottomSheetSnapPoint.Full ? fullPadding : basePading nativeSnapPoint === BottomSheetSnapPoint.Full ? fullPadding : basePading
const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => { const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
if (!isAndroid) {
return
}
const {contentOffset} = e.nativeEvent const {contentOffset} = e.nativeEvent
if (contentOffset.y > 0 && !disableDrag) { if (contentOffset.y > 0 && !disableDrag) {
setDisableDrag(true) setDisableDrag(true)
@@ -265,18 +270,34 @@ export const InnerFlatList = React.forwardRef<
ListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>} ListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
>(function InnerFlatList({style, ...props}, ref) { >(function InnerFlatList({style, ...props}, ref) {
const insets = useSafeAreaInsets() const insets = useSafeAreaInsets()
const {nativeSnapPoint} = useDialogContext() const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
const onScroll = (e: ReanimatedScrollEvent) => {
'worklet'
if (!isAndroid) {
return
}
const {contentOffset} = e
if (contentOffset.y > 0 && !disableDrag) {
runOnJS(setDisableDrag)(true)
} else if (contentOffset.y <= 1 && disableDrag) {
runOnJS(setDisableDrag)(false)
}
}
return ( return (
<List <ScrollProvider onScroll={onScroll}>
keyboardShouldPersistTaps="handled" <List
bounces={nativeSnapPoint === BottomSheetSnapPoint.Full} keyboardShouldPersistTaps="handled"
ListFooterComponent={ bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
<View style={{height: insets.bottom + a.pt_5xl.paddingTop}} /> ListFooterComponent={
} <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
ref={ref} }
{...props} ref={ref}
style={[style]} {...props}
/> style={[style]}
/>
</ScrollProvider>
) )
}) })