diff --git a/lib/shared/thread-utils.js b/lib/shared/thread-utils.js
index 23ab505f3..cf11e70f1 100644
--- a/lib/shared/thread-utils.js
+++ b/lib/shared/thread-utils.js
@@ -1,725 +1,726 @@
 // @flow
 
 import invariant from 'invariant';
 import _find from 'lodash/fp/find';
 import tinycolor from 'tinycolor2';
 
 import {
   permissionLookup,
   getAllThreadPermissions,
   makePermissionsBlob,
 } from '../permissions/thread-permissions';
 import type { ChatThreadItem } from '../selectors/chat-selectors';
+import type { MultimediaMessageInfo } from '../types/message-types';
 import type { TextMessageInfo } from '../types/message/text';
 import { userRelationshipStatus } from '../types/relationship-types';
 import {
   type RawThreadInfo,
   type ThreadInfo,
   type ThreadPermission,
   type MemberInfo,
   type ServerThreadInfo,
   type RelativeMemberInfo,
   type ThreadCurrentUserInfo,
   type RoleInfo,
   type ServerMemberInfo,
   type ThreadPermissionsInfo,
   threadTypes,
   threadPermissions,
 } from '../types/thread-types';
 import type { ThreadType } from '../types/thread-types';
 import { type UpdateInfo, updateTypes } from '../types/update-types';
 import type {
   GlobalAccountUserInfo,
   UserInfo,
   UserInfos,
 } from '../types/user-types';
 import { pluralize } from '../utils/text-utils';
 
 function colorIsDark(color: string) {
   return tinycolor(`#${color}`).isDark();
 }
 
 // Randomly distributed in RGB-space
 const hexNumerals = '0123456789abcdef';
 function generateRandomColor() {
   let color = '';
   for (let i = 0; i < 6; i++) {
     color += hexNumerals[Math.floor(Math.random() * 16)];
   }
   return color;
 }
 
 function generatePendingThreadColor(
   userIDs: $ReadOnlyArray<string>,
   viewerID: string,
 ) {
   const ids = [...userIDs, viewerID].sort().join('#');
 
   let hash = 0;
   for (let i = 0; i < ids.length; i++) {
     hash = 1009 * hash + ids.charCodeAt(i) * 83;
     hash %= 1000000007;
   }
   const hashString = hash.toString(16);
   return hashString.substring(hashString.length - 6).padStart(6, '8');
 }
 
 function threadHasPermission(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
   permission: ThreadPermission,
 ): boolean {
   invariant(
     !permissionsDisabledByBlock.has(permission) || threadInfo?.uiName,
     `${permission} can be disabled by a block, but threadHasPermission can't ` +
       'check for a block on RawThreadInfo. Please pass in ThreadInfo instead!',
   );
   if (!threadInfo || !threadInfo.currentUser.permissions[permission]) {
     return false;
   }
   return threadInfo.currentUser.permissions[permission].value;
 }
 
 function viewerIsMember(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return !!(
     threadInfo &&
     threadInfo.currentUser.role !== null &&
     threadInfo.currentUser.role !== undefined
   );
 }
 
 function threadIsInHome(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return !!(threadInfo && threadInfo.currentUser.subscription.home);
 }
 
 // Can have messages
 function threadInChatList(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return (
     viewerIsMember(threadInfo) &&
     threadHasPermission(threadInfo, threadPermissions.VISIBLE)
   );
 }
 
 function threadIsTopLevel(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return !!(
     threadInChatList(threadInfo) &&
     threadInfo &&
     threadInfo.type !== threadTypes.SIDEBAR
   );
 }
 
 function threadInBackgroundChatList(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
 ): boolean {
   return threadInChatList(threadInfo) && !threadIsInHome(threadInfo);
 }
 
 function threadInHomeChatList(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
 ): boolean {
   return threadInChatList(threadInfo) && threadIsInHome(threadInfo);
 }
 
 // Can have Calendar entries,
 // does appear as a top-level entity in the thread list
 function threadInFilterList(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
 ): boolean {
   return (
     threadInChatList(threadInfo) &&
     !!threadInfo &&
     threadInfo.type !== threadTypes.SIDEBAR
   );
 }
 
 function userIsMember(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
   userID: string,
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   return threadInfo.members.some(
     (member) =>
       member.id === userID && member.role !== null && member.role !== undefined,
   );
 }
 
 function threadActualMembers(
   memberInfos: $ReadOnlyArray<MemberInfo>,
 ): $ReadOnlyArray<string> {
   return memberInfos
     .filter(
       (memberInfo) => memberInfo.role !== null && memberInfo.role !== undefined,
     )
     .map((memberInfo) => memberInfo.id);
 }
 
 function threadIsGroupChat(threadInfo: ThreadInfo | RawThreadInfo) {
   return (
     threadInfo.members.filter(
       (member) =>
         member.role || member.permissions[threadPermissions.VOICED]?.value,
     ).length > 2
   );
 }
 
 function threadOrParentThreadIsGroupChat(
   threadInfo: RawThreadInfo | ThreadInfo,
 ) {
   return threadInfo.members.length > 2;
 }
 
 function threadIsPending(threadID: ?string) {
   return threadID?.startsWith('pending');
 }
 
 function threadIsPersonalAndPending(threadInfo: ?(ThreadInfo | RawThreadInfo)) {
   return (
     threadInfo?.type === threadTypes.PERSONAL && threadIsPending(threadInfo?.id)
   );
 }
 
 function getPendingThreadOtherUsers(threadInfo: ThreadInfo | RawThreadInfo) {
   invariant(threadIsPending(threadInfo.id), 'Thread should be pending');
 
   const otherUserIDs = threadInfo.id.split('/')[1];
   invariant(
     otherUserIDs,
     'Pending thread should contain other members id in its id',
   );
   return otherUserIDs.split('+');
 }
 
 function getSingleOtherUser(
   threadInfo: ThreadInfo | RawThreadInfo,
   viewerID: ?string,
 ) {
   if (!viewerID) {
     return undefined;
   }
 
   const otherMemberIDs = threadInfo.members
     .map((member) => member.id)
     .filter((id) => id !== viewerID);
   if (otherMemberIDs.length !== 1) {
     return undefined;
   }
   return otherMemberIDs[0];
 }
 
 function getPendingThreadKey(memberIDs: $ReadOnlyArray<string>) {
   return [...memberIDs].sort().join('+');
 }
 
 function createPendingThread(
   viewerID: string,
   threadType: ThreadType,
   members: $ReadOnlyArray<GlobalAccountUserInfo | UserInfo>,
   parentThreadID: ?string,
   threadColor: ?string,
 ) {
   const now = Date.now();
   const memberIDs = members.map((member) => member.id);
   const threadID = `pending/${getPendingThreadKey(memberIDs)}`;
 
   const permissions = {
     [threadPermissions.KNOW_OF]: true,
     [threadPermissions.VISIBLE]: true,
     [threadPermissions.VOICED]: true,
   };
 
   const membershipPermissions = getAllThreadPermissions(
     makePermissionsBlob(permissions, null, threadID, threadType),
     threadID,
   );
   const role = {
     id: `${threadID}/role`,
     name: 'Members',
     permissions,
     isDefault: true,
   };
 
   const rawThreadInfo = {
     id: threadID,
     type: threadType,
     name: null,
     description: null,
     color: threadColor ?? generatePendingThreadColor(memberIDs, viewerID),
     creationTime: now,
     parentThreadID: parentThreadID ?? null,
     members: [
       {
         id: viewerID,
         role: role.id,
         permissions: membershipPermissions,
       },
       ...members.map((member) => ({
         id: member.id,
         role: role.id,
         permissions: membershipPermissions,
       })),
     ],
     roles: {
       [role.id]: role,
     },
     currentUser: {
       role: role.id,
       permissions: membershipPermissions,
       subscription: {
         pushNotifs: false,
         home: false,
       },
       unread: false,
     },
   };
 
   const userInfos = Object.fromEntries(
     members.map((member) => [member.id, member]),
   );
 
   return threadInfoFromRawThreadInfo(rawThreadInfo, viewerID, userInfos);
 }
 
 function createPendingThreadItem(
   viewerID: string,
   user: GlobalAccountUserInfo,
 ): ChatThreadItem {
   const threadInfo = createPendingThread(viewerID, threadTypes.PERSONAL, [
     user,
   ]);
 
   return {
     type: 'chatThreadItem',
     threadInfo,
     mostRecentMessageInfo: null,
     mostRecentNonLocalMessage: null,
     lastUpdatedTime: threadInfo.creationTime,
     lastUpdatedTimeIncludingSidebars: threadInfo.creationTime,
     sidebars: [],
     pendingPersonalThreadUserInfo: {
       id: user.id,
       username: user.username,
     },
   };
 }
 
 function createPendingSidebar(
-  messageInfo: TextMessageInfo,
+  messageInfo: TextMessageInfo | MultimediaMessageInfo,
   threadInfo: ThreadInfo,
   viewerID: string,
 ) {
   const { id, username } = messageInfo.creator;
   const { id: parentThreadID, color } = threadInfo;
 
   invariant(username, 'username should be set in createPendingSidebar');
   const initialMemberUserInfo: GlobalAccountUserInfo = { id, username };
 
   return createPendingThread(
     viewerID,
     threadTypes.SIDEBAR,
     [initialMemberUserInfo],
     parentThreadID,
     color,
   );
 }
 
 function pendingThreadType(numberOfOtherMembers: number) {
   return numberOfOtherMembers === 1
     ? threadTypes.PERSONAL
     : threadTypes.CHAT_SECRET;
 }
 
 type RawThreadInfoOptions = {|
   +includeVisibilityRules?: ?boolean,
   +filterMemberList?: ?boolean,
 |};
 function rawThreadInfoFromServerThreadInfo(
   serverThreadInfo: ServerThreadInfo,
   viewerID: string,
   options?: RawThreadInfoOptions,
 ): ?RawThreadInfo {
   const includeVisibilityRules = options?.includeVisibilityRules;
   const filterMemberList = options?.filterMemberList;
 
   const members = [];
   let currentUser;
   for (const serverMember of serverThreadInfo.members) {
     if (
       filterMemberList &&
       serverMember.id !== viewerID &&
       !serverMember.role &&
       !memberHasAdminPowers(serverMember)
     ) {
       continue;
     }
     members.push({
       id: serverMember.id,
       role: serverMember.role,
       permissions: serverMember.permissions,
     });
     if (serverMember.id === viewerID) {
       currentUser = {
         role: serverMember.role,
         permissions: serverMember.permissions,
         subscription: serverMember.subscription,
         unread: serverMember.unread,
       };
     }
   }
 
   let currentUserPermissions;
   if (currentUser) {
     currentUserPermissions = currentUser.permissions;
   } else {
     currentUserPermissions = getAllThreadPermissions(null, serverThreadInfo.id);
     currentUser = {
       role: null,
       permissions: currentUserPermissions,
       subscription: {
         home: false,
         pushNotifs: false,
       },
       unread: null,
     };
   }
   if (!permissionLookup(currentUserPermissions, threadPermissions.KNOW_OF)) {
     return null;
   }
 
   const rawThreadInfo: RawThreadInfo = {
     id: serverThreadInfo.id,
     type: serverThreadInfo.type,
     name: serverThreadInfo.name,
     description: serverThreadInfo.description,
     color: serverThreadInfo.color,
     creationTime: serverThreadInfo.creationTime,
     parentThreadID: serverThreadInfo.parentThreadID,
     members,
     roles: serverThreadInfo.roles,
     currentUser,
   };
   const sourceMessageID = serverThreadInfo.sourceMessageID;
   if (sourceMessageID) {
     rawThreadInfo.sourceMessageID = sourceMessageID;
   }
   if (!includeVisibilityRules) {
     return rawThreadInfo;
   }
   return ({
     ...rawThreadInfo,
     visibilityRules: rawThreadInfo.type,
   }: any);
 }
 
 function robotextName(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): string {
   const threadUsernames: string[] = threadInfo.members
     .filter(
       (threadMember) =>
         threadMember.id !== viewerID &&
         (threadMember.role || memberHasAdminPowers(threadMember)),
     )
     .map(
       (threadMember) =>
         userInfos[threadMember.id] && userInfos[threadMember.id].username,
     )
     .filter(Boolean);
   if (threadUsernames.length === 0) {
     return 'just you';
   }
   return pluralize(threadUsernames);
 }
 
 function threadUIName(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): string {
   if (threadInfo.name) {
     return threadInfo.name;
   }
   return robotextName(threadInfo, viewerID, userInfos);
 }
 
 function threadInfoFromRawThreadInfo(
   rawThreadInfo: RawThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): ThreadInfo {
   const threadInfo: ThreadInfo = {
     id: rawThreadInfo.id,
     type: rawThreadInfo.type,
     name: rawThreadInfo.name,
     uiName: threadUIName(rawThreadInfo, viewerID, userInfos),
     description: rawThreadInfo.description,
     color: rawThreadInfo.color,
     creationTime: rawThreadInfo.creationTime,
     parentThreadID: rawThreadInfo.parentThreadID,
     members: rawThreadInfo.members,
     roles: rawThreadInfo.roles,
     currentUser: getCurrentUser(rawThreadInfo, viewerID, userInfos),
   };
   const { sourceMessageID } = rawThreadInfo;
   if (sourceMessageID) {
     threadInfo.sourceMessageID = sourceMessageID;
   }
   return threadInfo;
 }
 
 function getCurrentUser(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): ThreadCurrentUserInfo {
   if (!threadFrozenDueToBlock(threadInfo, viewerID, userInfos)) {
     return threadInfo.currentUser;
   }
 
   return {
     ...threadInfo.currentUser,
     permissions: {
       ...threadInfo.currentUser.permissions,
       ...disabledPermissions,
     },
   };
 }
 
 function threadIsWithBlockedUserOnly(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
   checkOnlyViewerBlock?: boolean,
 ): boolean {
   if (
     threadOrParentThreadIsGroupChat(threadInfo) ||
     threadOrParentThreadHasAdminRole(threadInfo)
   ) {
     return false;
   }
 
   const otherUserID = getSingleOtherUser(threadInfo, viewerID);
   if (!otherUserID) {
     return false;
   }
   const otherUserRelationshipStatus =
     userInfos[otherUserID]?.relationshipStatus;
 
   if (checkOnlyViewerBlock) {
     return (
       otherUserRelationshipStatus === userRelationshipStatus.BLOCKED_BY_VIEWER
     );
   }
 
   return (
     otherUserRelationshipStatus === userRelationshipStatus.BLOCKED_BY_VIEWER ||
     otherUserRelationshipStatus === userRelationshipStatus.BLOCKED_VIEWER ||
     otherUserRelationshipStatus === userRelationshipStatus.BOTH_BLOCKED
   );
 }
 
 function threadFrozenDueToBlock(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): boolean {
   return threadIsWithBlockedUserOnly(threadInfo, viewerID, userInfos);
 }
 
 function threadFrozenDueToViewerBlock(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): boolean {
   return threadIsWithBlockedUserOnly(threadInfo, viewerID, userInfos, true);
 }
 
 function rawThreadInfoFromThreadInfo(threadInfo: ThreadInfo): RawThreadInfo {
   const rawThreadInfo: RawThreadInfo = {
     id: threadInfo.id,
     type: threadInfo.type,
     name: threadInfo.name,
     description: threadInfo.description,
     color: threadInfo.color,
     creationTime: threadInfo.creationTime,
     parentThreadID: threadInfo.parentThreadID,
     members: threadInfo.members,
     roles: threadInfo.roles,
     currentUser: threadInfo.currentUser,
   };
   const { sourceMessageID } = threadInfo;
   if (sourceMessageID) {
     rawThreadInfo.sourceMessageID = sourceMessageID;
   }
   return rawThreadInfo;
 }
 
 const threadTypeDescriptions = {
   [threadTypes.CHAT_NESTED_OPEN]:
     'Anybody in the parent thread can see an open child thread.',
   [threadTypes.CHAT_SECRET]:
     'Only visible to its members and admins of ancestor threads.',
 };
 
 function usersInThreadInfo(threadInfo: RawThreadInfo | ThreadInfo): string[] {
   const userIDs = new Set();
   for (let member of threadInfo.members) {
     userIDs.add(member.id);
   }
   return [...userIDs];
 }
 
 function memberIsAdmin(
   memberInfo: RelativeMemberInfo | MemberInfo,
   threadInfo: ThreadInfo | RawThreadInfo,
 ) {
   return memberInfo.role && roleIsAdminRole(threadInfo.roles[memberInfo.role]);
 }
 
 // Since we don't have access to all of the ancestor ThreadInfos, we approximate
 // "parent admin" as anybody with CHANGE_ROLE permissions.
 function memberHasAdminPowers(
   memberInfo: RelativeMemberInfo | MemberInfo | ServerMemberInfo,
 ): boolean {
   return !!memberInfo.permissions[threadPermissions.CHANGE_ROLE]?.value;
 }
 
 function roleIsAdminRole(roleInfo: ?RoleInfo) {
   return roleInfo && !roleInfo.isDefault && roleInfo.name === 'Admins';
 }
 
 function threadHasAdminRole(
   threadInfo: ?(RawThreadInfo | ThreadInfo | ServerThreadInfo),
 ) {
   if (!threadInfo) {
     return false;
   }
   return _find({ name: 'Admins' })(threadInfo.roles);
 }
 
 function threadOrParentThreadHasAdminRole(
   threadInfo: RawThreadInfo | ThreadInfo,
 ) {
   return (
     threadInfo.members.filter((member) => memberHasAdminPowers(member)).length >
     0
   );
 }
 
 function identifyInvalidatedThreads(
   updateInfos: $ReadOnlyArray<UpdateInfo>,
 ): Set<string> {
   const invalidated = new Set();
   for (const updateInfo of updateInfos) {
     if (updateInfo.type === updateTypes.DELETE_THREAD) {
       invalidated.add(updateInfo.threadID);
     }
   }
   return invalidated;
 }
 
 const permissionsDisabledByBlockArray = [
   threadPermissions.VOICED,
   threadPermissions.EDIT_ENTRIES,
   threadPermissions.EDIT_THREAD,
   threadPermissions.CREATE_SUBTHREADS,
   threadPermissions.CREATE_SIDEBARS,
   threadPermissions.JOIN_THREAD,
   threadPermissions.EDIT_PERMISSIONS,
   threadPermissions.ADD_MEMBERS,
   threadPermissions.REMOVE_MEMBERS,
 ];
 
 const permissionsDisabledByBlock: Set<ThreadPermission> = new Set(
   permissionsDisabledByBlockArray,
 );
 
 const disabledPermissions: ThreadPermissionsInfo = permissionsDisabledByBlockArray.reduce(
   (permissions: ThreadPermissionsInfo, permission: string) => ({
     ...permissions,
     [permission]: { value: false, source: null },
   }),
   {},
 );
 
 // Consider updating itemHeight in native/chat/chat-thread-list.react.js
 // if you change this
 const emptyItemText =
   `Background threads are just like normal threads, except they don't ` +
   `contribute to your unread count.\n\n` +
   `To move a thread over here, switch the “Background” option in its settings.`;
 
 const threadSearchText = (
   threadInfo: RawThreadInfo | ThreadInfo,
   userInfos: UserInfos,
 ): string => {
   const searchTextArray = [];
   if (threadInfo.name) {
     searchTextArray.push(threadInfo.name);
   }
   if (threadInfo.description) {
     searchTextArray.push(threadInfo.description);
   }
   for (let member of threadInfo.members) {
     const isParentAdmin = memberHasAdminPowers(member);
     if (!member.role && !isParentAdmin) {
       continue;
     }
 
     const userInfo = userInfos[member.id];
     if (userInfo && userInfo.username) {
       searchTextArray.push(userInfo.username);
     }
   }
   return searchTextArray.join(' ');
 };
 
 function threadNoun(threadType: ThreadType) {
   return threadType === threadTypes.SIDEBAR ? 'sidebar' : 'thread';
 }
 
 export {
   colorIsDark,
   generateRandomColor,
   generatePendingThreadColor,
   threadHasPermission,
   viewerIsMember,
   threadInChatList,
   threadIsTopLevel,
   threadInBackgroundChatList,
   threadInHomeChatList,
   threadIsInHome,
   threadInFilterList,
   userIsMember,
   threadActualMembers,
   threadIsGroupChat,
   threadIsPending,
   threadIsPersonalAndPending,
   getPendingThreadOtherUsers,
   getSingleOtherUser,
   getPendingThreadKey,
   createPendingThread,
   createPendingThreadItem,
   createPendingSidebar,
   pendingThreadType,
   getCurrentUser,
   threadFrozenDueToBlock,
   threadFrozenDueToViewerBlock,
   rawThreadInfoFromServerThreadInfo,
   robotextName,
   threadInfoFromRawThreadInfo,
   rawThreadInfoFromThreadInfo,
   threadTypeDescriptions,
   usersInThreadInfo,
   memberIsAdmin,
   memberHasAdminPowers,
   roleIsAdminRole,
   threadHasAdminRole,
   identifyInvalidatedThreads,
   permissionsDisabledByBlock,
   emptyItemText,
   threadSearchText,
   threadNoun,
 };
