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

* Use plain RN image for startup-blocking UI

* Add comments

3 files changed, 39 insertions, 11 deletions

diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 7b23547c6..9db457325 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -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>
   ) : (
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index 95b79faa1..c2d307f59 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -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]}
diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index cfd4d46d0..c4e3790ad 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -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>