zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Composer - make bottom border more consistent when typing (#4343) 

* floor values

* fix last line being obscured

* Rm unnecessary runOnUI

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
zio/stable
Samuel Newman 2024-06-04 12:55:35 +03:00 committed by GitHub
parent 3e1f076891
commit d032734278
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/view/com/composer/Composer.tsx
View File

@ -20,7 +20,6 @@ import {
} from 'react-native-keyboard-controller' } from 'react-native-keyboard-controller'
import Animated, { import Animated, {
interpolateColor, interpolateColor,
runOnUI,
useAnimatedStyle, useAnimatedStyle,
useSharedValue, useSharedValue,
withTiming, withTiming,
@ -396,7 +395,7 @@ export const ComposePost = observer(function ComposePost({
testID="composePostView" testID="composePostView"
behavior="padding" behavior="padding"
style={a.flex_1} style={a.flex_1}
keyboardVerticalOffset={replyTo ? 110 : isAndroid ? 180 : 140}> keyboardVerticalOffset={replyTo ? 115 : isAndroid ? 180 : 162}>
<View <View
style={[a.flex_1, viewStyles]} style={[a.flex_1, viewStyles]}
aria-modal aria-modal
@ -650,14 +649,14 @@ function useAnimatedBorders() {
'worklet' 'worklet'
if (typeof newContentHeight === 'number') if (typeof newContentHeight === 'number')
contentHeight.value = newContentHeight contentHeight.value = Math.floor(newContentHeight)
if (typeof newContentOffset === 'number') if (typeof newContentOffset === 'number')
contentOffset.value = newContentOffset contentOffset.value = Math.floor(newContentOffset)
if (typeof newScrollViewHeight === 'number') if (typeof newScrollViewHeight === 'number')
scrollViewHeight.value = newScrollViewHeight scrollViewHeight.value = Math.floor(newScrollViewHeight)
hasScrolledBottom.value = withTiming( hasScrolledBottom.value = withTiming(
contentHeight.value - contentOffset.value >= scrollViewHeight.value contentHeight.value - contentOffset.value - 5 > scrollViewHeight.value
? 1 ? 1
: 0, : 0,
) )
@ -667,9 +666,8 @@ function useAnimatedBorders() {
const scrollHandler = useAnimatedScrollHandler({ const scrollHandler = useAnimatedScrollHandler({
onScroll: event => { onScroll: event => {
'worklet'
hasScrolledTop.value = withTiming(event.contentOffset.y > 0 ? 1 : 0) hasScrolledTop.value = withTiming(event.contentOffset.y > 0 ? 1 : 0)
// already on UI thread
showHideBottomBorder({ showHideBottomBorder({
newContentOffset: event.contentOffset.y, newContentOffset: event.contentOffset.y,
newContentHeight: event.contentSize.height, newContentHeight: event.contentSize.height,
@ -680,7 +678,8 @@ function useAnimatedBorders() {
const onScrollViewContentSizeChange = useCallback( const onScrollViewContentSizeChange = useCallback(
(_width: number, height: number) => { (_width: number, height: number) => {
runOnUI(showHideBottomBorder)({ 'worklet'
showHideBottomBorder({
newContentHeight: height, newContentHeight: height,
}) })
}, },
@ -689,7 +688,8 @@ function useAnimatedBorders() {
const onScrollViewLayout = useCallback( const onScrollViewLayout = useCallback(
(evt: LayoutChangeEvent) => { (evt: LayoutChangeEvent) => {
runOnUI(showHideBottomBorder)({ 'worklet'
showHideBottomBorder({
newScrollViewHeight: evt.nativeEvent.layout.height, newScrollViewHeight: evt.nativeEvent.layout.height,
}) })
}, },