diff --git a/lib/media/file-utils.js b/lib/media/file-utils.js
index 5b7a331f0..a75baa9f7 100644
--- a/lib/media/file-utils.js
+++ b/lib/media/file-utils.js
@@ -1,218 +1,220 @@
 // @flow
 
 import fileType from 'file-type';
 import invariant from 'invariant';
 
 import type { Shape } from '../types/core';
 import type { MediaType } from '../types/media-types';
 
 type ResultMIME = 'image/png' | 'image/jpeg';
 type MediaConfig = {
   +mediaType: 'photo' | 'video' | 'photo_or_video',
   +extension: string,
   +serverCanHandle: boolean,
   +serverTranscodesImage: boolean,
   +imageConfig?: Shape<{
     +convertTo: ResultMIME,
   }>,
   +videoConfig?: Shape<{
     +loop: boolean,
   }>,
 };
 const mediaConfig: { [mime: string]: MediaConfig } = Object.freeze({
   'image/png': {
     mediaType: 'photo',
     extension: 'png',
     serverCanHandle: true,
     serverTranscodesImage: true,
   },
   'image/jpeg': {
     mediaType: 'photo',
     extension: 'jpg',
     serverCanHandle: true,
     serverTranscodesImage: true,
   },
   'image/gif': {
-    mediaType: 'photo_or_video',
+    // Set mediaType to 'photo_or_video' when working on
+    // video messages to treat animated GIFs as videos.
+    mediaType: 'photo',
     extension: 'gif',
     serverCanHandle: true,
     serverTranscodesImage: true,
     imageConfig: {
       convertTo: 'image/png',
     },
     videoConfig: {
       loop: true,
     },
   },
   'image/heic': {
     mediaType: 'photo',
     extension: 'heic',
     serverCanHandle: false,
     serverTranscodesImage: false,
     imageConfig: {
       convertTo: 'image/jpeg',
     },
   },
   'image/webp': {
     mediaType: 'photo',
     extension: 'webp',
     serverCanHandle: true,
     serverTranscodesImage: true,
     imageConfig: {
       convertTo: 'image/jpeg',
     },
   },
   'image/tiff': {
     mediaType: 'photo',
     extension: 'tiff',
     serverCanHandle: true,
     serverTranscodesImage: true,
     imageConfig: {
       convertTo: 'image/jpeg',
     },
   },
   'image/svg+xml': {
     mediaType: 'photo',
     extension: 'svg',
     serverCanHandle: true,
     serverTranscodesImage: true,
     imageConfig: {
       convertTo: 'image/png',
     },
   },
   'image/bmp': {
     mediaType: 'photo',
     extension: 'bmp',
     serverCanHandle: true,
     serverTranscodesImage: true,
     imageConfig: {
       convertTo: 'image/png',
     },
   },
   'video/mp4': {
     mediaType: 'video',
     extension: 'mp4',
     // serverCanHandle set to false pending future video message progress
     serverCanHandle: false,
     serverTranscodesImage: false,
   },
   'video/quicktime': {
     mediaType: 'video',
     extension: 'mp4',
     // serverCanHandle set to false pending future video message progress
     serverCanHandle: false,
     serverTranscodesImage: false,
   },
 });
 
 const serverTranscodableTypes: Set<$Keys<typeof mediaConfig>> = new Set();
 const serverCanHandleTypes: Set<$Keys<typeof mediaConfig>> = new Set();
 
 for (const mime in mediaConfig) {
   if (mediaConfig[mime].serverTranscodesImage) {
     serverTranscodableTypes.add(mime);
   }
   if (mediaConfig[mime].serverCanHandle) {
     serverCanHandleTypes.add(mime);
   }
 }
 
 function getTargetMIME(inputMIME: string): ResultMIME {
   const config = mediaConfig[inputMIME];
   if (!config) {
     return 'image/jpeg';
   }
   const targetMIME = config.imageConfig && config.imageConfig.convertTo;
   if (targetMIME) {
     return targetMIME;
   }
   invariant(
     inputMIME === 'image/png' || inputMIME === 'image/jpeg',
     'all images must be converted to jpeg or png',
   );
   return inputMIME;
 }
 
 const bytesNeededForFileTypeCheck = 64;
 
 export type FileDataInfo = {
   mime: ?string,
   mediaType: ?MediaType,
 };
 function fileInfoFromData(
   data: Uint8Array | Buffer | ArrayBuffer,
 ): FileDataInfo {
   const fileTypeResult = fileType(data);
   if (!fileTypeResult) {
     return { mime: null, mediaType: null };
   }
   const { mime } = fileTypeResult;
 
   const rawMediaType = mediaConfig[mime] && mediaConfig[mime].mediaType;
   const mediaType = rawMediaType === 'photo_or_video' ? 'photo' : rawMediaType;
 
   return { mime, mediaType };
 }
 
 function replaceExtension(filename: string, ext: string): string {
   const lastIndex = filename.lastIndexOf('.');
   let name = lastIndex >= 0 ? filename.substring(0, lastIndex) : filename;
   if (!name) {
     name = Math.random().toString(36).slice(-5);
   }
   const maxReadableLength = 255 - ext.length - 1;
   return `${name.substring(0, maxReadableLength)}.${ext}`;
 }
 
 function readableFilename(filename: string, mime: string): ?string {
   const ext = mediaConfig[mime] && mediaConfig[mime].extension;
   if (!ext) {
     return null;
   }
   return replaceExtension(filename, ext);
 }
 
 const extRegex = /\.([0-9a-z]+)$/i;
 function extensionFromFilename(filename: string): ?string {
   const matches = filename.match(extRegex);
   if (!matches) {
     return null;
   }
   const match = matches[1];
   if (!match) {
     return null;
   }
   return match.toLowerCase();
 }
 
 const pathRegex = /^file:\/\/(.*)$/;
 function pathFromURI(uri: string): ?string {
   const matches = uri.match(pathRegex);
   if (!matches) {
     return null;
   }
   return matches[1] ? matches[1] : null;
 }
 
 const filenameRegex = /[^/]+$/;
 function filenameFromPathOrURI(pathOrURI: string): ?string {
   const matches = pathOrURI.match(filenameRegex);
   if (!matches) {
     return null;
   }
   return matches[0] ? matches[0] : null;
 }
 
 export {
   mediaConfig,
   serverTranscodableTypes,
   serverCanHandleTypes,
   getTargetMIME,
   bytesNeededForFileTypeCheck,
   fileInfoFromData,
   replaceExtension,
   readableFilename,
   extensionFromFilename,
   pathFromURI,
   filenameFromPathOrURI,
 };
