Warn image processing error

src/components/Message.tsx

@@ -80,7 +80,7 @@ const displayMessage = ({
     })
   } else {
     showMessage({
-      duration: type === 'error' ? 3500 : duration === 'short' ? 1500 : 2500,
+      duration: type === 'error' ? 8000 : duration === 'short' ? 3000 : 5000,
       autoHide,
       message,
       description,
@@ -124,7 +124,8 @@ const Message = React.forwardRef<FlashMessage>((_, ref) => {
         shadowColor: colors.primaryDefault,
         shadowOffset: { width: 0, height: 0 },
         shadowOpacity: theme === 'light' ? 0.16 : 0.24,
-        shadowRadius: 4
+        shadowRadius: 4,
+        paddingRight: StyleConstants.Spacing.M * 2
       }}
       titleStyle={{
         color: colors.primaryDefault,

src/i18n/en/screens/tabs.json

@@ -147,7 +147,8 @@
         "group": "Group {{index}}",
         "label": "Label",
         "content": "Content"
-      }
+      },
+      "mediaSelectionFailed": "Image processing failed. Please try again."
     },
     "push": {
       "notAvailable": "Your phone does not support tooot's push notification",

src/screens/Tabs/Me/Profile/Root/AvatarHeader.tsx

@@ -1,5 +1,6 @@
 import mediaSelector from '@components/mediaSelector'
 import { MenuRow } from '@components/Menu'
+import { displayMessage } from '@components/Message'
 import { useActionSheet } from '@expo/react-native-action-sheet'
 import { useProfileMutation, useProfileQuery } from '@utils/queryHooks/profile'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -37,6 +38,15 @@ const ProfileAvatarHeader: React.FC<Props> = ({ type, messageRef }) => {
               ? { width: 400, height: 400 }
               : { width: 1500, height: 500 }
         })
+        if (!image[0].uri) {
+          displayMessage({
+            ref: messageRef,
+            message: t('screenTabs:me.profile.mediaSelectionFailed'),
+            theme: theme,
+            type: 'error'
+          })
+          return
+        }
         mutation.mutate({
           theme,
           messageRef,