1 files changed, 78 insertions, 0 deletions
diff --git a/frontend/app/components/gallery.js b/frontend/app/components/gallery.js
new file mode 100644
index 0000000..bcc57ea
--- /dev/null
+++ b/frontend/app/components/gallery.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+  View,
+  FlatList,
+  Dimensions,
+  StyleSheet,
+} from 'react-native';
+import {
+  RkText,
+  RkButton,
+  RkModalImg,
+} from 'react-native-ui-kitten';
+import PropTypes from 'prop-types';
+import { Ellipsis } from './ellipsis';
+import { SocialBar } from './socialBar';
+
+export class Gallery extends React.Component {
+  static propTypes = {
+    items: PropTypes.arrayOf(PropTypes.node).isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    const itemSize = (Dimensions.get('window').width - 12) / 3;
+    this.state = {
+      data: this.props.items,
+      itemSize,
+    };
+  }
+
+  extractItemKey = (index) => `${index}`;
+
+  renderHeader = (options) => (
+    <View style={styles.header}>
+      <RkButton rkType='clear contrast' onPress={options.closeImage}>Close</RkButton>
+      <RkText rkType='header4'>{`${options.pageNumber}/${options.totalPages}`}</RkText>
+      <RkButton rkType='clear'>
+        <Ellipsis />
+      </RkButton>
+    </View>
+  );
+
+  renderFooter = () => (
+    <SocialBar />
+  );
+
+  renderItem = ({ index }) => (
+    <RkModalImg
+      style={{ width: this.state.itemSize, height: this.state.itemSize }}
+      renderHeader={this.renderHeader}
+      renderFooter={this.renderFooter}
+      source={this.props.items}
+      index={index}
+    />
+  );
+
+  render = () => (
+    <View style={styles.images}>
+      <FlatList
+        data={this.state.data}
+        numColumns={3}
+        keyExtractor={this.extractItemKey}
+        renderItem={this.renderItem}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  images: {
+    flexDirection: 'row',
+    paddingHorizontal: 0.5,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});