simplify keyboard padding system on dialog

This commit is contained in:
Samuel Newman
2025-04-16 16:35:33 +03:00
parent fa0b1bc1bb
commit a5a2cef15d
+16 -19
View File
@@ -11,7 +11,7 @@ import {
} from 'react-native'
import {
KeyboardAwareScrollView,
useKeyboardHandler,
type KeyboardAwareScrollViewProps,
} from 'react-native-keyboard-controller'
import {runOnJS} from 'react-native-reanimated'
import {type ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/hook/commonTypes'
@@ -20,6 +20,7 @@ import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useEnableKeyboardController} from '#/lib/hooks/useEnableKeyboardController'
import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
import {ScrollProvider} from '#/lib/ScrollContext'
import {logger} from '#/logger'
import {isAndroid, isIOS} from '#/platform/detection'
@@ -197,8 +198,14 @@ export function Inner({children, style, header}: DialogInnerProps) {
)
}
export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
function ScrollableInner(
export const ScrollableInner = React.forwardRef<
ScrollView,
DialogInnerProps &
Pick<
KeyboardAwareScrollViewProps,
'bottomOffset' | 'enabled' | 'extraKeyboardSpace'
>
>(function ScrollableInner(
{children, contentContainerStyle, header, ...props},
ref,
) {
@@ -207,27 +214,18 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
useEnableKeyboardController(isIOS)
const [keyboardHeight, setKeyboardHeight] = React.useState(0)
useKeyboardHandler(
{
onEnd: e => {
'worklet'
runOnJS(setKeyboardHeight)(e.height)
},
},
[],
)
const keyboardIsVisible = useIsKeyboardVisible({iosUseWillEvents: true})
let paddingBottom = 0
if (isIOS) {
paddingBottom += keyboardHeight / 4
if (keyboardIsVisible) {
paddingBottom += insets.bottom
}
if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
paddingBottom += insets.bottom + tokens.space.md
}
paddingBottom = Math.max(paddingBottom, tokens.space._2xl)
} else {
paddingBottom += keyboardHeight
if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
paddingBottom += insets.top
}
@@ -256,9 +254,9 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
contentContainerStyle,
]}
ref={ref}
bottomOffset={30}
{...props}
bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
bottomOffset={30}
scrollEventThrottle={50}
onScroll={isAndroid ? onScroll : undefined}
keyboardShouldPersistTaps="handled"
@@ -267,8 +265,7 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
{children}
</KeyboardAwareScrollView>
)
},
)
})
export const InnerFlatList = React.forwardRef<
ListMethods,