Work around a startup stall caused by expo-image on low-end Android (#1801)

* Use plain RN image for startup-blocking UI

* Add comments
zio/stable
dan 2023-11-03 02:33:18 +00:00 committed by GitHub
parent 5e2025e60a
commit 8747c215b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 11 deletions

View File

@ -1,5 +1,5 @@
import React, {useMemo} from 'react'
import {StyleSheet, View} from 'react-native'
import {Image, StyleSheet, View} from 'react-native'
import Svg, {Circle, Rect, Path} from 'react-native-svg'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {HighPriorityImage} from 'view/com/util/images/Image'
@ -27,6 +27,7 @@ interface BaseUserAvatarProps {
interface UserAvatarProps extends BaseUserAvatarProps {
moderation?: ModerationUI
usePlainRNImage?: boolean
}
interface EditableUserAvatarProps extends BaseUserAvatarProps {
@ -110,6 +111,7 @@ export function UserAvatar({
size,
avatar,
moderation,
usePlainRNImage = false,
}: UserAvatarProps) {
const pal = usePalette('default')
@ -146,13 +148,24 @@ export function UserAvatar({
return avatar &&
!((moderation?.blur && isAndroid) /* android crashes with blur */) ? (
<View style={{width: size, height: size}}>
<HighPriorityImage
testID="userAvatarImage"
style={aviStyle}
contentFit="cover"
source={{uri: avatar}}
blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
/>
{usePlainRNImage ? (
<Image
accessibilityIgnoresInvertColors
testID="userAvatarImage"
style={aviStyle}
resizeMode="cover"
source={{uri: avatar}}
blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
/>
) : (
<HighPriorityImage
testID="userAvatarImage"
style={aviStyle}
contentFit="cover"
source={{uri: avatar}}
blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
/>
)}
{alert}
</View>
) : (

View File

@ -158,7 +158,12 @@ export const DrawerContent = observer(function DrawerContentImpl() {
accessibilityLabel="Profile"
accessibilityHint="Navigates to your profile"
onPress={onPressProfile}>
<UserAvatar size={80} avatar={store.me.avatar} />
<UserAvatar
size={80}
avatar={store.me.avatar}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
/>
<Text
type="title-lg"
style={[pal.text, s.bold, styles.profileCardDisplayName]}

View File

@ -192,11 +192,21 @@ export const BottomBar = observer(function BottomBarImpl({
styles.onProfile,
{borderColor: pal.text.color},
]}>
<UserAvatar avatar={store.me.avatar} size={27} />
<UserAvatar
avatar={store.me.avatar}
size={27}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
/>
</View>
) : (
<View style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
<UserAvatar avatar={store.me.avatar} size={28} />
<UserAvatar
avatar={store.me.avatar}
size={28}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
/>
</View>
)}
</View>