Fix dragging up in flat list dialogs on Android (#5817)
This commit is contained in:
@@ -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>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user