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

* 6861: Use available space to make focus on Composer TextInput easier

* Undo web

* bluesky-social#6861: Adjust focus area for native platforms taking Embeds into consideration

* use atoms

* remove empty div

* remove debug atom, whoopsie

---------

Co-authored-by: GrizliK1988 <dgrachikov@gmail.com>
Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

1 files changed, 22 insertions, 3 deletions

diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 934e8f50c..5e66a0974 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 {
@@ -180,6 +188,7 @@ let UserAvatar = ({
   moderation,
   usePlainRNImage = false,
   onLoad,
+  style,
 }: UserAvatarProps): React.ReactNode => {
   const pal = usePalette('default')
   const backgroundColor = pal.colors.backgroundLight
@@ -217,9 +226,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
@@ -254,7 +273,7 @@ let UserAvatar = ({
       {alert}
     </View>
   ) : (
-    <View style={{width: size, height: size}}>
+    <View style={containerStyle}>
       <DefaultAvatar type={type} shape={finalShape} size={size} />
       {alert}
     </View>