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 @@ -9,6 +9,7 @@ import { useFetchThreadMedia } from 'lib/actions/thread-actions.js'; import type { MediaInfo, Media } from 'lib/types/media-types'; +import { ThreadSettingsCategoryActionHeader } from './thread-settings-category.react.js'; import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js'; import Multimedia from '../../media/multimedia.react.js'; import { @@ -30,6 +31,7 @@ +verticalBounds: ?VerticalBounds, +offset?: number, +activeTab?: string, + +onPressSeeMore?: () => mixed, }; function ThreadSettingsMediaGallery( @@ -47,7 +49,8 @@ // E.g. 16px, media, galleryItemGap, media, galleryItemGap, media, 16px const galleryItemWidth = (width - 32 - (numColumns - 1) * galleryItemGap) / numColumns; - const { threadID, limit, verticalBounds, offset, activeTab } = props; + const { threadID, limit, verticalBounds, offset, activeTab, onPressSeeMore } = + props; const [mediaInfos, setMediaInfos] = React.useState<$ReadOnlyArray>([]); const callFetchThreadMedia = useFetchThreadMedia(); @@ -125,17 +128,50 @@ setMediaInfos([...mediaInfos, ...result.media]); }, [callFetchThreadMedia, mediaInfos, threadID, limit]); - return ( - - { + if (mediaInfos.length === 0 || !onPressSeeMore) { + return null; + } + + return ( + - - ); + ); + }, [mediaInfos.length, onPressSeeMore]); + + const threadSettingsMediaGallery = React.useMemo(() => { + if (mediaInfos.length === 0) { + return null; + } + + return ( + <> + {header} + + + + + ); + }, [ + filteredMediaInfos, + header, + mediaInfos.length, + offset, + onEndReached, + renderItem, + styles.flatListContainer, + ]); + + return threadSettingsMediaGallery; } type MediaGalleryItemProps = { @@ -211,6 +247,7 @@ const unboundStyles = { flatListContainer: { paddingHorizontal: 16, + marginBottom: 16, }, mediaContainer: { height: 180, 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 @@ -710,14 +710,6 @@ const listData: ChatSettingsItem[] = []; const limit = 6; - listData.push({ - itemType: 'actionHeader', - key: 'mediaGalleryHeader', - title: 'Media Gallery', - actionText: 'See more', - onPress: this.onPressSeeMoreMediaGallery, - }); - listData.push({ itemType: 'mediaGallery', key: 'mediaGallery', @@ -726,12 +718,6 @@ verticalBounds, }); - listData.push({ - itemType: 'footer', - key: 'mediaGalleryFooter', - categoryType: 'outline', - }); - return listData; }, ); @@ -1033,6 +1019,7 @@ threadID={item.threadInfo.id} limit={item.limit} verticalBounds={item.verticalBounds} + onPressSeeMore={this.onPressSeeMoreMediaGallery} /> ); } else if (item.itemType === 'leaveThread') {