diff --git a/native/chat/multimedia-message-multimedia.react.js b/native/chat/multimedia-message-multimedia.react.js
index b1644a04b..f84910c7c 100644
--- a/native/chat/multimedia-message-multimedia.react.js
+++ b/native/chat/multimedia-message-multimedia.react.js
@@ -1,313 +1,330 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import { messageKey } from 'lib/shared/message-utils';
+import { threadHasPermission } from 'lib/shared/thread-utils';
 import { type MediaInfo } from 'lib/types/media-types';
+import { threadPermissions } from 'lib/types/thread-types';
 
 import { type PendingMultimediaUpload } from '../input/input-state';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context';
 import type { NavigationRoute } from '../navigation/route-names';
 import {
   MultimediaModalRouteName,
   MultimediaTooltipModalRouteName,
 } from '../navigation/route-names';
 import { type Colors, useColors } from '../themes/colors';
 import { type VerticalBounds } from '../types/layout-types';
 import type { ViewStyle } from '../types/styles';
 import type { ChatNavigationProp } from './chat.react';
 import InlineMultimedia from './inline-multimedia.react';
 import type { ChatMultimediaMessageInfoItem } from './multimedia-message.react';
 import { multimediaTooltipHeight } from './multimedia-tooltip-modal.react';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Value, sub, interpolate, Extrapolate } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 type BaseProps = {|
   +mediaInfo: MediaInfo,
   +item: ChatMultimediaMessageInfoItem,
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
   +verticalBounds: ?VerticalBounds,
   +verticalOffset: number,
   +style: ViewStyle,
   +postInProgress: boolean,
   +pendingUpload: ?PendingMultimediaUpload,
   +messageFocused: boolean,
   +toggleMessageFocus: (messageKey: string) => void,
 |};
 type Props = {|
   ...BaseProps,
   // Redux state
   +colors: Colors,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
 |};
 type State = {|
   +opacity: number | Value,
 |};
 class MultimediaMessageMultimedia extends React.PureComponent<Props, State> {
   view: ?React.ElementRef<typeof View>;
   clickable = true;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       opacity: this.getOpacity(),
     };
   }
 
   static getStableKey(props: Props) {
     const { item, mediaInfo } = props;
     return `multimedia|${messageKey(item.messageInfo)}|${mediaInfo.index}`;
   }
 
   static getOverlayContext(props: Props) {
     const { overlayContext } = props;
     invariant(
       overlayContext,
       'MultimediaMessageMultimedia should have OverlayContext',
     );
     return overlayContext;
   }
 
   static getModalOverlayPosition(props: Props) {
     const overlayContext = MultimediaMessageMultimedia.getOverlayContext(props);
     const { visibleOverlays } = overlayContext;
     for (let overlay of visibleOverlays) {
       if (
         overlay.routeName === MultimediaModalRouteName &&
         overlay.presentedFrom === props.route.key &&
         overlay.routeKey === MultimediaMessageMultimedia.getStableKey(props)
       ) {
         return overlay.position;
       }
     }
     return undefined;
   }
 
   getOpacity() {
     const overlayPosition = MultimediaMessageMultimedia.getModalOverlayPosition(
       this.props,
     );
     if (!overlayPosition) {
       return 1;
     }
     return sub(
       1,
       interpolate(overlayPosition, {
         inputRange: [0.1, 0.11],
         outputRange: [0, 1],
         extrapolate: Extrapolate.CLAMP,
       }),
     );
   }
 
   componentDidUpdate(prevProps: Props) {
     const overlayPosition = MultimediaMessageMultimedia.getModalOverlayPosition(
       this.props,
     );
     const prevOverlayPosition = MultimediaMessageMultimedia.getModalOverlayPosition(
       prevProps,
     );
     if (overlayPosition !== prevOverlayPosition) {
       this.setState({ opacity: this.getOpacity() });
     }
 
     const scrollIsDisabled =
       MultimediaMessageMultimedia.getOverlayContext(this.props)
         .scrollBlockingModalStatus !== 'closed';
     const scrollWasDisabled =
       MultimediaMessageMultimedia.getOverlayContext(prevProps)
         .scrollBlockingModalStatus !== 'closed';
     if (!scrollIsDisabled && scrollWasDisabled) {
       this.clickable = true;
     }
   }
 
   render() {
     const { opacity } = this.state;
     const wrapperStyles = [styles.container, { opacity }, this.props.style];
 
     const { mediaInfo, pendingUpload, postInProgress } = this.props;
     return (
       <Animated.View style={wrapperStyles}>
         <View style={styles.expand} onLayout={this.onLayout} ref={this.viewRef}>
           <InlineMultimedia
             mediaInfo={mediaInfo}
             onPress={this.onPress}
             onLongPress={this.onLongPress}
             postInProgress={postInProgress}
             pendingUpload={pendingUpload}
             spinnerColor={this.props.colors.listSeparatorLabel}
           />
         </View>
       </Animated.View>
     );
   }
 
   onLayout = () => {};
 
   viewRef = (view: ?React.ElementRef<typeof View>) => {
     this.view = view;
   };
 
   onPress = () => {
     if (this.dismissKeyboardIfShowing()) {
       return;
     }
 
     const {
       view,
       props: { verticalBounds },
     } = this;
     if (!view || !verticalBounds) {
       return;
     }
 
     if (!this.clickable) {
       return;
     }
     this.clickable = false;
 
     const overlayContext = MultimediaMessageMultimedia.getOverlayContext(
       this.props,
     );
     overlayContext.setScrollBlockingModalStatus('open');
 
     const { mediaInfo, item } = this.props;
     view.measure((x, y, width, height, pageX, pageY) => {
       const coordinates = { x: pageX, y: pageY, width, height };
       this.props.navigation.navigate({
         name: MultimediaModalRouteName,
         key: MultimediaMessageMultimedia.getStableKey(this.props),
         params: {
           presentedFrom: this.props.route.key,
           mediaInfo,
           item,
           initialCoordinates: coordinates,
           verticalBounds,
         },
       });
     });
   };
 
