4 files changed, 198 insertions, 0 deletions
diff --git a/src/components/moments/CaptionScreenHeader.tsx b/src/components/moments/CaptionScreenHeader.tsx
new file mode 100644
index 00000000..4715b4ef
--- /dev/null
+++ b/src/components/moments/CaptionScreenHeader.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {Text, View, StyleSheet, ViewProps} from 'react-native';
+interface CaptionScreenHeaderProps extends ViewProps {
+  title: string;
+}
+const CaptionScreenHeader: React.FC<CaptionScreenHeaderProps> = ({
+  title,
+  style,
+}) => {
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.headerContainer}>
+        <Text style={styles.header}>{title}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    height: 30,
+  },
+  headerContainer: {
+    position: 'absolute',
+    left: '50%',
+  },
+  header: {
+    position: 'relative',
+    right: '50%',
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+});
+export default CaptionScreenHeader;
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
new file mode 100644
index 00000000..1ec5511e
--- /dev/null
+++ b/src/components/moments/Moment.tsx
@@ -0,0 +1,126 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {Alert, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import PlusIcon from '../../assets/icons/plus_icon-01.svg';
+import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
+import {MOMENTS_TITLE_COLOR} from '../../constants';
+import {SCREEN_WIDTH} from '../../utils';
+import ImagePicker from 'react-native-image-crop-picker';
+import MomentTile from './MomentTile';
+import {MomentType} from 'src/types';
+
+interface MomentProps {
+  title: string;
+  images: MomentType[] | undefined;
+  isProfileView: boolean;
+}
+
+const Moment: React.FC<MomentProps> = ({title, images, isProfileView}) => {
+  const navigation = useNavigation();
+
+  const navigateToImagePicker = () => {
+    ImagePicker.openPicker({
+      width: 580,
+      height: 580,
+      cropping: true,
+      cropperToolbarTitle: 'Upload a moment',
+      mediaType: 'photo',
+    })
+      .then((picture) => {
+        if ('path' in picture) {
+          navigation.navigate('CaptionScreen', {
+            title: title,
+            image: picture,
+          });
+        }
+      })
+      .catch((err) => {
+        Alert.alert('Unable to upload moment!');
+      });
+  };
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.titleText}>{title}</Text>
+        {!isProfileView ? (
+          <PlusIcon
+            width={21}
+            height={21}
+            onPress={() => navigateToImagePicker()}
+          />
+        ) : (
+          <React.Fragment />
+        )}
+      </View>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={styles.scrollContainer}>
+        {images &&
+          images.map((imageObj: MomentType) => (
+            <MomentTile key={imageObj.moment_id} moment={imageObj} />
+          ))}
+        {(images === undefined || images.length === 0) && !isProfileView && (
+          <TouchableOpacity onPress={() => navigateToImagePicker()}>
+            <LinearGradient
+              colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
+              <View style={styles.defaultImage}>
+                <BigPlusIcon width={50} height={50} />
+                <Text style={styles.defaultImageText}>
+                  Add a moment of your {title.toLowerCase()}!
+                </Text>
+              </View>
+            </LinearGradient>
+          </TouchableOpacity>
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: '#eee',
+  },
+  header: {
+    flex: 1,
+    paddingHorizontal: 10,
+    padding: 5,
+    paddingTop: 20,
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  titleText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: MOMENTS_TITLE_COLOR,
+  },
+  scrollContainer: {
+    height: SCREEN_WIDTH / 2,
+    backgroundColor: '#eee',
+  },
+  defaultImage: {
+    aspectRatio: 1,
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  defaultImageText: {
+    fontSize: 20,
+    paddingTop: 20,
+    color: 'white',
+    fontWeight: 'bold',
+    width: '75%',
+    textAlign: 'center',
+  },
+});
+
+export default Moment;
diff --git a/src/components/moments/MomentTile.tsx b/src/components/moments/MomentTile.tsx
new file mode 100644
index 00000000..70b20d40
--- /dev/null
+++ b/src/components/moments/MomentTile.tsx
@@ -0,0 +1,33 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';
+import {MomentType} from 'src/types';
+
+interface MomentTileProps {
+  moment: MomentType;
+}
+const MomentTile: React.FC<MomentTileProps> = ({moment}) => {
+  const navigation = useNavigation();
+  const {path_hash} = moment;
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        navigation.navigate('IndividualMoment', {moment});
+      }}>
+      <View style={styles.image}>
+        <Image style={styles.image} source={{uri: path_hash}} />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    aspectRatio: 1,
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+});
+export default MomentTile;
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
new file mode 100644
index 00000000..339e0e19
--- /dev/null
+++ b/src/components/moments/index.ts
@@ -0,0 +1,2 @@
+export {default as CaptionScreenHeader} from '../moments/CaptionScreenHeader';
+export {default as Moment} from './Moment';