use real value for footer height

This commit is contained in:
Samuel Newman
2024-11-26 20:01:45 +00:00
parent 708d9e804a
commit ba5cb9e80d
@@ -12,10 +12,8 @@ import Animated, {
useSharedValue, useSharedValue,
} from 'react-native-reanimated' } from 'react-native-reanimated'
import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/hook/commonTypes' import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/hook/commonTypes'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {AppBskyEmbedRecord, AppBskyRichtextFacet, RichText} from '@atproto/api' import {AppBskyEmbedRecord, AppBskyRichtextFacet, RichText} from '@atproto/api'
import {clamp} from '#/lib/numbers'
import {ScrollProvider} from '#/lib/ScrollContext' import {ScrollProvider} from '#/lib/ScrollContext'
import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip' import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip'
import { import {
@@ -29,6 +27,7 @@ import {isConvoActive, useConvoActive} from '#/state/messages/convo'
import {ConvoItem, ConvoStatus} from '#/state/messages/convo/types' import {ConvoItem, ConvoStatus} from '#/state/messages/convo/types'
import {useGetPost} from '#/state/queries/post' import {useGetPost} from '#/state/queries/post'
import {useAgent} from '#/state/session' import {useAgent} from '#/state/session'
import {useShellLayout} from '#/state/shell/shell-layout'
import { import {
EmojiPicker, EmojiPicker,
EmojiPickerState, EmojiPickerState,
@@ -244,8 +243,7 @@ export function MessagesList({
) )
// -- Keyboard animation handling // -- Keyboard animation handling
const {bottom: bottomInset} = useSafeAreaInsets() const {footerHeight} = useShellLayout()
const bottomOffset = isWeb ? 0 : clamp(60 + bottomInset, 60, 75)
const keyboardHeight = useSharedValue(0) const keyboardHeight = useSharedValue(0)
const keyboardIsOpening = useSharedValue(false) const keyboardIsOpening = useSharedValue(false)
@@ -272,27 +270,27 @@ export function MessagesList({
onMove: e => { onMove: e => {
'worklet' 'worklet'
keyboardHeight.set(e.height) keyboardHeight.set(e.height)
if (e.height > bottomOffset) { if (e.height > footerHeight.get()) {
scrollTo(flatListRef, 0, 1e7, false) scrollTo(flatListRef, 0, 1e7, false)
} }
}, },
onInteractive: e => { onInteractive: e => {
'worklet' 'worklet'
keyboardHeight.set(e.height) keyboardHeight.set(e.height)
if (e.height > bottomOffset) { if (e.height > footerHeight.get()) {
scrollTo(flatListRef, 0, 1e7, false) scrollTo(flatListRef, 0, 1e7, false)
} }
}, },
onEnd: e => { onEnd: e => {
'worklet' 'worklet'
keyboardHeight.set(e.height) keyboardHeight.set(e.height)
if (e.height > bottomOffset) { if (e.height > footerHeight.get()) {
scrollTo(flatListRef, 0, 1e7, false) scrollTo(flatListRef, 0, 1e7, false)
} }
keyboardIsOpening.set(false) keyboardIsOpening.set(false)
}, },
}, },
[bottomOffset], [],
) )
const animatedListStyle = useAnimatedStyle(() => ({ const animatedListStyle = useAnimatedStyle(() => ({
@@ -300,7 +298,9 @@ export function MessagesList({
})) }))
const animatedStickyViewStyle = useAnimatedStyle(() => ({ const animatedStickyViewStyle = useAnimatedStyle(() => ({
transform: [{translateY: -Math.max(keyboardHeight.get(), bottomOffset)}], transform: [
{translateY: -Math.max(keyboardHeight.get(), footerHeight.get())},
],
})) }))
// -- Message sending // -- Message sending