+  visibleEntryIDs() {
+    const result = ['save'];
+
+    const canCreateSidebars = threadHasPermission(
+      this.props.item.threadInfo,
+      threadPermissions.CREATE_SIDEBARS,
+    );
+    if (canCreateSidebars) {
+      result.push('sidebar');
+    }
+
+    return result;
+  }
+
   onLongPress = () => {
     if (this.dismissKeyboardIfShowing()) {
       return;
     }
 
     const {
       view,
       props: { verticalBounds },
     } = this;
     if (!view || !verticalBounds) {
       return;
     }
 
     if (!this.clickable) {
       return;
     }
     this.clickable = false;
 
     const {
       messageFocused,
       toggleMessageFocus,
       item,
       mediaInfo,
       verticalOffset,
     } = this.props;
     if (!messageFocused) {
       toggleMessageFocus(messageKey(item.messageInfo));
     }
 
     const overlayContext = MultimediaMessageMultimedia.getOverlayContext(
       this.props,
     );
     overlayContext.setScrollBlockingModalStatus('open');
 
     view.measure((x, y, width, height, pageX, pageY) => {
       const coordinates = { x: pageX, y: pageY, width, height };
 
       const multimediaTop = pageY;
       const multimediaBottom = pageY + height;
       const boundsTop = verticalBounds.y;
       const boundsBottom = verticalBounds.y + verticalBounds.height;
 
       const belowMargin = 20;
       const belowSpace = multimediaTooltipHeight + belowMargin;
       const { isViewer } = item.messageInfo.creator;
       const directlyAboveMargin = isViewer ? 30 : 50;
       const aboveMargin = verticalOffset === 0 ? directlyAboveMargin : 20;
       const aboveSpace = multimediaTooltipHeight + aboveMargin;
 
       let location = 'below',
         margin = belowMargin;
       if (
         multimediaBottom + belowSpace > boundsBottom &&
         multimediaTop - aboveSpace > boundsTop
       ) {
         location = 'above';
         margin = aboveMargin;
       }
 
       this.props.navigation.navigate({
         name: MultimediaTooltipModalRouteName,
         params: {
           presentedFrom: this.props.route.key,
           mediaInfo,
           item,
           initialCoordinates: coordinates,
           verticalOffset,
           verticalBounds,
           location,
           margin,
+          visibleEntryIDs: this.visibleEntryIDs(),
         },
       });
     });
   };
 
   dismissKeyboardIfShowing = () => {
     const { keyboardState } = this.props;
     return !!(keyboardState && keyboardState.dismissKeyboardIfShowing());
   };
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     overflow: 'hidden',
   },
   expand: {
     flex: 1,
   },
 });
 
 export default React.memo<BaseProps>(
   function ConnectedMultimediaMessageMultimedia(props: BaseProps) {
     const colors = useColors();
     const keyboardState = React.useContext(KeyboardContext);
     const overlayContext = React.useContext(OverlayContext);
     return (
       <MultimediaMessageMultimedia
         {...props}
         colors={colors}
         keyboardState={keyboardState}
         overlayContext={overlayContext}
       />
     );
   },
 );
