This commit is contained in:
Hailey
2024-05-30 09:13:16 -07:00
parent 175627b1e0
commit 48c26b8c75
3 changed files with 206 additions and 203 deletions
@@ -1,31 +0,0 @@
import React from 'react'
import {useKeyboardHandler} from 'react-native-keyboard-controller'
import Animated, {
useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated'
export function KeyboardPadding({maxHeight}: {maxHeight?: number}) {
const keyboardHeight = useSharedValue(0)
useKeyboardHandler(
{
onMove: e => {
'worklet'
if (maxHeight && e.height > maxHeight) {
keyboardHeight.value = maxHeight
} else {
keyboardHeight.value = e.height
}
},
},
[maxHeight],
)
const animatedStyle = useAnimatedStyle(() => ({
height: keyboardHeight.value,
}))
return <Animated.View style={animatedStyle} />
}
+38 -1
View File
@@ -1,3 +1,40 @@
export function KeyboardPadding({maxHeight: _}: {maxHeight?: number}) { import React from 'react'
import {useKeyboardHandler} from 'react-native-keyboard-controller'
import Animated, {
useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated'
import {isAndroid} from 'platform/detection'
export function KeyboardPadding({androidOnly = true}: {androidOnly?: boolean}) {
if (!isAndroid && androidOnly) {
return null return null
}
return <KeyboardPaddingInner />
}
function KeyboardPaddingInner({maxHeight}: {maxHeight?: number}) {
const keyboardHeight = useSharedValue(0)
useKeyboardHandler(
{
onMove: e => {
'worklet'
if (maxHeight && e.height > maxHeight) {
keyboardHeight.value = maxHeight
} else {
keyboardHeight.value = e.height
}
},
},
[maxHeight],
)
const animatedStyle = useAnimatedStyle(() => ({
height: keyboardHeight.value,
}))
return <Animated.View style={animatedStyle} />
} }
+8 -11
View File
@@ -13,10 +13,7 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from 'react-native' } from 'react-native'
import { import {KeyboardStickyView} from 'react-native-keyboard-controller'
KeyboardAvoidingView,
KeyboardStickyView,
} from 'react-native-keyboard-controller'
import Animated, { import Animated, {
interpolateColor, interpolateColor,
useAnimatedStyle, useAnimatedStyle,
@@ -70,6 +67,7 @@ import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {Button} from '#/components/Button' import {Button} from '#/components/Button'
import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji' import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
import {KeyboardPadding} from '#/components/KeyboardPadding'
import * as Prompt from '#/components/Prompt' import * as Prompt from '#/components/Prompt'
import {QuoteEmbed, QuoteX} from '../util/post-embeds/QuoteEmbed' import {QuoteEmbed, QuoteX} from '../util/post-embeds/QuoteEmbed'
import {Text} from '../util/text/Text' import {Text} from '../util/text/Text'
@@ -401,12 +399,11 @@ export const ComposePost = observer(function ComposePost({
return ( return (
<> <>
<KeyboardAvoidingView <View
testID="composePostView" style={[s.flex1, viewStyles]}
behavior="padding" aria-modal
style={s.flex1} accessibilityViewIsModal
keyboardVerticalOffset={replyTo ? 60 : isAndroid ? 120 : 100}> testID="composePostView">
<View style={[s.flex1, viewStyles]} aria-modal accessibilityViewIsModal>
<Animated.View <Animated.View
style={[ style={[
styles.topbar, styles.topbar,
@@ -568,8 +565,8 @@ export const ComposePost = observer(function ComposePost({
) : undefined} ) : undefined}
</Animated.ScrollView> </Animated.ScrollView>
<SuggestedLanguage text={richtext.text} /> <SuggestedLanguage text={richtext.text} />
<KeyboardPadding androidOnly={false} />
</View> </View>
</KeyboardAvoidingView>
<KeyboardStickyView <KeyboardStickyView
offset={{closed: isIOS ? -insets.bottom : 0, opened: 0}}> offset={{closed: isIOS ? -insets.bottom : 0, opened: 0}}>
{replyTo ? null : ( {replyTo ? null : (