diff --git a/native/chat/settings/thread-settings-media-gallery.react.js b/native/chat/settings/thread-settings-media-gallery.react.js
--- a/native/chat/settings/thread-settings-media-gallery.react.js
+++ b/native/chat/settings/thread-settings-media-gallery.react.js
@@ -4,20 +4,41 @@
 import {
   View,
   TouchableOpacity,
-  Image,
   FlatList,
   useWindowDimensions,
 } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import Video from 'react-native-video';
+
+import { fetchThreadMedia } from 'lib/actions/thread-actions';
+import { useServerCall } from 'lib/utils/action-utils';
 
 import { useStyles } from '../../themes/colors';
 
-function ThreadSettingsMediaGallery(): React.Node {
+type ThreadSettingsMediaGalleryProps = {
+  +threadID: string,
+  +limit: number,
+};
+
+function ThreadSettingsMediaGallery(
+  props: ThreadSettingsMediaGalleryProps,
+): React.Node {
   const styles = useStyles(unboundStyles);
   const galleryItemGap = 8;
   const { width } = useWindowDimensions();
 
   const galleryItemWidth = (width - galleryItemGap * 3) / 3;
-  const mediaInfos = React.useMemo(() => [], []);
+  const { threadID, limit } = props;
+  const [mediaInfos, setMediaInfos] = React.useState([]);
+  const callFetchThreadMedia = useServerCall(fetchThreadMedia);
+
+  React.useEffect(() => {
+    const fetchData = async () => {
+      const result = await callFetchThreadMedia({ threadID, limit, offset: 0 });
+      setMediaInfos(result.media);
+    };
+    fetchData();
+  }, [callFetchThreadMedia, threadID, limit]);
 
   const memoizedStyles = React.useMemo(() => {
     return {
@@ -39,7 +60,21 @@
       return (
         <View key={item.id} style={memoizedStyles.mediaContainer}>
           <TouchableOpacity>
-            <Image source={item.source} style={memoizedStyles.media} />
+            {item.type === 'photo' ? (
+              <FastImage
+                source={{ uri: item.uri }}
+                style={memoizedStyles.media}
+              />
+            ) : (
+              <Video
+                source={{ uri: item.uri }}
+                style={memoizedStyles.media}
+                resizeMode="cover"
+                repeat={true}
+                muted={true}
+                paused={false}
+              />
+            )}
           </TouchableOpacity>
         </View>
       );
diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js
--- a/native/chat/settings/thread-settings.react.js
+++ b/native/chat/settings/thread-settings.react.js
@@ -198,6 +198,7 @@
       +itemType: 'mediaGallery',
       +key: string,
       +threadInfo: ThreadInfo,
+      +limit: number,
     }
   | {
       +itemType: 'promoteSidebar' | 'leaveThread' | 'deleteThread',
@@ -627,6 +628,7 @@
     (propsAndState: PropsAndState) => propsAndState.threadInfo,
     (threadInfo: ThreadInfo) => {
       const listData: ChatSettingsItem[] = [];
+      const limit = 6;
 
       listData.push({
         itemType: 'header',
@@ -639,6 +641,7 @@
         itemType: 'mediaGallery',
         key: 'mediaGallery',
         threadInfo,
+        limit,
       });
 
       listData.push({
@@ -929,7 +932,12 @@
     } else if (item.itemType === 'addMember') {
       return <ThreadSettingsAddMember onPress={this.onPressAddMember} />;
     } else if (item.itemType === 'mediaGallery') {
-      return <ThreadSettingsMediaGallery />;
+      return (
+        <ThreadSettingsMediaGallery
+          threadID={item.threadInfo.id}
+          limit={item.limit}
+        />
+      );
     } else if (item.itemType === 'leaveThread') {
       return (
         <ThreadSettingsLeaveThread