forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {memo, useCallback, useMemo, useState} from 'react'
2import {
3 Image as RNImage,
4 Pressable,
5 type StyleProp,
6 StyleSheet,
7 View,
8 type ViewStyle,
9} from 'react-native'
10import Svg, {Circle, Path, Rect} from 'react-native-svg'
11import {Image as ExpoImage} from 'expo-image'
12import {type ModerationUI} from '@atproto/api'
13import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
14import {msg, Trans} from '@lingui/macro'
15import {useLingui} from '@lingui/react'
16import {useQueryClient} from '@tanstack/react-query'
17
18import {useHaptics} from '#/lib/haptics'
19import {
20 useCameraPermission,
21 usePhotoLibraryPermission,
22} from '#/lib/hooks/usePermissions'
23import {compressIfNeeded} from '#/lib/media/manip'
24import {openCamera, openCropper, openPicker} from '#/lib/media/picker'
25import {type PickerImage} from '#/lib/media/picker.shared'
26import {makeProfileLink} from '#/lib/routes/links'
27import {sanitizeDisplayName} from '#/lib/strings/display-names'
28import {isCancelledError} from '#/lib/strings/errors'
29import {sanitizeHandle} from '#/lib/strings/handles'
30import {logger} from '#/logger'
31import {
32 type ComposerImage,
33 compressImage,
34 createComposerImage,
35} from '#/state/gallery'
36import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache'
37import {EditImageDialog} from '#/view/com/composer/photos/EditImageDialog'
38import {atoms as a, tokens, useTheme} from '#/alf'
39import {Button} from '#/components/Button'
40import {useDialogControl} from '#/components/Dialog'
41import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'
42import {
43 Camera_Filled_Stroke2_Corner0_Rounded as CameraFilledIcon,
44 Camera_Stroke2_Corner0_Rounded as CameraIcon,
45} from '#/components/icons/Camera'
46import {StreamingLive_Stroke2_Corner0_Rounded as LibraryIcon} from '#/components/icons/StreamingLive'
47import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
48import {Link} from '#/components/Link'
49import {MediaInsetBorder} from '#/components/MediaInsetBorder'
50import * as Menu from '#/components/Menu'
51import {ProfileHoverCard} from '#/components/ProfileHoverCard'
52import {useAnalytics} from '#/analytics'
53import {IS_ANDROID, IS_NATIVE, IS_WEB, IS_WEB_TOUCH_DEVICE} from '#/env'
54import {useActorStatus} from '#/features/liveNow'
55import {LiveIndicator} from '#/features/liveNow/components/LiveIndicator'
56import {LiveStatusDialog} from '#/features/liveNow/components/LiveStatusDialog'
57import type * as bsky from '#/types/bsky'
58
59export type UserAvatarType = 'user' | 'algo' | 'list' | 'labeler'
60
61interface BaseUserAvatarProps {
62 type?: UserAvatarType
63 shape?: 'circle' | 'square'
64 size: number
65 avatar?: string | null
66 live?: boolean
67 hideLiveBadge?: boolean
68}
69
70interface UserAvatarProps extends BaseUserAvatarProps {
71 type: UserAvatarType
72 moderation?: ModerationUI
73 usePlainRNImage?: boolean
74 noBorder?: boolean
75 onLoad?: () => void
76 style?: StyleProp<ViewStyle>
77}
78
79interface EditableUserAvatarProps extends BaseUserAvatarProps {
80 onSelectNewAvatar: (img: PickerImage | null) => void
81}
82
83interface PreviewableUserAvatarProps extends BaseUserAvatarProps {
84 moderation?: ModerationUI
85 profile: bsky.profile.AnyProfileView
86 disableHoverCard?: boolean
87 disableNavigation?: boolean
88 onBeforePress?: () => void
89}
90
91const BLUR_AMOUNT = IS_WEB ? 5 : 100
92
93let DefaultAvatar = ({
94 type,
95 shape: overrideShape,
96 size,
97}: {
98 type: UserAvatarType
99 shape?: 'square' | 'circle'
100 size: number
101}): React.ReactNode => {
102 const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')
103
104 const aviStyle = useMemo(() => {
105 if (finalShape === 'square') {
106 return {borderRadius: size > 32 ? 8 : 3, overflow: 'hidden'} as const
107 }
108 }, [finalShape, size])
109
110 if (type === 'algo') {
111 // TODO: shape=circle
112 // Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
113 return (
114 <Svg
115 testID="userAvatarFallback"
116 width={size}
117 height={size}
118 viewBox="0 0 32 32"
119 fill="none"
120 stroke="none"
121 style={aviStyle}>
122 <Rect width="32" height="32" rx="4" fill="#0070FF" />
123 <Path
124 d="M13.5 7.25C13.5 6.55859 14.0586 6 14.75 6C20.9648 6 26 11.0352 26 17.25C26 17.9414 25.4414 18.5 24.75 18.5C24.0586 18.5 23.5 17.9414 23.5 17.25C23.5 12.418 19.582 8.5 14.75 8.5C14.0586 8.5 13.5 7.94141 13.5 7.25ZM8.36719 14.6172L12.4336 18.6836L13.543 17.5742C13.5156 17.4727 13.5 17.3633 13.5 17.25C13.5 16.5586 14.0586 16 14.75 16C15.4414 16 16 16.5586 16 17.25C16 17.9414 15.4414 18.5 14.75 18.5C14.6367 18.5 14.5312 18.4844 14.4258 18.457L13.3164 19.5664L17.3828 23.6328C17.9492 24.1992 17.8438 25.1484 17.0977 25.4414C16.1758 25.8008 15.1758 26 14.125 26C9.63672 26 6 22.3633 6 17.875C6 16.8242 6.19922 15.8242 6.5625 14.9023C6.85547 14.1602 7.80469 14.0508 8.37109 14.6172H8.36719ZM14.75 9.75C18.8906 9.75 22.25 13.1094 22.25 17.25C22.25 17.9414 21.6914 18.5 21 18.5C20.3086 18.5 19.75 17.9414 19.75 17.25C19.75 14.4883 17.5117 12.25 14.75 12.25C14.0586 12.25 13.5 11.6914 13.5 11C13.5 10.3086 14.0586 9.75 14.75 9.75Z"
125 fill="white"
126 />
127 </Svg>
128 )
129 }
130 if (type === 'list') {
131 // TODO: shape=circle
132 // Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
133 return (
134 <Svg
135 testID="userAvatarFallback"
136 width={size}
137 height={size}
138 viewBox="0 0 32 32"
139 fill="none"
140 stroke="none"
141 style={aviStyle}>
142 <Path
143 d="M28 0H4C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0Z"
144 fill="#0070FF"
145 />
146 <Path
147 d="M22.1529 22.3542C23.4522 22.4603 24.7593 22.293 25.9899 21.8629C26.0369 21.2838 25.919 20.7032 25.6497 20.1884C25.3805 19.6735 24.9711 19.2454 24.4687 18.9535C23.9663 18.6617 23.3916 18.518 22.8109 18.5392C22.2303 18.5603 21.6676 18.7454 21.1878 19.0731M22.1529 22.3542C22.1489 21.1917 21.8142 20.0534 21.1878 19.0741ZM10.8111 19.0741C10.3313 18.7468 9.7687 18.5619 9.18826 18.5409C8.60781 18.5199 8.03327 18.6636 7.53107 18.9554C7.02888 19.2472 6.61953 19.6752 6.35036 20.1899C6.08119 20.7046 5.96319 21.285 6.01001 21.8639C7.23969 22.2964 8.5461 22.4632 9.84497 22.3531M10.8111 19.0741C10.1851 20.0535 9.84865 21.1908 9.84497 22.3531ZM19.0759 10.077C19.0759 10.8931 18.7518 11.6757 18.1747 12.2527C17.5977 12.8298 16.815 13.154 15.9989 13.154C15.1829 13.154 14.4002 12.8298 13.8232 12.2527C13.2461 11.6757 12.922 10.8931 12.922 10.077C12.922 9.26092 13.2461 8.47828 13.8232 7.90123C14.4002 7.32418 15.1829 7 15.9989 7C16.815 7 17.5977 7.32418 18.1747 7.90123C18.7518 8.47828 19.0759 9.26092 19.0759 10.077ZM25.2299 13.154C25.2299 13.457 25.1702 13.7571 25.0542 14.0371C24.9383 14.3171 24.7683 14.5715 24.554 14.7858C24.3397 15.0001 24.0853 15.1701 23.8053 15.2861C23.5253 15.402 23.2252 15.4617 22.9222 15.4617C22.6191 15.4617 22.319 15.402 22.039 15.2861C21.759 15.1701 21.5046 15.0001 21.2903 14.7858C21.0761 14.5715 20.9061 14.3171 20.7901 14.0371C20.6741 13.7571 20.6144 13.457 20.6144 13.154C20.6144 12.5419 20.8576 11.9549 21.2903 11.5222C21.7231 11.0894 22.3101 10.8462 22.9222 10.8462C23.5342 10.8462 24.1212 11.0894 24.554 11.5222C24.9868 11.9549 25.2299 12.5419 25.2299 13.154ZM11.3835 13.154C11.3835 13.457 11.3238 13.7571 11.2078 14.0371C11.0918 14.3171 10.9218 14.5715 10.7075 14.7858C10.4932 15.0001 10.2388 15.1701 9.95886 15.2861C9.67887 15.402 9.37878 15.4617 9.07572 15.4617C8.77266 15.4617 8.47257 15.402 8.19259 15.2861C7.9126 15.1701 7.6582 15.0001 7.4439 14.7858C7.22961 14.5715 7.05962 14.3171 6.94365 14.0371C6.82767 13.7571 6.76798 13.457 6.76798 13.154C6.76798 12.5419 7.01112 11.9549 7.4439 11.5222C7.87669 11.0894 8.46367 10.8462 9.07572 10.8462C9.68777 10.8462 10.2748 11.0894 10.7075 11.5222C11.1403 11.9549 11.3835 12.5419 11.3835 13.154Z"
148 fill="white"
149 />
150 <Path
151 d="M22 22C22 25.3137 19.3137 25.5 16 25.5C12.6863 25.5 10 25.3137 10 22C10 18.6863 12.6863 16 16 16C19.3137 16 22 18.6863 22 22Z"
152 fill="white"
153 />
154 </Svg>
155 )
156 }
157 if (type === 'labeler') {
158 return (
159 <Svg
160 testID="userAvatarFallback"
161 width={size}
162 height={size}
163 viewBox="0 0 32 32"
164 fill="none"
165 stroke="none"
166 style={aviStyle}>
167 {finalShape === 'square' ? (
168 <Rect
169 x="0"
170 y="0"
171 width="32"
172 height="32"
173 rx="3"
174 fill={tokens.color.temp_purple}
175 />
176 ) : (
177 <Circle cx="16" cy="16" r="16" fill={tokens.color.temp_purple} />
178 )}
179 <Path
180 d="M24 9.75L16 7L8 9.75V15.9123C8 20.8848 12 23 16 25.1579C20 23 24 20.8848 24 15.9123V9.75Z"
181 stroke="white"
182 strokeWidth="2"
183 strokeLinecap="square"
184 strokeLinejoin="round"
185 />
186 </Svg>
187 )
188 }
189 // TODO: shape=square
190 return (
191 <Svg
192 testID="userAvatarFallback"
193 width={size}
194 height={size}
195 viewBox="0 0 24 24"
196 fill="none"
197 stroke="none"
198 style={aviStyle}>
199 <Circle cx="12" cy="12" r="12" fill="#0070ff" />
200 <Circle cx="12" cy="9.5" r="3.5" fill="#fff" />
201 <Path
202 strokeLinecap="round"
203 strokeLinejoin="round"
204 fill="#fff"
205 d="M 12.058 22.784 C 9.422 22.784 7.007 21.836 5.137 20.262 C 5.667 17.988 8.534 16.25 11.99 16.25 C 15.494 16.25 18.391 18.036 18.864 20.357 C 17.01 21.874 14.64 22.784 12.058 22.784 Z"
206 />
207 </Svg>
208 )
209}
210DefaultAvatar = memo(DefaultAvatar)
211export {DefaultAvatar}
212
213let UserAvatar = ({
214 type = 'user',
215 shape: overrideShape,
216 size,
217 avatar,
218 moderation,
219 usePlainRNImage = false,
220 onLoad,
221 style,
222 live,
223 hideLiveBadge,
224 noBorder,
225}: UserAvatarProps): React.ReactNode => {
226 const t = useTheme()
227 const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')
228
229 const aviStyle = useMemo(() => {
230 let borderRadius
231 if (finalShape === 'square') {
232 borderRadius = size > 32 ? 8 : 3
233 } else {
234 borderRadius = Math.floor(size / 2)
235 }
236
237 return {
238 width: size,
239 height: size,
240 borderRadius,
241 backgroundColor: t.palette.contrast_25,
242 }
243 }, [finalShape, size, t])
244
245 const borderStyle = useMemo(() => {
246 return [
247 {borderRadius: aviStyle.borderRadius},
248 live && {
249 borderColor: t.palette.negative_500,
250 borderWidth: size > 16 ? 2 : 1,
251 opacity: 1,
252 },
253 ]
254 }, [aviStyle.borderRadius, live, t, size])
255
256 const alert = useMemo(() => {
257 if (!moderation?.alert) {
258 return null
259 }
260 return (
261 <View
262 style={[
263 a.absolute,
264 a.right_0,
265 a.bottom_0,
266 a.rounded_full,
267 {backgroundColor: t.palette.white},
268 ]}>
269 <FontAwesomeIcon
270 icon="exclamation-circle"
271 style={{color: t.palette.negative_400}}
272 size={Math.floor(size / 3)}
273 />
274 </View>
275 )
276 }, [moderation?.alert, size, t])
277
278 const containerStyle = useMemo(() => {
279 return [
280 {
281 width: size,
282 height: size,
283 },
284 style,
285 ]
286 }, [size, style])
287
288 return avatar &&
289 !((moderation?.blur && IS_ANDROID) /* android crashes with blur */) ? (
290 <View style={containerStyle}>
291 {usePlainRNImage ? (
292 <RNImage
293 accessibilityIgnoresInvertColors
294 testID="userAvatarImage"
295 style={aviStyle}
296 resizeMode="cover"
297 source={{
298 uri: hackModifyThumbnailPath(avatar, size < 90),
299 }}
300 blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
301 onLoad={onLoad}
302 />
303 ) : (
304 <ExpoImage
305 testID="userAvatarImage"
306 style={aviStyle}
307 contentFit="cover"
308 source={{
309 uri: hackModifyThumbnailPath(avatar, size < 90),
310 }}
311 blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
312 onLoad={onLoad}
313 />
314 )}
315 {!noBorder && <MediaInsetBorder style={borderStyle} />}
316 {live && size > 16 && !hideLiveBadge && (
317 <LiveIndicator size={size > 32 ? 'small' : 'tiny'} />
318 )}
319 {alert}
320 </View>
321 ) : (
322 <View style={containerStyle}>
323 <DefaultAvatar type={type} shape={finalShape} size={size} />
324 {!noBorder && <MediaInsetBorder style={borderStyle} />}
325 {live && size > 16 && !hideLiveBadge && (
326 <LiveIndicator size={size > 32 ? 'small' : 'tiny'} />
327 )}
328 {alert}
329 </View>
330 )
331}
332UserAvatar = memo(UserAvatar)
333export {UserAvatar}
334
335let EditableUserAvatar = ({
336 type = 'user',
337 size,
338 avatar,
339 onSelectNewAvatar,
340}: EditableUserAvatarProps): React.ReactNode => {
341 const t = useTheme()
342 const {_} = useLingui()
343 const {requestCameraAccessIfNeeded} = useCameraPermission()
344 const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
345 const [rawImage, setRawImage] = useState<ComposerImage | undefined>()
346 const editImageDialogControl = useDialogControl()
347
348 const sheetWrapper = useSheetWrapper()
349
350 const circular = type !== 'algo' && type !== 'list'
351
352 const aviStyle = useMemo(() => {
353 if (!circular) {
354 return {
355 width: size,
356 height: size,
357 borderRadius: size > 32 ? 8 : 3,
358 }
359 }
360 return {
361 width: size,
362 height: size,
363 borderRadius: Math.floor(size / 2),
364 }
365 }, [circular, size])
366
367 const onOpenCamera = useCallback(async () => {
368 if (!(await requestCameraAccessIfNeeded())) {
369 return
370 }
371
372 onSelectNewAvatar(
373 await compressIfNeeded(
374 await openCamera({
375 aspect: [1, 1],
376 }),
377 ),
378 )
379 }, [onSelectNewAvatar, requestCameraAccessIfNeeded])
380
381 const onOpenLibrary = useCallback(async () => {
382 if (!(await requestPhotoAccessIfNeeded())) {
383 return
384 }
385
386 const items = await sheetWrapper(
387 openPicker({
388 aspect: [1, 1],
389 }),
390 )
391 const item = items[0]
392 if (!item) {
393 return
394 }
395
396 try {
397 if (IS_NATIVE) {
398 onSelectNewAvatar(
399 await compressIfNeeded(
400 await openCropper({
401 imageUri: item.path,
402 shape: circular ? 'circle' : 'rectangle',
403 aspectRatio: 1,
404 }),
405 ),
406 )
407 } else {
408 setRawImage(await createComposerImage(item))
409 editImageDialogControl.open()
410 }
411 } catch (e) {
412 // Don't log errors for cancelling selection to sentry on ios or android
413 if (!isCancelledError(e)) {
414 logger.error('Failed to crop avatar', {error: e})
415 }
416 }
417 }, [
418 onSelectNewAvatar,
419 requestPhotoAccessIfNeeded,
420 sheetWrapper,
421 editImageDialogControl,
422 circular,
423 ])
424
425 const onRemoveAvatar = useCallback(() => {
426 onSelectNewAvatar(null)
427 }, [onSelectNewAvatar])
428
429 const onChangeEditImage = useCallback(
430 async (image: ComposerImage) => {
431 const compressed = await compressImage(image)
432 onSelectNewAvatar(compressed)
433 },
434 [onSelectNewAvatar],
435 )
436
437 return (
438 <>
439 <Menu.Root>
440 <Menu.Trigger label={_(msg`Edit avatar`)}>
441 {({props}) => (
442 <Pressable {...props} testID="changeAvatarBtn">
443 {avatar ? (
444 <ExpoImage
445 testID="userAvatarImage"
446 style={aviStyle}
447 source={{uri: avatar}}
448 accessibilityRole="image"
449 />
450 ) : (
451 <DefaultAvatar type={type} size={size} />
452 )}
453 <View
454 style={[
455 styles.editButtonContainer,
456 t.atoms.bg_contrast_25,
457 a.border,
458 t.atoms.border_contrast_low,
459 ]}>
460 <CameraFilledIcon height={14} width={14} style={t.atoms.text} />
461 </View>
462 </Pressable>
463 )}
464 </Menu.Trigger>
465 <Menu.Outer showCancel>
466 <Menu.Group>
467 {IS_NATIVE && (
468 <Menu.Item
469 testID="changeAvatarCameraBtn"
470 label={_(msg`Upload from Camera`)}
471 onPress={onOpenCamera}>
472 <Menu.ItemText>
473 <Trans>Upload from Camera</Trans>
474 </Menu.ItemText>
475 <Menu.ItemIcon icon={CameraIcon} />
476 </Menu.Item>
477 )}
478
479 <Menu.Item
480 testID="changeAvatarLibraryBtn"
481 label={_(msg`Upload from Library`)}
482 onPress={onOpenLibrary}>
483 <Menu.ItemText>
484 {IS_NATIVE ? (
485 <Trans>Upload from Library</Trans>
486 ) : (
487 <Trans>Upload from Files</Trans>
488 )}
489 </Menu.ItemText>
490 <Menu.ItemIcon icon={LibraryIcon} />
491 </Menu.Item>
492 </Menu.Group>
493 {!!avatar && (
494 <>
495 <Menu.Divider />
496 <Menu.Group>
497 <Menu.Item
498 testID="changeAvatarRemoveBtn"
499 label={_(msg`Remove Avatar`)}
500 onPress={onRemoveAvatar}>
501 <Menu.ItemText>
502 <Trans>Remove Avatar</Trans>
503 </Menu.ItemText>
504 <Menu.ItemIcon icon={TrashIcon} />
505 </Menu.Item>
506 </Menu.Group>
507 </>
508 )}
509 </Menu.Outer>
510 </Menu.Root>
511
512 <EditImageDialog
513 control={editImageDialogControl}
514 image={rawImage}
515 onChange={onChangeEditImage}
516 aspectRatio={1}
517 circularCrop={circular}
518 />
519 </>
520 )
521}
522EditableUserAvatar = memo(EditableUserAvatar)
523export {EditableUserAvatar}
524
525let PreviewableUserAvatar = ({
526 moderation,
527 profile,
528 disableHoverCard,
529 disableNavigation,
530 onBeforePress,
531 live,
532 ...props
533}: PreviewableUserAvatarProps): React.ReactNode => {
534 const ax = useAnalytics()
535 const {_} = useLingui()
536 const queryClient = useQueryClient()
537 const status = useActorStatus(profile)
538 const liveControl = useDialogControl()
539 const playHaptic = useHaptics()
540
541 const onPress = useCallback(() => {
542 onBeforePress?.()
543 unstableCacheProfileView(queryClient, profile)
544 }, [profile, queryClient, onBeforePress])
545
546 const onOpenLiveStatus = useCallback(() => {
547 playHaptic('Light')
548 ax.metric('live:card:open', {subject: profile.did, from: 'post'})
549 liveControl.open()
550 }, [liveControl, playHaptic, profile.did])
551
552 const avatarEl = (
553 <UserAvatar
554 avatar={profile.avatar}
555 moderation={moderation}
556 type={profile.associated?.labeler ? 'labeler' : 'user'}
557 live={status.isActive || live}
558 {...props}
559 />
560 )
561
562 const linkStyle =
563 props.type !== 'algo' && props.type !== 'list'
564 ? a.rounded_full
565 : {borderRadius: props.size > 32 ? 8 : 3}
566
567 return (
568 <ProfileHoverCard did={profile.did} disable={disableHoverCard}>
569 {disableNavigation ? (
570 avatarEl
571 ) : status.isActive && (IS_NATIVE || IS_WEB_TOUCH_DEVICE) ? (
572 <>
573 <Button
574 label={_(
575 msg`${sanitizeDisplayName(
576 profile.displayName || sanitizeHandle(profile.handle),
577 )}'s avatar`,
578 )}
579 accessibilityHint={_(msg`Opens live status dialog`)}
580 onPress={onOpenLiveStatus}>
581 {avatarEl}
582 </Button>
583 <LiveStatusDialog
584 control={liveControl}
585 profile={profile}
586 status={status}
587 embed={status.embed}
588 />
589 </>
590 ) : (
591 <Link
592 label={_(
593 msg`${sanitizeDisplayName(
594 profile.displayName || sanitizeHandle(profile.handle),
595 )}'s avatar`,
596 )}
597 accessibilityHint={_(msg`Opens this profile`)}
598 to={makeProfileLink({
599 did: profile.did,
600 handle: profile.handle,
601 })}
602 onPress={onPress}
603 style={linkStyle}>
604 {avatarEl}
605 </Link>
606 )}
607 </ProfileHoverCard>
608 )
609}
610PreviewableUserAvatar = memo(PreviewableUserAvatar)
611export {PreviewableUserAvatar}
612
613// HACK
614// We have started serving smaller avis but haven't updated lexicons to give the data properly
615// manually string-replace to use the smaller ones
616// -prf
617function hackModifyThumbnailPath(uri: string, isEnabled: boolean): string {
618 return isEnabled
619 ? uri.replace('/img/avatar/plain/', '/img/avatar_thumbnail/plain/')
620 : uri
621}
622
623const styles = StyleSheet.create({
624 editButtonContainer: {
625 position: 'absolute',
626 width: 24,
627 height: 24,
628 bottom: 0,
629 right: 0,
630 borderRadius: 12,
631 alignItems: 'center',
632 justifyContent: 'center',
633 },
634})