diff --git a/native/chat/multimedia-tooltip-modal.react.js b/native/chat/multimedia-tooltip-modal.react.js
index ec89c23b9..cb7f79635 100644
--- a/native/chat/multimedia-tooltip-modal.react.js
+++ b/native/chat/multimedia-tooltip-modal.react.js
@@ -1,40 +1,84 @@
 // @flow
 
+import invariant from 'invariant';
+
+import { createPendingSidebar } from 'lib/shared/thread-utils';
 import type { MediaInfo } from 'lib/types/media-types';
+import type {
+  DispatchFunctions,
+  ActionFunc,
+  BoundServerCall,
+} from 'lib/utils/action-utils';
 
+import type { InputState } from '../input/input-state';
 import { intentionalSaveMedia } from '../media/save-media';
+import type { AppNavigationProp } from '../navigation/app-navigator.react';
+import { MessageListRouteName } from '../navigation/route-names';
 import {
   createTooltip,
   tooltipHeight,
   type TooltipParams,
   type TooltipRoute,
 } from '../navigation/tooltip.react';
 import type { ChatMultimediaMessageInfoItem } from './multimedia-message.react';
 import MultimediaTooltipButton from './multimedia-tooltip-button.react';
 
 export type MultimediaTooltipModalParams = TooltipParams<{|
   +item: ChatMultimediaMessageInfoItem,
   +mediaInfo: MediaInfo,
   +verticalOffset: number,
 |}>;
 
 function onPressSave(route: TooltipRoute<'MultimediaTooltipModal'>) {
   const { mediaInfo, item } = route.params;
   const { id: uploadID, uri } = mediaInfo;
   const { id: messageServerID, localID: messageLocalID } = item.messageInfo;
   const ids = { uploadID, messageServerID, messageLocalID };
   return intentionalSaveMedia(uri, ids);
 }
 
