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,14 +4,25 @@
 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();
@@ -24,7 +35,17 @@
   // (width - 32px - 2 * galleryItemGap) / 3. Consider the component:
   // 16px, media, galleryItemGap, media, galleryItemGap, media, 16px
   const galleryItemWidth = (width - 2 * 16 - 2 * galleryItemGap) / 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 {
@@ -53,10 +74,29 @@
           ? memoizedStyles.mediaContainer
           : memoizedStyles.mediaContainerWithMargin;
 
+      if (item.type === 'photo') {
+        return (
+          <View key={item.id} style={containerStyle}>
+            <TouchableOpacity>
+              <FastImage
+                source={{ uri: item.uri }}
+                style={memoizedStyles.media}
+              />
+            </TouchableOpacity>
+          </View>
+        );
+      }
       return (
         <View key={item.id} style={containerStyle}>
           <TouchableOpacity>
-            <Image source={item.source} 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