diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js
index ade0ec1e4..72f4aa1a4 100644
--- a/native/chat/chat-input-bar.react.js
+++ b/native/chat/chat-input-bar.react.js
@@ -1,858 +1,855 @@
 // @flow
 
 import invariant from 'invariant';
 import _throttle from 'lodash/throttle';
 import * as React from 'react';
 import {
   View,
   TextInput,
   TouchableOpacity,
   Platform,
   Text,
   ActivityIndicator,
   TouchableWithoutFeedback,
   NativeAppEventEmitter,
 } from 'react-native';
 import { TextInputKeyboardMangerIOS } from 'react-native-keyboard-input';
 import Animated, { Easing } from 'react-native-reanimated';
 import FAIcon from 'react-native-vector-icons/FontAwesome';
 import Icon from 'react-native-vector-icons/Ionicons';
 import { useDispatch } from 'react-redux';
 
 import { joinThreadActionTypes, joinThread } from 'lib/actions/thread-actions';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
 import { localIDPrefix, trimMessage } from 'lib/shared/message-utils';
 import {
   threadHasPermission,
   viewerIsMember,
   threadFrozenDueToViewerBlock,
   threadActualMembers,
 } from 'lib/shared/thread-utils';
 import type { CalendarQuery } from 'lib/types/entry-types';
 import type { LoadingStatus } from 'lib/types/loading-types';
 import type { PhotoPaste } from 'lib/types/media-types';
 import { messageTypes } from 'lib/types/message-types';
 import type { Dispatch } from 'lib/types/redux-types';
 import {
   type ThreadInfo,
   threadPermissions,
   type ClientThreadJoinRequest,
   type ThreadJoinPayload,
 } from 'lib/types/thread-types';
 import { type UserInfos } from 'lib/types/user-types';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
 import Button from '../components/button.react';
 import ClearableTextInput from '../components/clearable-text-input.react';
 import { type InputState, InputStateContext } from '../input/input-state';
 import { getKeyboardHeight } from '../keyboard/keyboard';
 import KeyboardInputHost from '../keyboard/keyboard-input-host.react';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state';
 import {
   nonThreadCalendarQuery,
   activeThreadSelector,
 } from '../navigation/nav-selectors';
 import { NavContext } from '../navigation/navigation-context';
 import {
   type NavigationRoute,
   CameraModalRouteName,
   ImagePasteModalRouteName,
 } from '../navigation/route-names';
 import { useSelector } from '../redux/redux-utils';
 import { type Colors, useStyles, useColors } from '../themes/colors';
 import type { ViewStyle } from '../types/styles';
 import { runTiming } from '../utils/animation-utils';
 import type { ChatNavigationProp } from './chat.react';
 
 /* eslint-disable import/no-named-as-default-member */
 const {
   Value,
   Clock,
   block,
   set,
   cond,
   neq,
   sub,
   interpolate,
   stopClock,
 } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 const expandoButtonsAnimationConfig = {
   duration: 500,
   easing: Easing.inOut(Easing.ease),
 };
 const sendButtonAnimationConfig = {
   duration: 150,
   easing: Easing.inOut(Easing.ease),
 };
 
 const draftKeyFromThreadID = (threadID: string) =>
   `${threadID}/message_composer`;
 
 type BaseProps = {|
   +threadInfo: ThreadInfo,
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
 |};
 type Props = {|
   ...BaseProps,
   // Redux state
   +viewerID: ?string,
   +draft: string,
   +joinThreadLoadingStatus: LoadingStatus,
   +calendarQuery: () => CalendarQuery,
   +nextLocalID: number,
   +userInfos: UserInfos,
   +colors: Colors,
   +styles: typeof unboundStyles,
   // connectNav
   +isActive: boolean,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
   // Redux dispatch functions
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +joinThread: (request: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>,
   // withInputState
   +inputState: ?InputState,
 |};
 type State = {|
   +text: string,
   +buttonsExpanded: boolean,
 |};
 class ChatInputBar extends React.PureComponent<Props, State> {
   textInput: ?React.ElementRef<typeof TextInput>;
   clearableTextInput: ?ClearableTextInput;
 
   expandoButtonsOpen: Value;
   targetExpandoButtonsOpen: Value;
   expandoButtonsStyle: ViewStyle;
   cameraRollIconStyle: ViewStyle;
   cameraIconStyle: ViewStyle;
   expandIconStyle: ViewStyle;
 
   sendButtonContainerOpen: Value;
   targetSendButtonContainerOpen: Value;
   sendButtonContainerStyle: ViewStyle;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       text: props.draft,
       buttonsExpanded: true,
     };
 
     this.expandoButtonsOpen = new Value(1);
     this.targetExpandoButtonsOpen = new Value(1);
     const prevTargetExpandoButtonsOpen = new Value(1);
     const expandoButtonClock = new Clock();
     const expandoButtonsOpen = block([
       cond(neq(this.targetExpandoButtonsOpen, prevTargetExpandoButtonsOpen), [
         stopClock(expandoButtonClock),
         set(prevTargetExpandoButtonsOpen, this.targetExpandoButtonsOpen),
       ]),
       cond(
         neq(this.expandoButtonsOpen, this.targetExpandoButtonsOpen),
         set(
           this.expandoButtonsOpen,
           runTiming(
             expandoButtonClock,
             this.expandoButtonsOpen,
             this.targetExpandoButtonsOpen,
             true,
             expandoButtonsAnimationConfig,
           ),
         ),
       ),
       this.expandoButtonsOpen,
     ]);
 
     this.cameraRollIconStyle = {
       ...unboundStyles.cameraRollIcon,
       opacity: expandoButtonsOpen,
     };
     this.cameraIconStyle = {
       ...unboundStyles.cameraIcon,
       opacity: expandoButtonsOpen,
     };
 
     const expandoButtonsWidth = interpolate(expandoButtonsOpen, {
       inputRange: [0, 1],
       outputRange: [22, 60],
     });
     this.expandoButtonsStyle = {
       ...unboundStyles.expandoButtons,
       width: expandoButtonsWidth,
     };
 
     const expandOpacity = sub(1, expandoButtonsOpen);
     this.expandIconStyle = {
       ...unboundStyles.expandIcon,
       opacity: expandOpacity,
     };
 
     const initialSendButtonContainerOpen = trimMessage(props.draft) ? 1 : 0;
     this.sendButtonContainerOpen = new Value(initialSendButtonContainerOpen);
     this.targetSendButtonContainerOpen = new Value(
       initialSendButtonContainerOpen,
     );
     const prevTargetSendButtonContainerOpen = new Value(
       initialSendButtonContainerOpen,
     );
     const sendButtonClock = new Clock();
     const sendButtonContainerOpen = block([
       cond(
         neq(
           this.targetSendButtonContainerOpen,
           prevTargetSendButtonContainerOpen,
         ),
         [
           stopClock(sendButtonClock),
           set(
             prevTargetSendButtonContainerOpen,
             this.targetSendButtonContainerOpen,
           ),
         ],
       ),
       cond(
         neq(this.sendButtonContainerOpen, this.targetSendButtonContainerOpen),
         set(
           this.sendButtonContainerOpen,
           runTiming(
             sendButtonClock,
             this.sendButtonContainerOpen,
             this.targetSendButtonContainerOpen,
             true,
             sendButtonAnimationConfig,
           ),
         ),
       ),
       this.sendButtonContainerOpen,
     ]);
 
     const sendButtonContainerWidth = interpolate(sendButtonContainerOpen, {
       inputRange: [0, 1],
       outputRange: [4, 38],
     });
     this.sendButtonContainerStyle = { width: sendButtonContainerWidth };
   }
 
   static mediaGalleryOpen(props: Props) {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.mediaGalleryOpen);
   }
 
   static systemKeyboardShowing(props: Props) {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.systemKeyboardShowing);
   }
 
   get systemKeyboardShowing() {
     return ChatInputBar.systemKeyboardShowing(this.props);
   }
 
   immediatelyShowSendButton() {
     this.sendButtonContainerOpen.setValue(1);
     this.targetSendButtonContainerOpen.setValue(1);
   }
 
   updateSendButton(currentText: string) {
     this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);
   }
 
   componentDidMount() {
     if (this.props.isActive) {
       this.addReplyListener();
     }
   }
 
   componentWillUnmount() {
     if (this.props.isActive) {
       this.removeReplyListener();
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.isActive && !prevProps.isActive) {
       this.addReplyListener();
     } else if (!this.props.isActive && prevProps.isActive) {
       this.removeReplyListener();
     }
 
     const currentText = trimMessage(this.state.text);
     const prevText = trimMessage(prevState.text);
 
     if (
       (currentText === '' && prevText !== '') ||
       (currentText !== '' && prevText === '')
     ) {
       this.updateSendButton(currentText);
     }
 
     const systemKeyboardIsShowing = ChatInputBar.systemKeyboardShowing(
       this.props,
     );
     const systemKeyboardWasShowing = ChatInputBar.systemKeyboardShowing(
       prevProps,
     );
     if (systemKeyboardIsShowing && !systemKeyboardWasShowing) {
       this.hideButtons();
     } else if (!systemKeyboardIsShowing && systemKeyboardWasShowing) {
       this.expandButtons();
     }
 
     const imageGalleryIsOpen = ChatInputBar.mediaGalleryOpen(this.props);
     const imageGalleryWasOpen = ChatInputBar.mediaGalleryOpen(prevProps);
     if (!imageGalleryIsOpen && imageGalleryWasOpen) {
       this.hideButtons();
     } else if (imageGalleryIsOpen && !imageGalleryWasOpen) {
       this.expandButtons();
       this.setIOSKeyboardHeight();
     }
   }
 
   addReplyListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in addReplyListener',
     );
     this.props.inputState.addReplyListener(this.focusAndUpdateText);
   }
 
   removeReplyListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in removeReplyListener',
     );
     this.props.inputState.removeReplyListener(this.focusAndUpdateText);
   }
 
   setIOSKeyboardHeight() {
     if (Platform.OS !== 'ios') {
       return;
     }
     const { textInput } = this;
     if (!textInput) {
       return;
     }
     const keyboardHeight = getKeyboardHeight();
     if (keyboardHeight === null || keyboardHeight === undefined) {
       return;
     }
     TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
   }
 
   render() {
     const isMember = viewerIsMember(this.props.threadInfo);
     const canJoin = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.JOIN_THREAD,
     );
     let joinButton = null;
     if (!isMember && canJoin) {
       let buttonContent;
       if (this.props.joinThreadLoadingStatus === 'loading') {
         buttonContent = (
           <ActivityIndicator
             size="small"
             color="white"
             style={this.props.styles.joinThreadLoadingIndicator}
           />
         );
       } else {
         buttonContent = (
           <Text style={this.props.styles.joinButtonText}>Join Thread</Text>
         );
       }
       joinButton = (
         <View style={this.props.styles.joinButtonContainer}>
           <Button
             onPress={this.onPressJoin}
             iosActiveOpacity={0.5}
             style={this.props.styles.joinButton}
           >
             {buttonContent}
           </Button>
         </View>
       );
     }
 
     let content;
     if (threadHasPermission(this.props.threadInfo, threadPermissions.VOICED)) {
       content = this.renderInput();
     } else if (
       threadFrozenDueToViewerBlock(
         this.props.threadInfo,
         this.props.viewerID,
         this.props.userInfos,
       ) &&
       threadActualMembers(this.props.threadInfo.members).length === 2
     ) {
       content = (
         <Text style={this.props.styles.explanation}>
           You can&apos;t send messages to a user that you&apos;ve blocked.
         </Text>
       );
     } else if (isMember) {
       content = (
         <Text style={this.props.styles.explanation}>
           You don&apos;t have permission to send messages.
         </Text>
       );
     } else {
       const defaultRoleID = Object.keys(this.props.threadInfo.roles).find(
         (roleID) => this.props.threadInfo.roles[roleID].isDefault,
       );
       invariant(
         defaultRoleID !== undefined,
         'all threads should have a default role',
       );
       const defaultRole = this.props.threadInfo.roles[defaultRoleID];
       const membersAreVoiced = !!defaultRole.permissions[
         threadPermissions.VOICED
       ];
       if (membersAreVoiced && canJoin) {
         content = (
           <Text style={this.props.styles.explanation}>
             Join this thread to send messages.
           </Text>
         );
       } else {
         content = (
           <Text style={this.props.styles.explanation}>
             You don&apos;t have permission to send messages.
           </Text>
         );
       }
     }
 
     const keyboardInputHost =
       Platform.OS === 'android' ? null : (
         <KeyboardInputHost textInputRef={this.textInput} />
       );
 
     return (
       <View style={this.props.styles.container}>
         {joinButton}
         {content}
         {keyboardInputHost}
       </View>
     );
   }
 
   renderInput() {
     const expandoButton = (
       <TouchableOpacity
         onPress={this.expandButtons}
         activeOpacity={0.4}
         style={this.props.styles.expandButton}
       >
         <Animated.View style={this.expandIconStyle}>
           <FAIcon
             name="chevron-right"
             size={19}
             color={this.props.colors.listInputButton}
           />
         </Animated.View>
       </TouchableOpacity>
     );
     const threadColor = `#${this.props.threadInfo.color}`;
     return (
       <TouchableWithoutFeedback onPress={this.dismissKeyboard}>
         <View style={this.props.styles.inputContainer}>
           <Animated.View style={this.expandoButtonsStyle}>
             <View style={this.props.styles.innerExpandoButtons}>
               {this.state.buttonsExpanded ? expandoButton : null}
               <TouchableOpacity
                 onPress={this.showMediaGallery}
                 activeOpacity={0.4}
               >
                 <Animated.View style={this.cameraRollIconStyle}>
                   <Icon
                     name="md-image"
                     size={25}
                     color={this.props.colors.listInputButton}
                   />
                 </Animated.View>
               </TouchableOpacity>
               <TouchableOpacity
                 onPress={this.openCamera}
                 activeOpacity={0.4}
                 disabled={!this.state.buttonsExpanded}
               >
                 <Animated.View style={this.cameraIconStyle}>
                   <FAIcon
                     name="camera"
                     size={20}
                     color={this.props.colors.listInputButton}
                   />
                 </Animated.View>
               </TouchableOpacity>
               {this.state.buttonsExpanded ? null : expandoButton}
             </View>
           </Animated.View>
           <ClearableTextInput
             allowImagePasteForThreadID={this.props.threadInfo.id}
             value={this.state.text}
             onChangeText={this.updateText}
             placeholder="Send a message..."
             placeholderTextColor={this.props.colors.listInputButton}
             multiline={true}
             style={this.props.styles.textInput}
             textInputRef={this.textInputRef}
             ref={this.clearableTextInputRef}
           />
           <Animated.View style={this.sendButtonContainerStyle}>
             <TouchableOpacity
               onPress={this.onSend}
               activeOpacity={0.4}
               style={this.props.styles.sendButton}
               disabled={trimMessage(this.state.text) === ''}
             >
               <Icon
                 name="md-send"
                 size={25}
                 style={this.props.styles.sendIcon}
                 color={threadColor}
               />
             </TouchableOpacity>
           </Animated.View>
         </View>
       </TouchableWithoutFeedback>
     );
   }
 
   textInputRef = (textInput: ?React.ElementRef<typeof TextInput>) => {
     this.textInput = textInput;
   };
 
   clearableTextInputRef = (clearableTextInput: ?ClearableTextInput) => {
     this.clearableTextInput = clearableTextInput;
   };
 
   updateText = (text: string) => {
     this.setState({ text });
     this.saveDraft(text);
   };
 
   saveDraft = _throttle((text) => {
     global.CommCoreModule.updateDraft({
       key: draftKeyFromThreadID(this.props.threadInfo.id),
       text,
     });
   }, 400);
 
   focusAndUpdateText = (text: string) => {
     const currentText = this.state.text;
     if (!currentText.startsWith(text)) {
       const prependedText = text.concat(currentText);
       this.updateText(prependedText);
       this.immediatelyShowSendButton();
       this.immediatelyHideButtons();
     }
     invariant(this.textInput, 'textInput should be set in focusAndUpdateText');
     this.textInput.focus();
   };
 
   onSend = async () => {
     if (!trimMessage(this.state.text)) {
       return;
     }
     this.updateSendButton('');
 
     const { clearableTextInput } = this;
     invariant(
       clearableTextInput,
       'clearableTextInput should be sent in onSend',
     );
     let text = await clearableTextInput.getValueAndReset();
     text = trimMessage(text);
     if (!text) {
       return;
     }
 
     const localID = `${localIDPrefix}${this.props.nextLocalID}`;
     const creatorID = this.props.viewerID;
     invariant(creatorID, 'should have viewer ID in order to send a message');
     invariant(
       this.props.inputState,
       'inputState should be set in ChatInputBar.onSend',
     );
 
     this.props.inputState.sendTextMessage(
       {
         type: messageTypes.TEXT,
         localID,
         threadID: this.props.threadInfo.id,
         text,
         creatorID,
         time: Date.now(),
       },
       this.props.threadInfo,
     );
   };
 
   onPressJoin = () => {
     this.props.dispatchActionPromise(joinThreadActionTypes, this.joinAction());
   };
 
   async joinAction() {
     const query = this.props.calendarQuery();
     return await this.props.joinThread({
       threadID: this.props.threadInfo.id,
       calendarQuery: {
         startDate: query.startDate,
         endDate: query.endDate,
         filters: [
           ...query.filters,
           { type: 'threads', threadIDs: [this.props.threadInfo.id] },
         ],
       },
     });
   }
 
   expandButtons = () => {
     if (this.state.buttonsExpanded) {
       return;
     }
     this.targetExpandoButtonsOpen.setValue(1);
     this.setState({ buttonsExpanded: true });
   };
 
   hideButtons() {
     if (
       ChatInputBar.mediaGalleryOpen(this.props) ||
       !this.systemKeyboardShowing ||
       !this.state.buttonsExpanded
     ) {
       return;
     }
     this.targetExpandoButtonsOpen.setValue(0);
     this.setState({ buttonsExpanded: false });
   }
 
   immediatelyHideButtons() {
     this.expandoButtonsOpen.setValue(0);
     this.targetExpandoButtonsOpen.setValue(0);
     this.setState({ buttonsExpanded: false });
   }
 
   openCamera = async () => {
     this.dismissKeyboard();
     this.props.navigation.navigate({
       name: CameraModalRouteName,
       params: {
         presentedFrom: this.props.route.key,
-        thread: {
-          threadInfo: this.props.threadInfo,
-          sourceMessageID: this.props.route.params.sourceMessageID,
-        },
+        thread: this.props.threadInfo,
       },
     });
   };
 
   showMediaGallery = () => {
     const { keyboardState } = this.props;
     invariant(keyboardState, 'keyboardState should be initialized');
     keyboardState.showMediaGallery(this.props.threadInfo);
   };
 
   dismissKeyboard = () => {
     const { keyboardState } = this.props;
     keyboardState && keyboardState.dismissKeyboard();
   };
 }
 
 const unboundStyles = {
   cameraIcon: {
     paddingBottom: Platform.OS === 'android' ? 11 : 10,
     paddingRight: 3,
   },
   cameraRollIcon: {
     paddingBottom: Platform.OS === 'android' ? 8 : 7,
     paddingRight: 8,
   },
   container: {
     backgroundColor: 'listBackground',
   },
   expandButton: {
     bottom: 0,
     position: 'absolute',
     right: 0,
   },
   expandIcon: {
     paddingBottom: Platform.OS === 'android' ? 12 : 10,
   },
   expandoButtons: {
     alignSelf: 'flex-end',
   },
   explanation: {
     color: 'listBackgroundSecondaryLabel',
     paddingBottom: 4,
     paddingTop: 1,
     textAlign: 'center',
   },
   innerExpandoButtons: {
     alignItems: 'flex-end',
     alignSelf: 'flex-end',
     flexDirection: 'row',
   },
   inputContainer: {
     flexDirection: 'row',
   },
   joinButton: {
     backgroundColor: 'mintButton',
     borderRadius: 5,
     flex: 1,
     justifyContent: 'center',
     marginHorizontal: 12,
     marginVertical: 3,
     paddingBottom: 5,
     paddingTop: 3,
   },
   joinButtonContainer: {
     flexDirection: 'row',
     height: 36,
   },
   joinButtonText: {
     color: 'listBackground',
     fontSize: 20,
     textAlign: 'center',
   },
   joinThreadLoadingIndicator: {
     paddingVertical: 2,
   },
   sendButton: {
     position: 'absolute',
     bottom: Platform.OS === 'android' ? 4 : 3,
     left: 0,
   },
   sendIcon: {
     paddingLeft: 9,
     paddingRight: 8,
     paddingVertical: 5,
   },
   textInput: {
     backgroundColor: 'listInputBackground',
     borderRadius: 10,
     color: 'listForegroundLabel',
     fontSize: 16,
     marginLeft: 4,
     marginVertical: 5,
     maxHeight: 250,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
 };
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 
 export default React.memo<BaseProps>(function ConnectedChatInputBar(
   props: BaseProps,
 ) {
   const inputState = React.useContext(InputStateContext);
   const keyboardState = React.useContext(KeyboardContext);
   const navContext = React.useContext(NavContext);
 
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const isActive = React.useMemo(
     () => props.threadInfo.id === activeThreadSelector(navContext),
     [props.threadInfo.id, navContext],
   );
 
   const draftKey = draftKeyFromThreadID(props.threadInfo.id);
   const draft = React.useMemo(
     () => global.CommCoreModule.getDraft(draftKey),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );
 
   const viewerID = useSelector(
     (state) => state.currentUserInfo && state.currentUserInfo.id,
   );
   const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
   const calendarQuery = useSelector((state) =>
     nonThreadCalendarQuery({
       redux: state,
       navContext,
     }),
   );
   const nextLocalID = useSelector((state) => state.nextLocalID);
   const userInfos = useSelector((state) => state.userStore.userInfos);
 
   const dispatch = useDispatch();
   const dispatchActionPromise = useDispatchActionPromise();
   const callJoinThread = useServerCall(joinThread);
 
   const imagePastedCallback = React.useCallback(
     (imagePastedEvent) => {
       if (props.threadInfo.id !== imagePastedEvent['threadID']) {
         return;
       }
       const pastedImage: PhotoPaste = {
         step: 'photo_paste',
         dimensions: {
           height: imagePastedEvent.height,
           width: imagePastedEvent.width,
         },
         filename: imagePastedEvent.fileName,
         uri: 'file://' + imagePastedEvent.filePath,
         selectTime: 0,
         sendTime: 0,
         retries: 0,
       };
       props.navigation.navigate({
         name: ImagePasteModalRouteName,
         params: {
           imagePasteStagingInfo: pastedImage,
           thread: {
             threadInfo: props.threadInfo,
             sourceMessageID: props.route.params.sourceMessageID,
           },
         },
       });
     },
     [props.navigation, props.route.params.sourceMessageID, props.threadInfo],
   );
 
   React.useEffect(() => {
     const imagePasteListener = NativeAppEventEmitter.addListener(
       'imagePasted',
       imagePastedCallback,
     );
     return () => imagePasteListener.remove();
   }, [imagePastedCallback]);
 
   return (
     <ChatInputBar
       {...props}
       viewerID={viewerID}
       draft={draft}
       joinThreadLoadingStatus={joinThreadLoadingStatus}
       calendarQuery={calendarQuery}
       nextLocalID={nextLocalID}
       userInfos={userInfos}
       colors={colors}
       styles={styles}
       isActive={isActive}
       keyboardState={keyboardState}
       dispatch={dispatch}
       dispatchActionPromise={dispatchActionPromise}
       joinThread={callJoinThread}
       inputState={inputState}
     />
   );
 });
diff --git a/native/media/camera-modal.react.js b/native/media/camera-modal.react.js
index fc5406694..6e2a5d11e 100644
--- a/native/media/camera-modal.react.js
+++ b/native/media/camera-modal.react.js
@@ -1,1207 +1,1204 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
   Platform,
   Image,
   Animated,
   Easing,
 } from 'react-native';
 import { RNCamera } from 'react-native-camera';
 import filesystem from 'react-native-fs';
 import {
   PinchGestureHandler,
   TapGestureHandler,
   State as GestureState,
 } from 'react-native-gesture-handler';
 import Orientation from 'react-native-orientation-locker';
 import type { Orientations } from 'react-native-orientation-locker';
 import Reanimated, {
   Easing as ReanimatedEasing,
 } from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/Ionicons';
 import { useDispatch } from 'react-redux';
 
 import { pathFromURI, filenameFromPathOrURI } from 'lib/media/file-utils';
 import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils';
 import type { PhotoCapture } from 'lib/types/media-types';
 import type { Dispatch } from 'lib/types/redux-types';