+function onPressCreateSidebar(
+  route: TooltipRoute<'MultimediaTooltipModal'>,
+  dispatchFunctions: DispatchFunctions,
+  bindServerCall: (serverCall: ActionFunc) => BoundServerCall,
+  inputState: ?InputState,
+  navigation: AppNavigationProp<'MultimediaTooltipModal'>,
+  viewerID: ?string,
+) {
+  invariant(
+    viewerID,
+    'viewerID should be set in MultimediaTooltipModal.onPressCreateSidebar',
+  );
+  const { messageInfo, threadInfo } = route.params.item;
+  const pendingSidebarInfo = createPendingSidebar(
+    messageInfo,
+    threadInfo,
+    viewerID,
+  );
+  const initialMessageID = messageInfo.id;
+
+  navigation.navigate({
+    name: MessageListRouteName,
+    params: {
+      threadInfo: pendingSidebarInfo,
+      sidebarSourceMessageID: initialMessageID,
+    },
+    key: `${MessageListRouteName}${pendingSidebarInfo.id}`,
+  });
+}
+
 const spec = {
-  entries: [{ id: 'save', text: 'Save', onPress: onPressSave }],
+  entries: [
+    { id: 'save', text: 'Save', onPress: onPressSave },
+    { id: 'sidebar', text: 'Create sidebar', onPress: onPressCreateSidebar },
+  ],
 };
 
 const MultimediaTooltipModal = createTooltip<'MultimediaTooltipModal'>(
   MultimediaTooltipButton,
   spec,
 );
 
 const multimediaTooltipHeight = tooltipHeight(spec.entries.length);
 
 export { MultimediaTooltipModal, multimediaTooltipHeight };