#6861: Use available space to make focus on Composer TextInput easier (copy) (#7836)

+14 -22

src/view/com/composer/Composer.tsx

··· 657 657 ref={scrollViewRef} 658 658 layout={native(LinearTransition)} 659 659 onScroll={scrollHandler} 660 + contentContainerStyle={a.flex_grow} 660 661 style={a.flex_1} 661 662 keyboardShouldPersistTaps="always" 662 663 onContentSizeChange={onScrollViewContentSizeChange} ··· 795 796 ) 796 797 797 798 return ( 798 - <View style={[styles.post, !isActive && styles.inactivePost]}> 799 - <View 800 - style={[ 801 - styles.textInputLayout, 802 - isNative && styles.textInputLayoutMobile, 803 - ]}> 799 + <View 800 + style={[ 801 + a.mx_lg, 802 + !isActive && styles.inactivePost, 803 + isTextOnly && isNative && a.flex_grow, 804 + ]}> 805 + <View style={[a.flex_row, isNative && a.flex_1]}> 804 806 <UserAvatar 805 807 avatar={currentProfile?.avatar} 806 808 size={50} 807 809 type={currentProfile?.associated?.labeler ? 'labeler' : 'user'} 810 + style={[a.mt_xs]} 808 811 /> 809 812 <TextInput 810 813 ref={textInput} 814 + style={[a.pt_xs]} 811 815 richtext={richtext} 812 816 placeholder={selectTextInputPlaceholder} 813 817 autoFocus ··· 1077 1081 </Animated.View> 1078 1082 )} 1079 1083 </LayoutAnimationConfig> 1080 - 1081 - <View style={!video ? [a.mt_md] : []}> 1082 - {embed.quote?.uri ? ( 1084 + {embed.quote?.uri ? ( 1085 + <View style={!video ? [a.mt_md] : []}> 1083 1086 <View style={[s.mt5, s.mb2, isWeb && s.mb10]}> 1084 1087 <View style={{pointerEvents: 'none'}}> 1085 1088 <LazyQuoteEmbed uri={embed.quote.uri} /> ··· 1088 1091 <QuoteX onRemove={() => dispatch({type: 'embed_remove_quote'})} /> 1089 1092 )} 1090 1093 </View> 1091 - ) : null} 1092 - </View> 1094 + </View> 1095 + ) : null} 1093 1096 </> 1094 1097 ) 1095 1098 } ··· 1469 1472 marginLeft: 12, 1470 1473 }, 1471 1474 stickyFooterWeb: { 1472 - // @ts-ignore web-only 1473 1475 position: 'sticky', 1474 1476 bottom: 0, 1475 1477 }, ··· 1503 1505 justifyContent: 'center', 1504 1506 marginRight: 5, 1505 1507 }, 1506 - post: { 1507 - marginHorizontal: 16, 1508 - }, 1509 1508 inactivePost: { 1510 1509 opacity: 0.5, 1511 - }, 1512 - textInputLayout: { 1513 - flexDirection: 'row', 1514 - paddingTop: 4, 1515 - }, 1516 - textInputLayoutMobile: { 1517 - flex: 1, 1518 1510 }, 1519 1511 addExtLinkBtn: { 1520 1512 borderWidth: 1,

+4 -2

src/view/com/composer/text-input/TextInput.tsx

··· 249 249 multiline 250 250 scrollEnabled={false} 251 251 numberOfLines={2} 252 + {...props} 252 253 style={[ 253 254 inputTextStyle, 254 255 a.w_full, 256 + a.h_full, 255 257 { 256 258 textAlignVertical: 'top', 257 259 minHeight: 60, ··· 261 263 borderWidth: 1, 262 264 borderColor: 'transparent', 263 265 }, 264 - ]} 265 - {...props}> 266 + props.style, 267 + ]}> 266 268 {textDecorated} 267 269 </PasteInput> 268 270 <Autocomplete

+22 -3

src/view/com/util/UserAvatar.tsx

··· 1 1 import React, {memo, useMemo} from 'react' 2 - import {Image, Pressable, StyleSheet, View} from 'react-native' 2 + import { 3 + Image, 4 + Pressable, 5 + StyleProp, 6 + StyleSheet, 7 + View, 8 + ViewStyle, 9 + } from 'react-native' 3 10 import {Image as RNImage} from 'react-native-image-crop-picker' 4 11 import Svg, {Circle, Path, Rect} from 'react-native-svg' 5 12 import {ModerationUI} from '@atproto/api' ··· 48 55 moderation?: ModerationUI 49 56 usePlainRNImage?: boolean 50 57 onLoad?: () => void 58 + style?: StyleProp<ViewStyle> 51 59 } 52 60 53 61 interface EditableUserAvatarProps extends BaseUserAvatarProps { ··· 180 188 moderation, 181 189 usePlainRNImage = false, 182 190 onLoad, 191 + style, 183 192 }: UserAvatarProps): React.ReactNode => { 184 193 const pal = usePalette('default') 185 194 const backgroundColor = pal.colors.backgroundLight ··· 217 226 ) 218 227 }, [moderation?.alert, size, pal]) 219 228 229 + const containerStyle = useMemo(() => { 230 + return [ 231 + { 232 + width: size, 233 + height: size, 234 + }, 235 + style, 236 + ] 237 + }, [size, style]) 238 + 220 239 return avatar && 221 240 !((moderation?.blur && isAndroid) /* android crashes with blur */) ? ( 222 - <View style={{width: size, height: size}}> 241 + <View style={containerStyle}> 223 242 {usePlainRNImage ? ( 224 243 <Image 225 244 accessibilityIgnoresInvertColors ··· 254 273 {alert} 255 274 </View> 256 275 ) : ( 257 - <View style={{width: size, height: size}}> 276 + <View style={containerStyle}> 258 277 <DefaultAvatar type={type} shape={finalShape} size={size} /> 259 278 {alert} 260 279 </View>

Configure Feed

Configure Feed