-import type { OptimisticThreadInfo } from 'lib/types/thread-types';
+import type { ThreadInfo } from 'lib/types/thread-types';
 
 import ContentLoading from '../components/content-loading.react';
 import ConnectedStatusBar from '../connected-status-bar.react';
 import { type InputState, InputStateContext } from '../input/input-state';
 import type { AppNavigationProp } from '../navigation/app-navigator.react';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context';
 import type { NavigationRoute } from '../navigation/route-names';
 import { updateDeviceCameraInfoActionType } from '../redux/action-types';
 import { type DimensionsInfo } from '../redux/dimensions-updater.react';
 import { useSelector } from '../redux/redux-utils';
 import { colors } from '../themes/colors';
 import { type DeviceCameraInfo } from '../types/camera';
 import type { NativeMethods } from '../types/react-native';
 import type { ViewStyle } from '../types/styles';
 import { clamp, gestureJustEnded } from '../utils/animation-utils';
 import SendMediaButton from './send-media-button.react';
 
 /* eslint-disable import/no-named-as-default-member */
 const {
   Value,
   Clock,
   event,
   Extrapolate,
   block,
   set,
   call,
   cond,
   not,
   and,
   or,
   eq,
   greaterThan,
   lessThan,
   add,
   sub,
   multiply,
   divide,
   abs,
   interpolate,
   startClock,
   stopClock,
   clockRunning,
   timing,
   spring,
   SpringUtils,
 } = Reanimated;
 /* eslint-enable import/no-named-as-default-member */
 
 const maxZoom = 16;
 const zoomUpdateFactor = (() => {
   if (Platform.OS === 'ios') {
     return 0.002;
   }
   if (Platform.OS === 'android' && Platform.Version > 26) {
     return 0.005;
   }
   if (Platform.OS === 'android' && Platform.Version > 23) {
     return 0.01;
   }
   return 0.03;
 })();
 
 const stagingModeAnimationConfig = {
   duration: 150,
   easing: ReanimatedEasing.inOut(ReanimatedEasing.ease),
 };
 const sendButtonAnimationConfig = {
   duration: 150,
   easing: Easing.inOut(Easing.ease),
   useNativeDriver: true,
 };
 
 const indicatorSpringConfig = {
   ...SpringUtils.makeDefaultConfig(),
   damping: 0,
   mass: 0.6,
   toValue: 1,
 };
 const indicatorTimingConfig = {
   duration: 500,
   easing: ReanimatedEasing.out(ReanimatedEasing.ease),
   toValue: 0,
 };
 function runIndicatorAnimation(
   // Inputs
   springClock: Clock,
   delayClock: Clock,
   timingClock: Clock,
   animationRunning: Value,
   // Outputs
   scale: Value,
   opacity: Value,
 ): Value {
   const delayStart = new Value(0);
 
   const springScale = new Value(0.75);
   const delayScale = new Value(0);
   const timingScale = new Value(0.75);
 
   const animatedScale = cond(
     clockRunning(springClock),
     springScale,
     cond(clockRunning(delayClock), delayScale, timingScale),
   );
   const lastAnimatedScale = new Value(0.75);
   const numScaleLoops = new Value(0);
 
   const springState = {
     finished: new Value(1),
     velocity: new Value(0),
     time: new Value(0),
     position: springScale,
   };
   const timingState = {
     finished: new Value(1),
     frameTime: new Value(0),
     time: new Value(0),
     position: timingScale,
   };
 
   return block([
     cond(not(animationRunning), [
       set(springState.finished, 0),
       set(springState.velocity, 0),
       set(springState.time, 0),
       set(springScale, 0.75),
       set(lastAnimatedScale, 0.75),
       set(numScaleLoops, 0),
       set(opacity, 1),
       startClock(springClock),
     ]),
     [
       cond(
         clockRunning(springClock),
         spring(springClock, springState, indicatorSpringConfig),
       ),
       timing(timingClock, timingState, indicatorTimingConfig),
     ],
     [
       cond(
         and(
           greaterThan(animatedScale, 1.2),
           not(greaterThan(lastAnimatedScale, 1.2)),
         ),
         [
           set(numScaleLoops, add(numScaleLoops, 1)),
           cond(greaterThan(numScaleLoops, 1), [
             set(springState.finished, 1),
             stopClock(springClock),
             set(delayScale, springScale),
             set(delayStart, delayClock),
             startClock(delayClock),
           ]),
         ],
       ),
       set(lastAnimatedScale, animatedScale),
     ],
     cond(
       and(
         clockRunning(delayClock),
         greaterThan(delayClock, add(delayStart, 400)),
       ),
       [
         stopClock(delayClock),
         set(timingState.finished, 0),
         set(timingState.frameTime, 0),
         set(timingState.time, 0),
         set(timingScale, delayScale),
         startClock(timingClock),
       ],
     ),
     cond(
       and(springState.finished, timingState.finished),
       stopClock(timingClock),
     ),
     set(scale, animatedScale),
     cond(clockRunning(timingClock), set(opacity, clamp(animatedScale, 0, 1))),
   ]);
 }
 
 export type CameraModalParams = {|
   +presentedFrom: string,
-  +thread: OptimisticThreadInfo,
+  +thread: ThreadInfo,
 |};
 
 type TouchableOpacityInstance = React.AbstractComponent<
   React.ElementConfig<typeof TouchableOpacity>,
   NativeMethods,
 >;
 
 type BaseProps = {|
   +navigation: AppNavigationProp<'CameraModal'>,
   +route: NavigationRoute<'CameraModal'>,
 |};
 type Props = {|
   ...BaseProps,
   // Redux state
   +dimensions: DimensionsInfo,
   +deviceCameraInfo: DeviceCameraInfo,
   +deviceOrientation: Orientations,
   +foreground: boolean,
   // Redux dispatch functions
   +dispatch: Dispatch,
   // withInputState
   +inputState: ?InputState,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
 |};
 type State = {|
   +zoom: number,
   +useFrontCamera: boolean,
   +hasCamerasOnBothSides: boolean,
   +flashMode: number,
   +autoFocusPointOfInterest: ?{|
     x: number,
     y: number,
     autoExposure?: boolean,
   |},
   +stagingMode: boolean,
   +pendingPhotoCapture: ?PhotoCapture,
 |};
 class CameraModal extends React.PureComponent<Props, State> {
   camera: ?RNCamera;
 
   pinchEvent;
   pinchHandler = React.createRef();
   tapEvent;
   tapHandler = React.createRef();
   animationCode: Value;
 
   closeButton: ?React.ElementRef<TouchableOpacityInstance>;
   closeButtonX = new Value(-1);
   closeButtonY = new Value(-1);
   closeButtonWidth = new Value(0);
   closeButtonHeight = new Value(0);
 
   photoButton: ?React.ElementRef<TouchableOpacityInstance>;
   photoButtonX = new Value(-1);
   photoButtonY = new Value(-1);
   photoButtonWidth = new Value(0);
   photoButtonHeight = new Value(0);
 
   switchCameraButton: ?React.ElementRef<TouchableOpacityInstance>;
   switchCameraButtonX = new Value(-1);
   switchCameraButtonY = new Value(-1);
   switchCameraButtonWidth = new Value(0);
   switchCameraButtonHeight = new Value(0);
 
   flashButton: ?React.ElementRef<TouchableOpacityInstance>;
   flashButtonX = new Value(-1);
   flashButtonY = new Value(-1);
   flashButtonWidth = new Value(0);
   flashButtonHeight = new Value(0);
 
   focusIndicatorX = new Value(-1);
   focusIndicatorY = new Value(-1);
   focusIndicatorScale = new Value(0);
   focusIndicatorOpacity = new Value(0);
 
   cancelIndicatorAnimation = new Value(0);
 
   cameraIDsFetched = false;
 
   stagingModeProgress = new Value(0);
   sendButtonProgress = new Animated.Value(0);
   sendButtonStyle: ViewStyle;
   overlayStyle: ViewStyle;
 
   constructor(props: Props) {
     super(props);
 
     this.state = {
       zoom: 0,
       useFrontCamera: props.deviceCameraInfo.defaultUseFrontCamera,
       hasCamerasOnBothSides: props.deviceCameraInfo.hasCamerasOnBothSides,
       flashMode: RNCamera.Constants.FlashMode.off,
       autoFocusPointOfInterest: undefined,
       stagingMode: false,
       pendingPhotoCapture: undefined,
     };
 
     const sendButtonScale = this.sendButtonProgress.interpolate({
       inputRange: [0, 1],
       outputRange: ([1.1, 1]: number[]), // Flow...
     });
     this.sendButtonStyle = {
       opacity: this.sendButtonProgress,
       transform: [{ scale: sendButtonScale }],
     };
 
     const overlayOpacity = interpolate(this.stagingModeProgress, {
       inputRange: [0, 0.01, 1],
       outputRange: [0, 0.5, 0],
       extrapolate: Extrapolate.CLAMP,
     });
     this.overlayStyle = {
       ...styles.overlay,
       opacity: overlayOpacity,
     };
 
     const pinchState = new Value(-1);
     const pinchScale = new Value(1);
     this.pinchEvent = event([
       {
         nativeEvent: {
           state: pinchState,
           scale: pinchScale,
         },
       },
     ]);
 
     const tapState = new Value(-1);
     const tapX = new Value(0);
     const tapY = new Value(0);
     this.tapEvent = event([
       {
         nativeEvent: {
           state: tapState,
           x: tapX,
           y: tapY,
         },
       },
     ]);
 
     this.animationCode = block([
       this.zoomAnimationCode(pinchState, pinchScale),
       this.focusAnimationCode(tapState, tapX, tapY),
     ]);
   }
 
   zoomAnimationCode(pinchState: Value, pinchScale: Value): Value {
     const pinchJustEnded = gestureJustEnded(pinchState);
 
     const zoomBase = new Value(1);
     const zoomReported = new Value(1);
 
     const currentZoom = interpolate(multiply(zoomBase, pinchScale), {
       inputRange: [1, 8],
       outputRange: [1, 8],
       extrapolate: Extrapolate.CLAMP,
     });
     const cameraZoomFactor = interpolate(zoomReported, {
       inputRange: [1, 8],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     const resolvedZoom = cond(
       eq(pinchState, GestureState.ACTIVE),
       currentZoom,
       zoomBase,
     );
 
     return [
       cond(pinchJustEnded, set(zoomBase, currentZoom)),
       cond(
         or(
           pinchJustEnded,
           greaterThan(
             abs(sub(divide(resolvedZoom, zoomReported), 1)),
             zoomUpdateFactor,
           ),
         ),
         [
           set(zoomReported, resolvedZoom),
           call([cameraZoomFactor], this.updateZoom),
         ],
       ),
     ];
   }
 
   focusAnimationCode(tapState: Value, tapX: Value, tapY: Value): Value {
     const lastTapX = new Value(0);
     const lastTapY = new Value(0);
     const fingerJustReleased = and(
       gestureJustEnded(tapState),
       this.outsideButtons(lastTapX, lastTapY),
     );
 
     const indicatorSpringClock = new Clock();
     const indicatorDelayClock = new Clock();
     const indicatorTimingClock = new Clock();
     const indicatorAnimationRunning = or(
       clockRunning(indicatorSpringClock),
       clockRunning(indicatorDelayClock),
       clockRunning(indicatorTimingClock),
     );
 
     return [
       cond(fingerJustReleased, [
         call([tapX, tapY], this.focusOnPoint),
         set(this.focusIndicatorX, tapX),
         set(this.focusIndicatorY, tapY),
         stopClock(indicatorSpringClock),
         stopClock(indicatorDelayClock),
         stopClock(indicatorTimingClock),
       ]),
       cond(this.cancelIndicatorAnimation, [
         set(this.cancelIndicatorAnimation, 0),
         stopClock(indicatorSpringClock),
         stopClock(indicatorDelayClock),
         stopClock(indicatorTimingClock),
         set(this.focusIndicatorOpacity, 0),
       ]),
       cond(
         or(fingerJustReleased, indicatorAnimationRunning),
         runIndicatorAnimation(
           indicatorSpringClock,
           indicatorDelayClock,
           indicatorTimingClock,
           indicatorAnimationRunning,
           this.focusIndicatorScale,
           this.focusIndicatorOpacity,
         ),
       ),
       set(lastTapX, tapX),
       set(lastTapY, tapY),
     ];
   }
 
   outsideButtons(x: Value, y: Value) {
     const {
       closeButtonX,
       closeButtonY,
       closeButtonWidth,
       closeButtonHeight,
       photoButtonX,
       photoButtonY,
       photoButtonWidth,
       photoButtonHeight,
       switchCameraButtonX,
       switchCameraButtonY,
       switchCameraButtonWidth,
       switchCameraButtonHeight,
       flashButtonX,
       flashButtonY,
       flashButtonWidth,
       flashButtonHeight,
     } = this;
     return and(
       or(
         lessThan(x, closeButtonX),
         greaterThan(x, add(closeButtonX, closeButtonWidth)),
         lessThan(y, closeButtonY),
         greaterThan(y, add(closeButtonY, closeButtonHeight)),
       ),
       or(
         lessThan(x, photoButtonX),
         greaterThan(x, add(photoButtonX, photoButtonWidth)),
         lessThan(y, photoButtonY),
         greaterThan(y, add(photoButtonY, photoButtonHeight)),
       ),
       or(
         lessThan(x, switchCameraButtonX),
         greaterThan(x, add(switchCameraButtonX, switchCameraButtonWidth)),
         lessThan(y, switchCameraButtonY),
         greaterThan(y, add(switchCameraButtonY, switchCameraButtonHeight)),
       ),
       or(
         lessThan(x, flashButtonX),
         greaterThan(x, add(flashButtonX, flashButtonWidth)),
         lessThan(y, flashButtonY),
         greaterThan(y, add(flashButtonY, flashButtonHeight)),
       ),
     );
   }
 
   static isActive(props) {
     const { overlayContext } = props;
     invariant(overlayContext, 'CameraModal should have OverlayContext');
     return !overlayContext.isDismissing;
   }
 
   componentDidMount() {
     if (CameraModal.isActive(this.props)) {
       Orientation.unlockAllOrientations();
     }
   }
 
   componentWillUnmount() {
     if (CameraModal.isActive(this.props)) {
       Orientation.lockToPortrait();
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const isActive = CameraModal.isActive(this.props);
     const wasActive = CameraModal.isActive(prevProps);
     if (isActive && !wasActive) {
       Orientation.unlockAllOrientations();
     } else if (!isActive && wasActive) {
       Orientation.lockToPortrait();
     }
 
     if (!this.state.hasCamerasOnBothSides && prevState.hasCamerasOnBothSides) {
       this.switchCameraButtonX.setValue(-1);
       this.switchCameraButtonY.setValue(-1);
       this.switchCameraButtonWidth.setValue(0);
       this.switchCameraButtonHeight.setValue(0);
     }
 
     if (this.props.deviceOrientation !== prevProps.deviceOrientation) {
       this.setState({ autoFocusPointOfInterest: null });
       this.cancelIndicatorAnimation.setValue(1);
     }
 
     if (this.props.foreground && !prevProps.foreground && this.camera) {
       this.camera.refreshAuthorizationStatus();
     }
 
     if (this.state.stagingMode && !prevState.stagingMode) {
       this.cancelIndicatorAnimation.setValue(1);
       this.focusIndicatorOpacity.setValue(0);
       timing(this.stagingModeProgress, {
         ...stagingModeAnimationConfig,
         toValue: 1,
       }).start();
     } else if (!this.state.stagingMode && prevState.stagingMode) {
       this.stagingModeProgress.setValue(0);
     }
 
     if (this.state.pendingPhotoCapture && !prevState.pendingPhotoCapture) {
       Animated.timing(this.sendButtonProgress, {
         ...sendButtonAnimationConfig,
         toValue: 1,
       }).start();
     } else if (
       !this.state.pendingPhotoCapture &&
       prevState.pendingPhotoCapture
     ) {
       CameraModal.cleanUpPendingPhotoCapture(prevState.pendingPhotoCapture);
       this.sendButtonProgress.setValue(0);
     }
   }
 
   static async cleanUpPendingPhotoCapture(pendingPhotoCapture: PhotoCapture) {
     const path = pathFromURI(pendingPhotoCapture.uri);
     if (!path) {
       return;
     }
     try {
       await filesystem.unlink(path);
     } catch (e) {}
   }
 
   get containerStyle() {
     const { overlayContext } = this.props;
     invariant(overlayContext, 'CameraModal should have OverlayContext');
     return {
       ...styles.container,
       opacity: overlayContext.position,
     };
   }
 
   get focusIndicatorStyle() {
     return {
       ...styles.focusIndicator,
       opacity: this.focusIndicatorOpacity,
       transform: [
         { translateX: this.focusIndicatorX },
         { translateY: this.focusIndicatorY },
         { scale: this.focusIndicatorScale },
       ],
     };
   }
 
   renderCamera = ({ camera, status }) => {
     if (camera && camera._cameraHandle) {
       this.fetchCameraIDs(camera);
     }
     if (this.state.stagingMode) {
       return this.renderStagingView();
     }
     const topButtonStyle = {
       top: Math.max(this.props.dimensions.topInset, 6),
     };
     return (
       <>
         {this.renderCameraContent(status)}
         <TouchableOpacity
           onPress={this.close}
           onLayout={this.onCloseButtonLayout}
           style={[styles.closeButton, topButtonStyle]}
           ref={this.closeButtonRef}
         >
           <Text style={styles.closeIcon}>×</Text>
         </TouchableOpacity>
       </>
     );
   };
 
   renderStagingView() {
     let image = null;
     const { pendingPhotoCapture } = this.state;
     if (pendingPhotoCapture) {
       const imageSource = { uri: pendingPhotoCapture.uri };
       image = <Image source={imageSource} style={styles.stagingImage} />;
     } else {
       image = <ContentLoading fillType="flex" colors={colors.dark} />;
     }
 
     const topButtonStyle = {
       top: Math.max(this.props.dimensions.topInset - 3, 3),
     };
     const sendButtonContainerStyle = {
       bottom: this.props.dimensions.bottomInset + 22,
     };
     return (
       <>
         {image}
         <TouchableOpacity
           onPress={this.clearPendingImage}
           style={[styles.retakeButton, topButtonStyle]}
         >
           <Icon name="ios-arrow-back" style={styles.retakeIcon} />
         </TouchableOpacity>
         <SendMediaButton
           onPress={this.sendPhoto}
           pointerEvents={pendingPhotoCapture ? 'auto' : 'none'}
           containerStyle={[
             styles.sendButtonContainer,
             sendButtonContainerStyle,
           ]}
           style={this.sendButtonStyle}
         />
       </>
     );
   }
 
   renderCameraContent(status) {
     if (status === 'PENDING_AUTHORIZATION') {
       return <ContentLoading fillType="flex" colors={colors.dark} />;
     } else if (status === 'NOT_AUTHORIZED') {
       return (
         <View style={styles.authorizationDeniedContainer}>
           <Text style={styles.authorizationDeniedText}>
             {"don't have permission :("}
           </Text>
         </View>
       );
     }
 
     let switchCameraButton = null;
     if (this.state.hasCamerasOnBothSides) {
       switchCameraButton = (
         <TouchableOpacity
           onPress={this.switchCamera}
           onLayout={this.onSwitchCameraButtonLayout}
           style={styles.switchCameraButton}
           ref={this.switchCameraButtonRef}
         >
           <Icon name="ios-reverse-camera" style={styles.switchCameraIcon} />
         </TouchableOpacity>
       );
     }
 
     let flashIcon;
     if (this.state.flashMode === RNCamera.Constants.FlashMode.on) {
       flashIcon = <Icon name="ios-flash" style={styles.flashIcon} />;
     } else if (this.state.flashMode === RNCamera.Constants.FlashMode.off) {
       flashIcon = <Icon name="ios-flash-off" style={styles.flashIcon} />;
     } else {
       flashIcon = (
         <>
           <Icon name="ios-flash" style={styles.flashIcon} />
           <Text style={styles.flashIconAutoText}>A</Text>
         </>
       );
     }
 
     const topButtonStyle = {
       top: Math.max(this.props.dimensions.topInset - 3, 3),
     };
     const bottomButtonsContainerStyle = {
       bottom: this.props.dimensions.bottomInset + 20,
     };
     return (
       <PinchGestureHandler
         onGestureEvent={this.pinchEvent}
         onHandlerStateChange={this.pinchEvent}
         simultaneousHandlers={this.tapHandler}
         ref={this.pinchHandler}
       >
         <Reanimated.View style={styles.fill}>
           <TapGestureHandler
             onHandlerStateChange={this.tapEvent}
             simultaneousHandlers={this.pinchHandler}
             waitFor={this.pinchHandler}
             ref={this.tapHandler}
           >
             <Reanimated.View style={styles.fill}>
               <Reanimated.View style={this.focusIndicatorStyle} />
               <TouchableOpacity
                 onPress={this.changeFlashMode}
                 onLayout={this.onFlashButtonLayout}
                 style={[styles.flashButton, topButtonStyle]}
                 ref={this.flashButtonRef}
               >
                 {flashIcon}
               </TouchableOpacity>
               <View
                 style={[
                   styles.bottomButtonsContainer,
                   bottomButtonsContainerStyle,
                 ]}
               >
                 <TouchableOpacity
                   onPress={this.takePhoto}
                   onLayout={this.onPhotoButtonLayout}
                   style={styles.saveButton}
                   ref={this.photoButtonRef}
                 >
                   <View style={styles.saveButtonInner} />
                 </TouchableOpacity>
                 {switchCameraButton}
               </View>
             </Reanimated.View>
           </TapGestureHandler>
         </Reanimated.View>
       </PinchGestureHandler>
     );
   }
 
   render() {
     const statusBar = CameraModal.isActive(this.props) ? (
       <ConnectedStatusBar hidden />
     ) : null;
     const type = this.state.useFrontCamera
       ? RNCamera.Constants.Type.front
       : RNCamera.Constants.Type.back;
     return (
       <Reanimated.View style={this.containerStyle}>
         {statusBar}
         <Reanimated.Code exec={this.animationCode} />
         <RNCamera
           type={type}
           captureAudio={false}
           maxZoom={maxZoom}
           zoom={this.state.zoom}
           flashMode={this.state.flashMode}
           autoFocusPointOfInterest={this.state.autoFocusPointOfInterest}
           style={styles.fill}
           androidCameraPermissionOptions={null}
           ref={this.cameraRef}
         >
           {this.renderCamera}
         </RNCamera>
         <Reanimated.View style={this.overlayStyle} pointerEvents="none" />
       </Reanimated.View>
     );
   }
 
   cameraRef = (camera: ?RNCamera) => {
     this.camera = camera;
   };
 
   closeButtonRef = (
     closeButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.closeButton = (closeButton: any);
   };
 
   onCloseButtonLayout = () => {
     const { closeButton } = this;
     if (!closeButton) {
       return;
     }
     closeButton.measure((x, y, width, height, pageX, pageY) => {
       this.closeButtonX.setValue(pageX);
       this.closeButtonY.setValue(pageY);
       this.closeButtonWidth.setValue(width);
       this.closeButtonHeight.setValue(height);
     });
   };
 
   photoButtonRef = (
     photoButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.photoButton = (photoButton: any);
   };
 
   onPhotoButtonLayout = () => {
     const { photoButton } = this;
     if (!photoButton) {
       return;
     }
     photoButton.measure((x, y, width, height, pageX, pageY) => {
       this.photoButtonX.setValue(pageX);
       this.photoButtonY.setValue(pageY);
       this.photoButtonWidth.setValue(width);
       this.photoButtonHeight.setValue(height);
     });
   };
 
   switchCameraButtonRef = (
     switchCameraButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.switchCameraButton = (switchCameraButton: any);
   };
 
   onSwitchCameraButtonLayout = () => {
     const { switchCameraButton } = this;
     if (!switchCameraButton) {
       return;
     }
     switchCameraButton.measure((x, y, width, height, pageX, pageY) => {
       this.switchCameraButtonX.setValue(pageX);
       this.switchCameraButtonY.setValue(pageY);
       this.switchCameraButtonWidth.setValue(width);
       this.switchCameraButtonHeight.setValue(height);
     });
   };
 
   flashButtonRef = (
     flashButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.flashButton = (flashButton: any);
   };
 
   onFlashButtonLayout = () => {
     const { flashButton } = this;
     if (!flashButton) {
       return;
     }
     flashButton.measure((x, y, width, height, pageX, pageY) => {
       this.flashButtonX.setValue(pageX);
       this.flashButtonY.setValue(pageY);
       this.flashButtonWidth.setValue(width);
       this.flashButtonHeight.setValue(height);
     });
   };
 
   close = () => {
     this.props.navigation.goBackOnce();
   };
 
   takePhoto = async () => {
     const { camera } = this;
     invariant(camera, 'camera ref should be set');
     this.setState({ stagingMode: true });
 
     // We avoid flipping this.state.useFrontCamera if we discover we don't
     // actually have a back camera since it causes a bit of lag, but this
     // means there are cases where it is false but we are actually using the
     // front camera
     const {
       hasCamerasOnBothSides,
       defaultUseFrontCamera,
     } = this.props.deviceCameraInfo;
     const usingFrontCamera =
       this.state.useFrontCamera ||
       (!hasCamerasOnBothSides && defaultUseFrontCamera);
 
     const startTime = Date.now();
     const photoPromise = camera.takePictureAsync({
       pauseAfterCapture: Platform.OS === 'android',
       mirrorImage: usingFrontCamera,
       fixOrientation: true,
     });
 
     if (Platform.OS === 'ios') {
       camera.pausePreview();
     }
     const { uri, width, height } = await photoPromise;
     const filename = filenameFromPathOrURI(uri);
     invariant(
       filename,
       `unable to parse filename out of react-native-camera URI ${uri}`,
     );
 
     const now = Date.now();
     const pendingPhotoCapture = {
       step: 'photo_capture',
       uri,
       dimensions: { width, height },
       filename,
       time: now - startTime,
       captureTime: now,
       selectTime: 0,
       sendTime: 0,
       retries: 0,
     };
 
     this.setState({
       pendingPhotoCapture,
       zoom: 0,
       autoFocusPointOfInterest: undefined,
     });
   };
 
   sendPhoto = async () => {
     const { pendingPhotoCapture } = this.state;
     if (!pendingPhotoCapture) {
       return;
     }
 
     const now = Date.now();
     const capture = {
       ...pendingPhotoCapture,
       selectTime: now,
       sendTime: now,
     };
 
     this.close();
 
     const { inputState } = this.props;
     invariant(inputState, 'inputState should be set');
-    inputState.sendMultimediaMessage(
-      [capture],
-      this.props.route.params.thread.threadInfo,
-    );
+    inputState.sendMultimediaMessage([capture], this.props.route.params.thread);
   };
 
   clearPendingImage = () => {
     invariant(this.camera, 'camera ref should be set');
     this.camera.resumePreview();
     this.setState({
       stagingMode: false,
       pendingPhotoCapture: undefined,
     });
   };
 
   switchCamera = () => {
     this.setState((prevState: State) => ({
       useFrontCamera: !prevState.useFrontCamera,
     }));
   };
 
   updateZoom = ([zoom]: [number]) => {
     this.setState({ zoom });
   };
 
   changeFlashMode = () => {
     if (this.state.flashMode === RNCamera.Constants.FlashMode.on) {
       this.setState({ flashMode: RNCamera.Constants.FlashMode.off });
     } else if (this.state.flashMode === RNCamera.Constants.FlashMode.off) {
       this.setState({ flashMode: RNCamera.Constants.FlashMode.auto });
     } else {
       this.setState({ flashMode: RNCamera.Constants.FlashMode.on });
     }
   };
 
   focusOnPoint = ([inputX, inputY]: [number, number]) => {
     const { width: screenWidth, height: screenHeight } = this.props.dimensions;
     const relativeX = inputX / screenWidth;
     const relativeY = inputY / screenHeight;
 
     // react-native-camera's autoFocusPointOfInterest prop is based on a
     // LANDSCAPE-LEFT orientation, so we need to map to that
     let x, y;
     if (this.props.deviceOrientation === 'LANDSCAPE-LEFT') {
       x = relativeX;
       y = relativeY;
     } else if (this.props.deviceOrientation === 'LANDSCAPE-RIGHT') {
       x = 1 - relativeX;
       y = 1 - relativeY;
     } else if (this.props.deviceOrientation === 'PORTRAIT-UPSIDEDOWN') {
       x = 1 - relativeY;
       y = relativeX;
     } else {
       x = relativeY;
       y = 1 - relativeX;
     }
 
     const autoFocusPointOfInterest =
       Platform.OS === 'ios' ? { x, y, autoExposure: true } : { x, y };
     this.setState({ autoFocusPointOfInterest });
   };
 
   fetchCameraIDs = async (camera: RNCamera) => {
     if (this.cameraIDsFetched) {
       return;
     }
     this.cameraIDsFetched = true;
 
     const deviceCameras = await camera.getCameraIdsAsync();
 
     let hasFront = false,
       hasBack = false,
       i = 0;
     while ((!hasFront || !hasBack) && i < deviceCameras.length) {
       const deviceCamera = deviceCameras[i];
       if (deviceCamera.type === RNCamera.Constants.Type.front) {
         hasFront = true;
       } else if (deviceCamera.type === RNCamera.Constants.Type.back) {
         hasBack = true;
       }
       i++;
     }
 
     const hasCamerasOnBothSides = hasFront && hasBack;
     const defaultUseFrontCamera = !hasBack && hasFront;
     if (hasCamerasOnBothSides !== this.state.hasCamerasOnBothSides) {
       this.setState({ hasCamerasOnBothSides });
     }
     const {
       hasCamerasOnBothSides: oldHasCamerasOnBothSides,
       defaultUseFrontCamera: oldDefaultUseFrontCamera,
     } = this.props.deviceCameraInfo;
     if (
       hasCamerasOnBothSides !== oldHasCamerasOnBothSides ||
       defaultUseFrontCamera !== oldDefaultUseFrontCamera
     ) {
       this.props.dispatch({
         type: updateDeviceCameraInfoActionType,
         payload: { hasCamerasOnBothSides, defaultUseFrontCamera },
       });
     }
   };
 }
 
 const styles = StyleSheet.create({
   authorizationDeniedContainer: {
     alignItems: 'center',
     flex: 1,
     justifyContent: 'center',
   },
   authorizationDeniedText: {
     color: colors.dark.listSeparatorLabel,
     fontSize: 28,
     textAlign: 'center',
   },
   bottomButtonsContainer: {
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'center',
     left: 0,
     position: 'absolute',
     right: 0,
   },
   closeButton: {
     left: 16,
     paddingBottom: 2,
     paddingHorizontal: 8,
     position: 'absolute',
   },
   closeIcon: {
     color: 'white',
     fontSize: 36,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   container: {
     backgroundColor: 'black',
     flex: 1,
   },
   fill: {
     flex: 1,
   },
   flashButton: {
     marginTop: Platform.select({ android: 15, default: 13 }),
     paddingHorizontal: 10,
     paddingVertical: 3,
     position: 'absolute',
     right: 15,
   },
   flashIcon: {
     color: 'white',
     fontSize: 24,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   flashIconAutoText: {
     color: 'white',
     fontSize: 10,
     fontWeight: 'bold',
     position: 'absolute',
     right: 5,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
     top: 0,
   },
   focusIndicator: {
     borderColor: 'white',
     borderRadius: 24,
     borderWidth: 1,
     height: 24,
     left: -12,
     position: 'absolute',
     top: -12,
     width: 24,
   },
   overlay: {
     backgroundColor: 'white',
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   retakeButton: {
     left: 20,
     marginTop: Platform.select({ android: 15, default: 15 }),
     paddingBottom: 3,
     paddingHorizontal: 10,
     position: 'absolute',
   },
   retakeIcon: {
     color: 'white',
     fontSize: 24,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   saveButton: {
     alignItems: 'center',
     borderColor: 'white',
     borderRadius: 75,
     borderWidth: 4,
     height: 75,
     justifyContent: 'center',
     width: 75,
   },
   saveButtonInner: {
     backgroundColor: '#FFFFFF88',
     borderRadius: 60,
     height: 60,
     width: 60,
   },
   sendButtonContainer: {
     position: 'absolute',
     right: 32,
   },
   stagingImage: {
     backgroundColor: 'black',
     flex: 1,
     resizeMode: 'contain',
   },
   switchCameraButton: {
     justifyContent: 'center',
     paddingHorizontal: 8,
     paddingVertical: 2,
     position: 'absolute',
     right: 18,
   },
   switchCameraIcon: {
     color: 'white',
     fontSize: 36,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
 });
 
 export default React.memo<BaseProps>(function ConnectedCameraModal(
   props: BaseProps,
 ) {
   const dimensions = useSelector((state) => state.dimensions);
   const deviceCameraInfo = useSelector((state) => state.deviceCameraInfo);
   const deviceOrientation = useSelector((state) => state.deviceOrientation);
   const foreground = useIsAppForegrounded();
   const overlayContext = React.useContext(OverlayContext);
   const inputState = React.useContext(InputStateContext);
   const dispatch = useDispatch();
 
   return (
     <CameraModal
       {...props}
       dimensions={dimensions}
       deviceCameraInfo={deviceCameraInfo}
       deviceOrientation={deviceOrientation}
       foreground={foreground}
       dispatch={dispatch}
       overlayContext={overlayContext}
       inputState={inputState}
     />
   );
 });