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} from '@lingui/core/macro'
15import {useLingui} from '@lingui/react'
16import {Trans} from '@lingui/react/macro'
17import {useQueryClient} from '@tanstack/react-query'
18
19import {useHaptics} from '#/lib/haptics'
20import {
21 useCameraPermission,
22 usePhotoLibraryPermission,
23} from '#/lib/hooks/usePermissions'
24import {compressIfNeeded} from '#/lib/media/manip'
25import {openCamera, openCropper, openPicker} from '#/lib/media/picker'
26import {type PickerImage} from '#/lib/media/picker.shared'
27import {makeProfileLink} from '#/lib/routes/links'
28import {sanitizeDisplayName} from '#/lib/strings/display-names'
29import {isCancelledError} from '#/lib/strings/errors'
30import {sanitizeHandle} from '#/lib/strings/handles'
31import {logger} from '#/logger'
32import {
33 type ComposerImage,
34 compressImage,
35 createComposerImage,
36} from '#/state/gallery'
37import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache'
38import {EditImageDialog} from '#/view/com/composer/photos/EditImageDialog'
39import {atoms as a, tokens, useTheme} from '#/alf'
40import {Button} from '#/components/Button'
41import {useDialogControl} from '#/components/Dialog'
42import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'
43import {
44 Camera_Filled_Stroke2_Corner0_Rounded as CameraFilledIcon,
45 Camera_Stroke2_Corner0_Rounded as CameraIcon,
46} from '#/components/icons/Camera'
47import {StreamingLive_Stroke2_Corner0_Rounded as LibraryIcon} from '#/components/icons/StreamingLive'
48import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
49import {Link} from '#/components/Link'
50import {MediaInsetBorder} from '#/components/MediaInsetBorder'
51import * as Menu from '#/components/Menu'
52import {ProfileHoverCard} from '#/components/ProfileHoverCard'
53import {useAnalytics} from '#/analytics'
54import {IS_ANDROID, IS_NATIVE, IS_WEB, IS_WEB_TOUCH_DEVICE} from '#/env'
55import {useActorStatus} from '#/features/liveNow'
56import {LiveIndicator} from '#/features/liveNow/components/LiveIndicator'
57import {LiveStatusDialog} from '#/features/liveNow/components/LiveStatusDialog'
58import type * as bsky from '#/types/bsky'
59
60export type UserAvatarType = 'user' | 'algo' | 'list' | 'labeler'
61
62interface BaseUserAvatarProps {
63 type?: UserAvatarType
64 shape?: 'circle' | 'square'
65 size: number
66 avatar?: string | null
67 live?: boolean
68 hideLiveBadge?: boolean
69}
70
71interface UserAvatarProps extends BaseUserAvatarProps {
72 type: UserAvatarType
73 moderation?: ModerationUI
74 usePlainRNImage?: boolean
75 noBorder?: boolean
76 onLoad?: () => void
77 style?: StyleProp<ViewStyle>
78}
79
80interface EditableUserAvatarProps extends BaseUserAvatarProps {
81 onSelectNewAvatar: (img: PickerImage | null) => void
82}
83
84interface PreviewableUserAvatarProps extends BaseUserAvatarProps {
85 moderation?: ModerationUI
86 profile: bsky.profile.AnyProfileView
87 disableHoverCard?: boolean
88 disableNavigation?: boolean
89 onBeforePress?: () => void
90}
91
92const BLUR_AMOUNT = IS_WEB ? 5 : 100
93
94let DefaultAvatar = ({
95 type,
96 shape: overrideShape,
97 size,
98}: {
99 type: UserAvatarType
100 shape?: 'square' | 'circle'
101 size: number
102}): React.ReactNode => {
103 const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')
104
105 const aviStyle = useMemo(() => {
106 if (finalShape === 'square') {
107 return {borderRadius: size > 32 ? 8 : 3, overflow: 'hidden'} as const
108 }
109 }, [finalShape, size])
110
111 if (type === 'algo') {
112 // TODO: shape=circle
113 // Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
114 return (
115 <Svg
116 testID="userAvatarFallback"
117 width={size}
118 height={size}
119 viewBox="0 0 32 32"
120 fill="none"
121 stroke="none"
122 style={aviStyle}>
123 <Rect width="32" height="32" rx="4" fill="#0070FF" />
124 <Path
125 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"
126 fill="white"
127 />
128 </Svg>
129 )
130 }
131 if (type === 'list') {
132 // TODO: shape=circle
133 // Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
134 return (
135 <Svg
136 testID="userAvatarFallback"
137 width={size}
138 height={size}
139 viewBox="0 0 32 32"
140 fill="none"
141 stroke="none"
142 style={aviStyle}>
143 <Path
144 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"
145 fill="#0070FF"
146 />
147 <Path
148 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"
149 fill="white"
150 />
151 <Path
152 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"
153 fill="white"
154 />
155 </Svg>
156 )
157 }
158 if (type === 'labeler') {
159 return (
160 <Svg
161 testID="userAvatarFallback"
162 width={size}
163 height={size}
164 viewBox="0 0 32 32"
165 fill="none"
166 stroke="none"
167 style={aviStyle}>
168 {finalShape === 'square' ? (
169 <Rect
170 x="0"
171 y="0"
172 width="32"
173 height="32"
174 rx="3"
175 fill={tokens.color.temp_purple}
176 />
177 ) : (
178 <Circle cx="16" cy="16" r="16" fill={tokens.color.temp_purple} />
179 )}
180 <Path
181 d="M24 9.75L16 7L8 9.75V15.9123C8 20.8848 12 23 16 25.1579C20 23 24 20.8848 24 15.9123V9.75Z"
182 stroke="white"
183 strokeWidth="2"
184 strokeLinecap="square"
185 strokeLinejoin="round"
186 />
187 </Svg>
188 )
189 }
190 // TODO: shape=square
191 return (
192 <Svg
193 testID="userAvatarFallback"
194 width={size}
195 height={size}
196 viewBox="0 0 24 24"
197 fill="none"
198 stroke="none"
199 style={aviStyle}>
200 <Circle cx="12" cy="12" r="12" fill="#0070ff" />
201 <Circle cx="12" cy="9.5" r="3.5" fill="#fff" />
202 <Path
203 strokeLinecap="round"
204 strokeLinejoin="round"
205 fill="#fff"
206 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"
207 />
208 </Svg>
209 )
210}
211DefaultAvatar = memo(DefaultAvatar)
212export {DefaultAvatar}
213
214let UserAvatar = ({
215 type = 'user',
216 shape: overrideShape,
217 size,
218 avatar,
219 moderation,
220 usePlainRNImage = false,
221 onLoad,
222 style,
223 live,
224 hideLiveBadge,
225 noBorder,
226}: UserAvatarProps): React.ReactNode => {
227 const t = useTheme()
228 const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')
229
230 const aviStyle = useMemo(() => {
231 let borderRadius
232 if (finalShape === 'square') {
233 borderRadius = size > 32 ? 8 : 3
234 } else {
235 borderRadius = Math.floor(size / 2)
236 }
237
238 return {
239 width: size,
240 height: size,
241 borderRadius,
242 backgroundColor: t.palette.contrast_25,
243 }
244 }, [finalShape, size, t])
245
246 const borderStyle = useMemo(() => {
247 return [
248 {borderRadius: aviStyle.borderRadius},
249 live && {
250 borderColor: t.palette.negative_500,
251 borderWidth: size > 16 ? 2 : 1,
252 opacity: 1,
253 },
254 ]
255 }, [aviStyle.borderRadius, live, t, size])
256
257 const alert = useMemo(() => {
258 if (!moderation?.alert) {
259 return null
260 }
261 return (
262 <View
263 style={[
264 a.absolute,
265 a.right_0,
266 a.bottom_0,
267 a.rounded_full,
268 {backgroundColor: t.palette.white},
269 ]}>
270 <FontAwesomeIcon
271 icon="exclamation-circle"
272 style={{color: t.palette.negative_400}}
273 size={Math.floor(size / 3)}
274 />
275 </View>
276 )
277 }, [moderation?.alert, size, t])
278
279 const containerStyle = useMemo(() => {
280 return [
281 {
282 width: size,
283 height: size,
284 },
285 style,
286 ]
287 }, [size, style])
288
289 return avatar &&
290 !((moderation?.blur && IS_ANDROID) /* android crashes with blur */) ? (
291 <View style={containerStyle}>
292 {usePlainRNImage ? (
293 <RNImage
294 accessibilityIgnoresInvertColors
295 testID="userAvatarImage"
296 style={aviStyle}
297 resizeMode="cover"
298 source={{
299 uri: hackModifyThumbnailPath(avatar, size < 90),
300 }}
301 blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
302 onLoad={onLoad}
303 />
304 ) : (
305 <ExpoImage
306 testID="userAvatarImage"
307 style={aviStyle}
308 contentFit="cover"
309 source={{
310 uri: hackModifyThumbnailPath(avatar, size < 90),
311 }}
312 blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
313 onLoad={onLoad}
314 />
315 )}
316 {!noBorder && <MediaInsetBorder style={borderStyle} />}
317 {live && size > 16 && !hideLiveBadge && (
318 <LiveIndicator size={size > 32 ? 'small' : 'tiny'} />
319 )}
320 {alert}
321 </View>
322 ) : (
323 <View style={containerStyle}>
324 <DefaultAvatar type={type} shape={finalShape} size={size} />
325 {!noBorder && <MediaInsetBorder style={borderStyle} />}
326 {live && size > 16 && !hideLiveBadge && (
327 <LiveIndicator size={size > 32 ? 'small' : 'tiny'} />
328 )}
329 {alert}
330 </View>
331 )
332}
333UserAvatar = memo(UserAvatar)
334export {UserAvatar}
335
336let EditableUserAvatar = ({
337 type = 'user',
338 size,
339 avatar,
340 onSelectNewAvatar,
341}: EditableUserAvatarProps): React.ReactNode => {
342 const t = useTheme()
343 const {_} = useLingui()
344 const {requestCameraAccessIfNeeded} = useCameraPermission()
345 const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
346 const [rawImage, setRawImage] = useState<ComposerImage | undefined>()
347 const editImageDialogControl = useDialogControl()
348
349 const sheetWrapper = useSheetWrapper()
350
351 const circular = type !== 'algo' && type !== 'list'
352
353 const aviStyle = useMemo(() => {
354 if (!circular) {
355 return {
356 width: size,
357 height: size,
358 borderRadius: size > 32 ? 8 : 3,
359 }
360 }
361 return {
362 width: size,
363 height: size,
364 borderRadius: Math.floor(size / 2),
365 }
366 }, [circular, size])
367
368 const onOpenCamera = useCallback(async () => {
369 if (!(await requestCameraAccessIfNeeded())) {
370 return
371 }
372
373 onSelectNewAvatar(
374 await compressIfNeeded(
375 await openCamera({
376 aspect: [1, 1],
377 }),
378 ),
379 )
380 }, [onSelectNewAvatar, requestCameraAccessIfNeeded])
381
382 const onOpenLibrary = useCallback(async () => {
383 if (!(await requestPhotoAccessIfNeeded())) {
384 return
385 }
386
387 const items = await sheetWrapper(
388 openPicker({
389 aspect: [1, 1],
390 }),
391 )
392 const item = items[0]
393 if (!item) {
394 return
395 }
396
397 try {
398 if (IS_NATIVE) {
399 onSelectNewAvatar(
400 await compressIfNeeded(
401 await openCropper({
402 imageUri: item.path,
403 shape: circular ? 'circle' : 'rectangle',
404 aspectRatio: 1,
405 }),
406 ),
407 )
408 } else {
409 setRawImage(await createComposerImage(item))
410 editImageDialogControl.open()
411 }
412 } catch (e) {
413 // Don't log errors for cancelling selection to sentry on ios or android
414 if (!isCancelledError(e)) {
415 logger.error('Failed to crop avatar', {error: e})
416 }
417 }
418 }, [
419 onSelectNewAvatar,
420 requestPhotoAccessIfNeeded,
421 sheetWrapper,
422 editImageDialogControl,
423 circular,
424 ])
425
426 const onRemoveAvatar = useCallback(() => {
427 onSelectNewAvatar(null)
428 }, [onSelectNewAvatar])
429
430 const onChangeEditImage = useCallback(
431 async (image: ComposerImage) => {
432 const compressed = await compressImage(image)
433 onSelectNewAvatar(compressed)
434 },
435 [onSelectNewAvatar],
436 )
437
438 return (
439 <>
440 <Menu.Root>
441 <Menu.Trigger label={_(msg`Edit avatar`)}>
442 {({props}) => (
443 <Pressable {...props} testID="changeAvatarBtn">
444 {avatar ? (
445 <ExpoImage
446 testID="userAvatarImage"
447 style={aviStyle}
448 source={{uri: avatar}}
449 accessibilityRole="image"
450 />
451 ) : (
452 <DefaultAvatar type={type} size={size} />
453 )}
454 <View
455 style={[
456 styles.editButtonContainer,
457 t.atoms.bg_contrast_25,
458 a.border,
459 t.atoms.border_contrast_low,
460 ]}>
461 <CameraFilledIcon height={14} width={14} style={t.atoms.text} />
462 </View>
463 </Pressable>
464 )}
465 </Menu.Trigger>
466 <Menu.Outer showCancel>
467 <Menu.Group>
468 {IS_NATIVE && (
469 <Menu.Item
470 testID="changeAvatarCameraBtn"
471 label={_(msg`Upload from Camera`)}
472 onPress={onOpenCamera}>
473 <Menu.ItemText>
474 <Trans>Upload from Camera</Trans>
475 </Menu.ItemText>
476 <Menu.ItemIcon icon={CameraIcon} />
477 </Menu.Item>
478 )}
479
480 <Menu.Item
481 testID="changeAvatarLibraryBtn"
482 label={_(msg`Upload from Library`)}
483 onPress={onOpenLibrary}>
484 <Menu.ItemText>
485 {IS_NATIVE ? (
486 <Trans>Upload from Library</Trans>
487 ) : (
488 <Trans>Upload from Files</Trans>
489 )}
490 </Menu.ItemText>
491 <Menu.ItemIcon icon={LibraryIcon} />
492 </Menu.Item>
493 </Menu.Group>
494 {!!avatar && (
495 <>
496 <Menu.Divider />
497 <Menu.Group>
498 <Menu.Item
499 testID="changeAvatarRemoveBtn"
500 label={_(msg`Remove Avatar`)}
501 onPress={onRemoveAvatar}>
502 <Menu.ItemText>
503 <Trans>Remove Avatar</Trans>
504 </Menu.ItemText>
505 <Menu.ItemIcon icon={TrashIcon} />
506 </Menu.Item>
507 </Menu.Group>
508 </>
509 )}
510 </Menu.Outer>
511 </Menu.Root>
512
513 <EditImageDialog
514 control={editImageDialogControl}
515 image={rawImage}
516 onChange={onChangeEditImage}
517 aspectRatio={1}
518 circularCrop={circular}
519 />
520 </>
521 )
522}
523EditableUserAvatar = memo(EditableUserAvatar)
524export {EditableUserAvatar}
525
526let PreviewableUserAvatar = ({
527 moderation,
528 profile,
529 disableHoverCard,
530 disableNavigation,
531 onBeforePress,
532 live,
533 ...props
534}: PreviewableUserAvatarProps): React.ReactNode => {
535 const ax = useAnalytics()
536 const {_} = useLingui()
537 const queryClient = useQueryClient()
538 const status = useActorStatus(profile)
539 const liveControl = useDialogControl()
540 const playHaptic = useHaptics()
541
542 const onPress = useCallback(() => {
543 onBeforePress?.()
544 unstableCacheProfileView(queryClient, profile)
545 }, [profile, queryClient, onBeforePress])
546
547 const onOpenLiveStatus = useCallback(() => {
548 playHaptic('Light')
549 ax.metric('live:card:open', {subject: profile.did, from: 'post'})
550 liveControl.open()
551 }, [liveControl, playHaptic, profile.did])
552
553 const avatarEl = (
554 <UserAvatar
555 avatar={profile.avatar}
556 moderation={moderation}
557 type={profile.associated?.labeler ? 'labeler' : 'user'}
558 live={status.isActive || live}
559 {...props}
560 />
561 )
562
563 const linkStyle =
564 props.type !== 'algo' && props.type !== 'list'
565 ? a.rounded_full
566 : {borderRadius: props.size > 32 ? 8 : 3}
567
568 return (
569 <ProfileHoverCard did={profile.did} disable={disableHoverCard}>
570 {disableNavigation ? (
571 avatarEl
572 ) : status.isActive && (IS_NATIVE || IS_WEB_TOUCH_DEVICE) ? (
573 <>
574 <Button
575 label={_(
576 msg`${sanitizeDisplayName(
577 profile.displayName || sanitizeHandle(profile.handle),
578 )}'s avatar`,
579 )}
580 accessibilityHint={_(msg`Opens live status dialog`)}
581 onPress={onOpenLiveStatus}>
582 {avatarEl}
583 </Button>
584 <LiveStatusDialog
585 control={liveControl}
586 profile={profile}
587 status={status}
588 embed={status.embed}
589 />
590 </>
591 ) : (
592 <Link
593 label={_(
594 msg`${sanitizeDisplayName(
595 profile.displayName || sanitizeHandle(profile.handle),
596 )}'s avatar`,
597 )}
598 accessibilityHint={_(msg`Opens this profile`)}
599 to={makeProfileLink({
600 did: profile.did,
601 handle: profile.handle,
602 })}
603 onPress={onPress}
604 style={linkStyle}>
605 {avatarEl}
606 </Link>
607 )}
608 </ProfileHoverCard>
609 )
610}
611PreviewableUserAvatar = memo(PreviewableUserAvatar)
612export {PreviewableUserAvatar}
613
614// HACK
615// We have started serving smaller avis but haven't updated lexicons to give the data properly
616// manually string-replace to use the smaller ones
617// -prf
618function hackModifyThumbnailPath(uri: string, isEnabled: boolean): string {
619 return isEnabled
620 ? uri.replace('/img/avatar/plain/', '/img/avatar_thumbnail/plain/')
621 : uri
622}
623
624const styles = StyleSheet.create({
625 editButtonContainer: {
626 position: 'absolute',
627 width: 24,
628 height: 24,
629 bottom: 0,
630 right: 0,
631 borderRadius: 12,
632 alignItems: 'center',
633 justifyContent: 'center',
634 },
635})