simplify keyboard padding system on dialog
This commit is contained in:
@@ -11,7 +11,7 @@ import {
|
|||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
import {
|
import {
|
||||||
KeyboardAwareScrollView,
|
KeyboardAwareScrollView,
|
||||||
useKeyboardHandler,
|
type KeyboardAwareScrollViewProps,
|
||||||
} from 'react-native-keyboard-controller'
|
} from 'react-native-keyboard-controller'
|
||||||
import {runOnJS} from 'react-native-reanimated'
|
import {runOnJS} from 'react-native-reanimated'
|
||||||
import {type ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/hook/commonTypes'
|
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 {useLingui} from '@lingui/react'
|
||||||
|
|
||||||
import {useEnableKeyboardController} from '#/lib/hooks/useEnableKeyboardController'
|
import {useEnableKeyboardController} from '#/lib/hooks/useEnableKeyboardController'
|
||||||
|
import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
|
||||||
import {ScrollProvider} from '#/lib/ScrollContext'
|
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'
|
||||||
@@ -197,8 +198,14 @@ export function Inner({children, style, header}: DialogInnerProps) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
|
export const ScrollableInner = React.forwardRef<
|
||||||
function ScrollableInner(
|
ScrollView,
|
||||||
|
DialogInnerProps &
|
||||||
|
Pick<
|
||||||
|
KeyboardAwareScrollViewProps,
|
||||||
|
'bottomOffset' | 'enabled' | 'extraKeyboardSpace'
|
||||||
|
>
|
||||||
|
>(function ScrollableInner(
|
||||||
{children, contentContainerStyle, header, ...props},
|
{children, contentContainerStyle, header, ...props},
|
||||||
ref,
|
ref,
|
||||||
) {
|
) {
|
||||||
@@ -207,27 +214,18 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
|
|||||||
|
|
||||||
useEnableKeyboardController(isIOS)
|
useEnableKeyboardController(isIOS)
|
||||||
|
|
||||||
const [keyboardHeight, setKeyboardHeight] = React.useState(0)
|
const keyboardIsVisible = useIsKeyboardVisible({iosUseWillEvents: true})
|
||||||
|
|
||||||
useKeyboardHandler(
|
|
||||||
{
|
|
||||||
onEnd: e => {
|
|
||||||
'worklet'
|
|
||||||
runOnJS(setKeyboardHeight)(e.height)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[],
|
|
||||||
)
|
|
||||||
|
|
||||||
let paddingBottom = 0
|
let paddingBottom = 0
|
||||||
if (isIOS) {
|
if (isIOS) {
|
||||||
paddingBottom += keyboardHeight / 4
|
if (keyboardIsVisible) {
|
||||||
|
paddingBottom += insets.bottom
|
||||||
|
}
|
||||||
if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
|
if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
|
||||||
paddingBottom += insets.bottom + tokens.space.md
|
paddingBottom += insets.bottom + tokens.space.md
|
||||||
}
|
}
|
||||||
paddingBottom = Math.max(paddingBottom, tokens.space._2xl)
|
paddingBottom = Math.max(paddingBottom, tokens.space._2xl)
|
||||||
} else {
|
} else {
|
||||||
paddingBottom += keyboardHeight
|
|
||||||
if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
|
if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
|
||||||
paddingBottom += insets.top
|
paddingBottom += insets.top
|
||||||
}
|
}
|
||||||
@@ -256,9 +254,9 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
|
|||||||
contentContainerStyle,
|
contentContainerStyle,
|
||||||
]}
|
]}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
bottomOffset={30}
|
||||||
{...props}
|
{...props}
|
||||||
bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
|
bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
|
||||||
bottomOffset={30}
|
|
||||||
scrollEventThrottle={50}
|
scrollEventThrottle={50}
|
||||||
onScroll={isAndroid ? onScroll : undefined}
|
onScroll={isAndroid ? onScroll : undefined}
|
||||||
keyboardShouldPersistTaps="handled"
|
keyboardShouldPersistTaps="handled"
|
||||||
@@ -267,8 +265,7 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
|
|||||||
{children}
|
{children}
|
||||||
</KeyboardAwareScrollView>
|
</KeyboardAwareScrollView>
|
||||||
)
|
)
|
||||||
},
|
})
|
||||||
)
|
|
||||||
|
|
||||||
export const InnerFlatList = React.forwardRef<
|
export const InnerFlatList = React.forwardRef<
|
||||||
ListMethods,
|
ListMethods,
|
||||||
|
|||||||
Reference in New Issue
Block a user