diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index e8fe1a7ce..e80b80449 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -657,6 +657,7 @@ export const ComposePost = ({
ref={scrollViewRef}
layout={native(LinearTransition)}
onScroll={scrollHandler}
+ contentContainerStyle={a.flex_grow}
style={a.flex_1}
keyboardShouldPersistTaps="always"
onContentSizeChange={onScrollViewContentSizeChange}
@@ -795,19 +796,22 @@ let ComposerPost = React.memo(function ComposerPost({
)
return (
- <View style={[styles.post, !isActive && styles.inactivePost]}>
- <View
- style={[
- styles.textInputLayout,
- isNative && styles.textInputLayoutMobile,
- ]}>
+ <View
+ style={[
+ a.mx_lg,
+ !isActive && styles.inactivePost,
+ isTextOnly && isNative && a.flex_grow,
+ ]}>
+ <View style={[a.flex_row, isNative && a.flex_1]}>
<UserAvatar
avatar={currentProfile?.avatar}
size={50}
type={currentProfile?.associated?.labeler ? 'labeler' : 'user'}
+ style={[a.mt_xs]}
/>
<TextInput
ref={textInput}
+ style={[a.pt_xs]}
richtext={richtext}
placeholder={selectTextInputPlaceholder}
autoFocus
@@ -1077,9 +1081,8 @@ function ComposerEmbeds({
</Animated.View>
)}
</LayoutAnimationConfig>
-
- <View style={!video ? [a.mt_md] : []}>
- {embed.quote?.uri ? (
+ {embed.quote?.uri ? (
+ <View style={!video ? [a.mt_md] : []}>
<View style={[s.mt5, s.mb2, isWeb && s.mb10]}>
<View style={{pointerEvents: 'none'}}>
<LazyQuoteEmbed uri={embed.quote.uri} />
@@ -1088,8 +1091,8 @@ function ComposerEmbeds({
<QuoteX onRemove={() => dispatch({type: 'embed_remove_quote'})} />
)}
</View>
- ) : null}
- </View>
+ </View>
+ ) : null}
</>
)
}
@@ -1469,7 +1472,6 @@ const styles = StyleSheet.create({
marginLeft: 12,
},
stickyFooterWeb: {
- // @ts-ignore web-only
position: 'sticky',
bottom: 0,
},
@@ -1503,19 +1505,9 @@ const styles = StyleSheet.create({
justifyContent: 'center',
marginRight: 5,
},
- post: {
- marginHorizontal: 16,
- },
inactivePost: {
opacity: 0.5,
},
- textInputLayout: {
- flexDirection: 'row',
- paddingTop: 4,
- },
- textInputLayoutMobile: {
- flex: 1,
- },
addExtLinkBtn: {
borderWidth: 1,
borderRadius: 24,
diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx
index 55fd3650f..6f5e812ed 100644
--- a/src/view/com/composer/text-input/TextInput.tsx
+++ b/src/view/com/composer/text-input/TextInput.tsx
@@ -249,9 +249,11 @@ export const TextInput = forwardRef(function TextInputImpl(
multiline
scrollEnabled={false}
numberOfLines={2}
+ {...props}
style={[
inputTextStyle,
a.w_full,
+ !autocompletePrefix && a.h_full,
{
textAlignVertical: 'top',
minHeight: 60,
@@ -261,8 +263,8 @@ export const TextInput = forwardRef(function TextInputImpl(
borderWidth: 1,
borderColor: 'transparent',
},
- ]}
- {...props}>
+ props.style,
+ ]}>
{textDecorated}
</PasteInput>
<Autocomplete
diff --git a/src/view/com/composer/text-input/mobile/Autocomplete.tsx b/src/view/com/composer/text-input/mobile/Autocomplete.tsx
index 0fda6843b..5e91ef149 100644
--- a/src/view/com/composer/text-input/mobile/Autocomplete.tsx
+++ b/src/view/com/composer/text-input/mobile/Autocomplete.tsx
@@ -49,7 +49,7 @@ export function Autocomplete({
a.px_sm,
a.py_md,
]}
- key={item.handle}>
+ key={item.did}>
<PressableScale
testID="autocompleteButton"
style={[
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index e0a31c139..20fc1c65d 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -1,5 +1,12 @@
import React, {memo, useMemo} from 'react'
-import {Image, Pressable, StyleSheet, View} from 'react-native'
+import {
+ Image,
+ Pressable,
+ StyleProp,
+ StyleSheet,
+ View,
+ ViewStyle,
+} from 'react-native'
import {Image as RNImage} from 'react-native-image-crop-picker'
import Svg, {Circle, Path, Rect} from 'react-native-svg'
import {ModerationUI} from '@atproto/api'
@@ -48,6 +55,7 @@ interface UserAvatarProps extends BaseUserAvatarProps {
moderation?: ModerationUI
usePlainRNImage?: boolean
onLoad?: () => void
+ style?: StyleProp<ViewStyle>
}
interface EditableUserAvatarProps extends BaseUserAvatarProps {
@@ -181,6 +189,7 @@ let UserAvatar = ({
moderation,
usePlainRNImage = false,
onLoad,
+ style,
}: UserAvatarProps): React.ReactNode => {
const pal = usePalette('default')
const backgroundColor = pal.colors.backgroundLight
@@ -218,9 +227,19 @@ let UserAvatar = ({
)
}, [moderation?.alert, size, pal])
+ const containerStyle = useMemo(() => {
+ return [
+ {
+ width: size,
+ height: size,
+ },
+ style,
+ ]
+ }, [size, style])
+
return avatar &&
!((moderation?.blur && isAndroid) /* android crashes with blur */) ? (
- <View style={{width: size, height: size}}>
+ <View style={containerStyle}>
{usePlainRNImage ? (
<Image
accessibilityIgnoresInvertColors
@@ -249,7 +268,7 @@ let UserAvatar = ({
{alert}
</View>
) : (
- <View style={{width: size, height: size}}>
+ <View style={containerStyle}>
<DefaultAvatar type={type} shape={finalShape} size={size} />
{alert}
</View>
|
