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

* Use plain RN image for startup-blocking UI

* Add comments

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,6 +148,16 @@ export function UserAvatar({
   return avatar &&
     !((moderation?.blur && isAndroid) /* android crashes with blur */) ? (
     <View style={{width: size, height: size}}>
+      {usePlainRNImage ? (
+        <Image
+          accessibilityIgnoresInvertColors
+          testID="userAvatarImage"
+          style={aviStyle}
+          resizeMode="cover"
+          source={{uri: avatar}}
+          blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
+        />
+      ) : (
         <HighPriorityImage
           testID="userAvatarImage"
           style={aviStyle}
@@ -153,6 +165,7 @@ export function UserAvatar({
           source={{uri: avatar}}
           blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
         />
+      )}
       {alert}
     </View>
   ) : (

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]}

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>