Page MenuHomePhorge
Files F32210588

D6466.1765132170.diff
No OneTemporary
Actions

Size
1 KB
Referenced Files
None
Subscribers
None

D6466.1765132170.diff
View Options

diff --git a/native/chat/settings/thread-settings-media-gallery.react.js b/native/chat/settings/thread-settings-media-gallery.react.js
new file mode 100644
--- /dev/null
+++ b/native/chat/settings/thread-settings-media-gallery.react.js
@@ -0,0 +1,73 @@
+// @flow
+
+import * as React from 'react';
+import {
+ View,
+ TouchableOpacity,
+ Image,
+ FlatList,
+ useWindowDimensions,
+} from 'react-native';
+
+import { useStyles } from '../../themes/colors';
+
+function ThreadSettingsMediaGallery(): React.Node {
+ const styles = useStyles(unboundStyles);
+ const galleryItemGap = 8;
+ const { width } = useWindowDimensions();
+
+ const galleryItemWidth = (width - galleryItemGap * 3) / 3;
+ const mediaInfos = [];
+
+ const memoizedStyles = React.useMemo(() => {
+ return {
+ mediaContainer: {
+ marginTop: galleryItemGap,
+ marginLeft: galleryItemGap,
+ width: galleryItemWidth,
+ },
+ media: {
+ width: galleryItemWidth,
+ },
+ };
+ }, [galleryItemGap, galleryItemWidth]);
+
+ return (
+ <FlatList
+ data={mediaInfos}
+ numColumns={3}
+ renderItem={({ item, index }) => (
+ <View
+ key={index}
+ style={[styles.mediaContainer, memoizedStyles.mediaContainer]}
+ >
+ <TouchableOpacity>
+ <Image
+ source={item.source}
+ style={[styles.media, memoizedStyles.media]}
+ />
+ </TouchableOpacity>
+ </View>
+ )}
+ />
+ );
+}
+
+const unboundStyles = {
+ container: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'flex-start',
+ marginBottom: 20,
+ },
+ mediaContainer: {
+ height: 180,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ media: {
+ height: 180,
+ },
+};
+
+export default ThreadSettingsMediaGallery;

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 6:29 PM (12 h, 38 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5845413
Default Alt Text
D6466.1765132170.diff (1 KB)

Event Timeline