diff --git a/native/media/media-gallery-keyboard.react.js b/native/media/media-gallery-keyboard.react.js
index 048ab029e..a21c84b87 100644
--- a/native/media/media-gallery-keyboard.react.js
+++ b/native/media/media-gallery-keyboard.react.js
@@ -1,556 +1,558 @@
 // @flow
 
 import * as MediaLibrary from 'expo-media-library';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   FlatList,
   ActivityIndicator,
   Animated,
   Easing,
   Platform,
 } from 'react-native';
 import { KeyboardRegistry } from 'react-native-keyboard-input';
 import { Provider } from 'react-redux';
 
 import { extensionFromFilename } from 'lib/media/file-utils';
 import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils';
 import type { MediaLibrarySelection } from 'lib/types/media-types';
 
 import type { DimensionsInfo } from '../redux/dimensions-updater.react';
 import { store } from '../redux/redux-setup';
 import { useSelector } from '../redux/redux-utils';
 import { type Colors, useColors, useStyles } from '../themes/colors';
 import type { LayoutEvent, ViewableItemsChange } from '../types/react-native';
 import type { ViewStyle } from '../types/styles';
 import { getCompatibleMediaURI } from './identifier-utils';
 import MediaGalleryMedia from './media-gallery-media.react';
 import SendMediaButton from './send-media-button.react';
 
 const animationSpec = {
   duration: 400,
   // $FlowFixMe[method-unbinding]
   easing: Easing.inOut(Easing.ease),
   useNativeDriver: true,
 };
 
 type Props = {
   // Redux state
   +dimensions: DimensionsInfo,
   +foreground: boolean,
   +colors: Colors,
   +styles: typeof unboundStyles,
 };
 type State = {
   +selections: ?$ReadOnlyArray<MediaLibrarySelection>,
   +error: ?string,
   +containerHeight: ?number,
   // null means end reached; undefined means no fetch yet
   +cursor: ?string,
   +queuedMediaURIs: ?Set<string>,
   +focusedMediaURI: ?string,
   +dimensions: DimensionsInfo,
 };
 class MediaGalleryKeyboard extends React.PureComponent<Props, State> {
   mounted = false;
   fetchingPhotos = false;
   flatList: ?FlatList<MediaLibrarySelection>;
   viewableIndices: number[] = [];
   queueModeProgress = new Animated.Value(0);
   sendButtonStyle: ViewStyle;
   mediaSelected = false;
 
   constructor(props: Props) {
     super(props);
     const sendButtonScale = this.queueModeProgress.interpolate({
       inputRange: [0, 1],
       outputRange: ([1.3, 1]: number[]), // Flow...
     });
     this.sendButtonStyle = {
       opacity: this.queueModeProgress,
       transform: [{ scale: sendButtonScale }],
     };
     this.state = {
       selections: null,
       error: null,
       containerHeight: null,
       cursor: undefined,
       queuedMediaURIs: null,
       focusedMediaURI: null,
       dimensions: props.dimensions,
     };
   }
 
   static getDerivedStateFromProps(props: Props) {
     // We keep this in state since we pass this.state as
     // FlatList's extraData prop
     return { dimensions: props.dimensions };
   }
 
   componentDidMount() {
     this.mounted = true;
     return this.fetchPhotos();
   }
 
   componentWillUnmount() {
     this.mounted = false;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const { queuedMediaURIs } = this.state;
     const prevQueuedMediaURIs = prevState.queuedMediaURIs;
     if (queuedMediaURIs && !prevQueuedMediaURIs) {
       Animated.timing(this.queueModeProgress, {
         ...animationSpec,
         toValue: 1,
       }).start();
     } else if (!queuedMediaURIs && prevQueuedMediaURIs) {
       Animated.timing(this.queueModeProgress, {
         ...animationSpec,
         toValue: 0,
       }).start();
     }
 
     const { flatList, viewableIndices } = this;
     const { selections, focusedMediaURI } = this.state;
     let scrollingSomewhere = false;
     if (flatList && selections) {
       let newURI;
       if (focusedMediaURI && focusedMediaURI !== prevState.focusedMediaURI) {
         newURI = focusedMediaURI;
       } else if (
         queuedMediaURIs &&
         (!prevQueuedMediaURIs ||
           queuedMediaURIs.size > prevQueuedMediaURIs.size)
       ) {
         const flowMadeMeDoThis = queuedMediaURIs;
         for (const queuedMediaURI of flowMadeMeDoThis) {
           if (prevQueuedMediaURIs && prevQueuedMediaURIs.has(queuedMediaURI)) {
             continue;
           }
           newURI = queuedMediaURI;
           break;
         }
       }
       let index;
       if (newURI !== null && newURI !== undefined) {
         index = selections.findIndex(({ uri }) => uri === newURI);
       }
       if (index !== null && index !== undefined) {
         if (index === viewableIndices[0]) {
           scrollingSomewhere = true;
           flatList.scrollToIndex({ index });
         } else if (index === viewableIndices[viewableIndices.length - 1]) {
           scrollingSomewhere = true;
           flatList.scrollToIndex({ index, viewPosition: 1 });
         }
       }
     }
 
     if (this.props.foreground && !prevProps.foreground) {
       this.fetchPhotos();
     }
 
     if (
       !scrollingSomewhere &&
       this.flatList &&
       this.state.selections &&
       prevState.selections &&
       this.state.selections.length > 0 &&
       prevState.selections.length > 0 &&
       this.state.selections[0].uri !== prevState.selections[0].uri
     ) {
       this.flatList.scrollToIndex({ index: 0 });
     }
   }
 
   guardedSetState(change) {
     if (this.mounted) {
       this.setState(change);
     }
   }
 
   async fetchPhotos(after?: ?string) {
     if (this.fetchingPhotos) {
       return;
     }
     this.fetchingPhotos = true;
     try {
       const hasPermission = await this.getPermissions();
       if (!hasPermission) {
         return;
       }
       const {
         assets,
         endCursor,
         hasNextPage,
       } = await MediaLibrary.getAssetsAsync({
         first: 20,
         after,
-        mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
+        // Include `MediaLibrary.MediaType.video` in `mediaType` array
+        // when working on video messages so videos show up in media gallery.
+        mediaType: [MediaLibrary.MediaType.photo],
         sortBy: [MediaLibrary.SortBy.modificationTime],
       });
 
       let firstRemoved = false,
         lastRemoved = false;
 
       const mediaURIs = this.state.selections
         ? this.state.selections.map(({ uri }) => uri)
         : [];
       const existingURIs = new Set(mediaURIs);
       let first = true;
       const selections = assets
         .map(asset => {
           const { id, height, width, filename, mediaType, duration } = asset;
           const isVideo = mediaType === MediaLibrary.MediaType.video;
           const uri = getCompatibleMediaURI(
             asset.uri,
             extensionFromFilename(filename),
           );
 
           if (existingURIs.has(uri)) {
             if (first) {
               firstRemoved = true;
             }
             lastRemoved = true;
             first = false;
             return null;
           }
           first = false;
           lastRemoved = false;
           existingURIs.add(uri);
 
           if (isVideo) {
             return {
               step: 'video_library',
               dimensions: { height, width },
               uri,
               filename,
               mediaNativeID: id,
               duration,
               selectTime: 0,
               sendTime: 0,
               retries: 0,
             };
           } else {
             return {
               step: 'photo_library',
               dimensions: { height, width },
               uri,
               filename,
               mediaNativeID: id,
               selectTime: 0,
               sendTime: 0,
               retries: 0,
             };
           }
         })
         .filter(Boolean);
 
       let appendOrPrepend = after ? 'append' : 'prepend';
       if (firstRemoved && !lastRemoved) {
         appendOrPrepend = 'append';
       } else if (!firstRemoved && lastRemoved) {
         appendOrPrepend = 'prepend';
       }
 
       let newSelections = selections;
       if (this.state.selections) {
         if (appendOrPrepend === 'prepend') {
           newSelections = [...newSelections, ...this.state.selections];
         } else {
           newSelections = [...this.state.selections, ...newSelections];
         }
       }
 
       this.guardedSetState({
         selections: newSelections,
         error: null,
         cursor: hasNextPage ? endCursor : null,
       });
     } catch (e) {
       this.guardedSetState({
         selections: null,
         error: 'something went wrong :(',
       });
     }
     this.fetchingPhotos = false;
   }
 
   async getPermissions(): Promise<boolean> {
     const { granted } = await MediaLibrary.requestPermissionsAsync();
     if (!granted) {
       this.guardedSetState({ error: "don't have permission :(" });
     }
     return granted;
   }
 
   get queueModeActive() {
     return !!this.state.queuedMediaURIs;
   }
 
   renderItem = (row: { item: MediaLibrarySelection, ... }) => {
     const { containerHeight, queuedMediaURIs } = this.state;
     invariant(containerHeight, 'should be set');
     const { uri } = row.item;
     const isQueued = !!(queuedMediaURIs && queuedMediaURIs.has(uri));
     const { queueModeActive } = this;
     return (
       <MediaGalleryMedia
         selection={row.item}
         containerHeight={containerHeight}
         queueModeActive={queueModeActive}
         isQueued={isQueued}
         setMediaQueued={this.setMediaQueued}
         sendMedia={this.sendSingleMedia}
         isFocused={this.state.focusedMediaURI === uri}
         setFocus={this.setFocus}
         dimensions={this.state.dimensions}
       />
     );
   };
 
   ItemSeparator = () => {
     return <View style={this.props.styles.separator} />;
   };
 
   static keyExtractor = (item: MediaLibrarySelection) => {
     return item.uri;
   };
 
   render() {
     let content;
     const { selections, error, containerHeight } = this.state;
     const bottomOffsetStyle: ViewStyle = {
       marginBottom: this.props.dimensions.bottomInset,
     };
     if (selections && selections.length > 0 && containerHeight) {
       content = (
         <FlatList
           horizontal={true}
           data={selections}
           renderItem={this.renderItem}
           ItemSeparatorComponent={this.ItemSeparator}
           keyExtractor={MediaGalleryKeyboard.keyExtractor}
           scrollsToTop={false}
           showsHorizontalScrollIndicator={false}
           onEndReached={this.onEndReached}
           onEndReachedThreshold={5}
           onViewableItemsChanged={this.onViewableItemsChanged}
           extraData={this.state}
           ref={this.flatListRef}
         />
       );
     } else if (selections && containerHeight) {
       content = (
         <Text style={[this.props.styles.error, bottomOffsetStyle]}>
           no media was found!
         </Text>
       );
     } else if (error) {
       content = (
         <Text style={[this.props.styles.error, bottomOffsetStyle]}>
           {error}
         </Text>
       );
     } else {
       content = (
         <ActivityIndicator
           color={this.props.colors.listSeparatorLabel}
           size="large"
           style={[this.props.styles.loadingIndicator, bottomOffsetStyle]}
         />
       );
     }
 
     const { queuedMediaURIs } = this.state;
     const queueCount = queuedMediaURIs ? queuedMediaURIs.size : 0;
     const bottomInset = Platform.select({
       ios: -1 * this.props.dimensions.bottomInset,
       default: 0,
     });
     const containerStyle = { bottom: bottomInset };
     return (
       <View
         style={[this.props.styles.container, containerStyle]}
         onLayout={this.onContainerLayout}
       >
         {content}
         <SendMediaButton
           onPress={this.sendQueuedMedia}
           queueCount={queueCount}
           pointerEvents={queuedMediaURIs ? 'auto' : 'none'}
           containerStyle={[
             this.props.styles.sendButtonContainer,
             bottomOffsetStyle,
           ]}
           style={this.sendButtonStyle}
         />
       </View>
     );
   }
 
   flatListRef = (flatList: ?FlatList<MediaLibrarySelection>) => {
     this.flatList = flatList;
   };
 
   onContainerLayout = (event: LayoutEvent) => {
     this.guardedSetState({ containerHeight: event.nativeEvent.layout.height });
   };
 
   onEndReached = () => {
     const { cursor } = this.state;
     if (cursor !== null) {
       this.fetchPhotos(cursor);
     }
   };
 
   onViewableItemsChanged = (info: ViewableItemsChange) => {
     const viewableIndices = [];
     for (const { index } of info.viewableItems) {
       if (index !== null && index !== undefined) {
         viewableIndices.push(index);
       }
     }
     this.viewableIndices = viewableIndices;
   };
 
   setMediaQueued = (selection: MediaLibrarySelection, isQueued: boolean) => {
     this.setState((prevState: State) => {
       const prevQueuedMediaURIs = prevState.queuedMediaURIs
         ? [...prevState.queuedMediaURIs]
         : [];
       if (isQueued) {
         return {
           queuedMediaURIs: new Set([...prevQueuedMediaURIs, selection.uri]),
           focusedMediaURI: null,
         };
       }
       const queuedMediaURIs = prevQueuedMediaURIs.filter(
         uri => uri !== selection.uri,
       );
       if (queuedMediaURIs.length < prevQueuedMediaURIs.length) {
         return {
           queuedMediaURIs: new Set(queuedMediaURIs),
           focusedMediaURI: null,
         };
       }
       return null;
     });
   };
 
   setFocus = (selection: MediaLibrarySelection, isFocused: boolean) => {
     const { uri } = selection;
     if (isFocused) {
       this.setState({ focusedMediaURI: uri });
     } else if (this.state.focusedMediaURI === uri) {
       this.setState({ focusedMediaURI: null });
     }
   };
 
   sendSingleMedia = (selection: MediaLibrarySelection) => {
     this.sendMedia([selection]);
   };
 
   sendQueuedMedia = () => {
     const { selections, queuedMediaURIs } = this.state;
     if (!selections || !queuedMediaURIs) {
       return;
     }
     const queuedSelections = [];
     for (const uri of queuedMediaURIs) {
       for (const selection of selections) {
         if (selection.uri === uri) {
           queuedSelections.push(selection);
           break;
         }
       }
     }
     this.sendMedia(queuedSelections);
   };
 
   sendMedia(selections: $ReadOnlyArray<MediaLibrarySelection>) {
     if (this.mediaSelected) {
       return;
     }
     this.mediaSelected = true;
 
     const now = Date.now();
     const timeProps = {
       selectTime: now,
       sendTime: now,
     };
     const selectionsWithTime = selections.map(selection => ({
       ...selection,
       ...timeProps,
     }));
 
     KeyboardRegistry.onItemSelected(
       mediaGalleryKeyboardName,
       selectionsWithTime,
     );
   }
 }
 
 const mediaGalleryKeyboardName = 'MediaGalleryKeyboard';
 
 const unboundStyles = {
   container: {
     alignItems: 'center',
     backgroundColor: 'listBackground',
     flexDirection: 'row',
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   error: {
     color: 'listBackgroundLabel',
     flex: 1,
     fontSize: 28,
     textAlign: 'center',
   },
   loadingIndicator: {
     flex: 1,
   },
   sendButtonContainer: {
     bottom: 20,
     position: 'absolute',
     right: 30,
   },
   separator: {
     width: 2,
   },
 };
 
 function ConnectedMediaGalleryKeyboard() {
   const dimensions = useSelector(state => state.dimensions);
   const foreground = useIsAppForegrounded();
   const colors = useColors();
   const styles = useStyles(unboundStyles);
   return (
     <MediaGalleryKeyboard
       dimensions={dimensions}
       foreground={foreground}
       colors={colors}
       styles={styles}
     />
   );
 }
 
 function ReduxMediaGalleryKeyboard() {
   return (
     <Provider store={store}>
       <ConnectedMediaGalleryKeyboard />
     </Provider>
   );
 }
 
 KeyboardRegistry.registerKeyboard(
   mediaGalleryKeyboardName,
   () => ReduxMediaGalleryKeyboard,
 );
 
 export { mediaGalleryKeyboardName };