lightbox: Get user's name from user data, not message, when available

But if it's not in user data, just fall back to the user's name on
the message.

Soon we'll use the user data to show a "(guest)" marker if it
applies; this is zulip#5804. But as a bonus, this means that as long as
we have a User object (which we usually will), we'll live-update the
sender's name, here, if it changes.

src/lightbox/Lightbox.js

@@ -111,9 +111,7 @@ export default function Lightbox(props: Props): Node {
             onPressBack={() => {
               navigation.dispatch(navigateBack());
             }}
-            timestamp={message.timestamp}
-            senderName={message.sender_full_name}
-            senderId={message.sender_id}
+            message={message}
           />
         </View>
         <View style={styles.footer}>

src/lightbox/LightboxHeader.js

@@ -9,7 +9,9 @@ import { createStyleSheet } from '../styles';
 import UserAvatarWithPresence from '../common/UserAvatarWithPresence';
 import { Icon } from '../common/Icons';
 import { OfflineNoticePlaceholder } from '../boot/OfflineNoticeProvider';
-import type { UserId } from '../api/idTypes';
+import { useSelector } from '../react-redux';
+import { tryGetUserForId } from '../users/userSelectors';
+import type { Message } from '../api/modelTypes';
 
 const styles = createStyleSheet({
   text: {
@@ -39,34 +41,30 @@ const styles = createStyleSheet({
 });
 
 type Props = $ReadOnly<{|
-  senderName: string,
-  senderId: UserId,
-  timestamp: number,
+  message: Message,
   onPressBack: () => void,
 |}>;
 
 /**
  * Shows sender's name and date of photo being displayed.
- *
- * @prop [senderName] - The sender's full name.
- * @prop [avatarUrl]
- * @prop [timestamp]
- * @prop [onPressBack]
  */
 export default function LightboxHeader(props: Props): Node {
-  const { onPressBack, senderName, senderId, timestamp } = props;
+  const { onPressBack, message } = props;
+  const { timestamp, sender_id: senderId } = message;
   const displayDate = humanDate(new Date(timestamp * 1000));
   const time = shortTime(new Date(timestamp * 1000));
   const subheader = `${displayDate} at ${time}`;
 
+  const sender = useSelector(state => tryGetUserForId(state, senderId));
+
   return (
     <SafeAreaView mode="padding" edges={['top']}>
       <OfflineNoticePlaceholder />
       <SafeAreaView mode="padding" edges={['right', 'left']} style={styles.contentArea}>
         <UserAvatarWithPresence size={36} userId={senderId} />
         <View style={styles.text}>
           <Text style={styles.name} numberOfLines={1}>
-            {senderName}
+            {sender?.full_name ?? message.sender_full_name}
           </Text>
           <Text style={styles.subheader} numberOfLines={1}>
             {subheader}