Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Nov 3, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
250a701
Use plain RN image for startup-blocking UI
gaearon Nov 3, 2023
2500813
Add comments
gaearon Nov 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 21 additions & 8 deletions src/view/com/util/UserAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -27,6 +27,7 @@ interface BaseUserAvatarProps {

interface UserAvatarProps extends BaseUserAvatarProps {
moderation?: ModerationUI
usePlainRNImage?: boolean
}

interface EditableUserAvatarProps extends BaseUserAvatarProps {
Expand Down Expand Up @@ -110,6 +111,7 @@ export function UserAvatar({
size,
avatar,
moderation,
usePlainRNImage = false,
}: UserAvatarProps) {
const pal = usePalette('default')

Expand Down Expand Up @@ -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>
) : (
Expand Down
7 changes: 6 additions & 1 deletion src/view/shell/Drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down
14 changes: 12 additions & 2 deletions src/view/shell/bottom-bar/BottomBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down