fix: crash when reactor is missing (#7448)

app/components/user_item/user_item.tsx

@@ -13,13 +13,13 @@ import {useTheme} from '@context/theme';
 import {nonBreakingString} from '@utils/strings';
 import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme';
 import {typography} from '@utils/typography';
-import {displayUsername, getUserCustomStatus, isBot, isCustomStatusExpired, isGuest, isShared} from '@utils/user';
+import {displayUsername, getUserCustomStatus, isBot, isCustomStatusExpired, isDeactivated, isGuest, isShared} from '@utils/user';
 
 import type UserModel from '@typings/database/models/servers/user';
 
 type Props = {
     FooterComponent?: ReactNode;
-    user: UserProfile | UserModel;
+    user?: UserProfile | UserModel;
     containerStyle?: StyleProp<ViewStyle>;
     currentUserId: string;
     includeMargin?: boolean;
@@ -117,13 +117,12 @@ const UserItem = ({
     const bot = user ? isBot(user) : false;
     const guest = user ? isGuest(user.roles) : false;
     const shared = user ? isShared(user) : false;
+    const deactivated = user ? isDeactivated(user) : false;
 
     const isCurrentUser = currentUserId === user?.id;
     const customStatus = getUserCustomStatus(user);
     const customStatusExpired = isCustomStatusExpired(user);
 
-    const deleteAt = 'deleteAt' in user ? user.deleteAt : user.delete_at;
-
     let displayName = displayUsername(user, locale, teammateNameDisplay);
     const showTeammateDisplay = displayName !== user?.username;
     if (isCurrentUser) {
@@ -144,11 +143,15 @@ const UserItem = ({
     }, [disabled, padding, includeMargin]);
 
     const onPress = useCallback(() => {
-        onUserPress?.(user);
+        if (user) {
+            onUserPress?.(user);
+        }
     }, [user, onUserPress]);
 
     const onLongPress = useCallback(() => {
-        onUserLongPress?.(user);
+        if (user) {
+            onUserLongPress?.(user);
+        }
     }, [user, onUserLongPress]);
 
     return (
@@ -177,15 +180,15 @@ const UserItem = ({
                             testID={`${userItemTestId}.display_name`}
                         >
                             {nonBreakingString(displayName)}
-                            {Boolean(showTeammateDisplay) && (
+                            {Boolean(showTeammateDisplay) && Boolean(user?.username) && (
                                 <Text
                                     style={style.rowUsername}
                                     testID={`${userItemTestId}.username`}
                                 >
-                                    {nonBreakingString(` @${user!.username}`)}
+                                    {nonBreakingString(` @${user?.username}`)}
                                 </Text>
                             )}
-                            {Boolean(deleteAt) && (
+                            {deactivated && (
                                 <Text
                                     style={style.rowUsername}
                                     testID={`${userItemTestId}.deactivated`}

app/screens/reactions/reactors_list/reactor/reactor.tsx

@@ -1,26 +1,31 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useEffect} from 'react';
 import {useIntl} from 'react-intl';
 import {Keyboard} from 'react-native';
 
+import {fetchUsersByIds} from '@actions/remote/user';
 import UserItem from '@components/user_item';
 import {Screens} from '@constants';
+import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {dismissBottomSheet, openAsBottomSheet} from '@screens/navigation';
 
+import type ReactionModel from '@typings/database/models/servers/reaction';
 import type UserModel from '@typings/database/models/servers/user';
 
 type Props = {
     channelId: string;
     location: string;
-    user: UserModel;
+    reaction: ReactionModel;
+    user?: UserModel;
 }
 
-const Reactor = ({channelId, location, user}: Props) => {
+const Reactor = ({channelId, location, reaction, user}: Props) => {
     const intl = useIntl();
     const theme = useTheme();
+    const serverUrl = useServerUrl();
     const openUserProfile = async () => {
         if (user) {
             await dismissBottomSheet(Screens.REACTIONS);
@@ -34,6 +39,12 @@ const Reactor = ({channelId, location, user}: Props) => {
         }
     };
 
+    useEffect(() => {
+        if (!user) {
+            fetchUsersByIds(serverUrl, [reaction.userId]);
+        }
+    }, []);
+
     return (
         <UserItem
             user={user}

app/utils/user/index.ts

@@ -234,6 +234,10 @@ export function isShared(user: UserProfile | UserModel): boolean {
     return ('remoteId' in user) ? Boolean(user.remoteId) : Boolean(user.remote_id);
 }
 
+export function isDeactivated(user: UserProfile | UserModel): boolean {
+    return Boolean('deleteAt' in user ? user.deleteAt : user.delete_at);
+}
+
 export function removeUserFromList(userId: string, originalList: UserProfile[]): UserProfile[] {
     const list = [...originalList];
     for (let i = list.length - 1; i >= 0; i--) {