3 files changed, 54 insertions, 3 deletions
diff --git a/src/components/profile/CaptionScreenHeader.tsx b/src/components/profile/CaptionScreenHeader.tsx
new file mode 100644
index 00000000..4715b4ef
--- /dev/null
+++ b/src/components/profile/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/profile/Moment.tsx b/src/components/profile/Moment.tsx
index 0fbabe8f..6ae8d38e 100644
--- a/src/components/profile/Moment.tsx
+++ b/src/components/profile/Moment.tsx
@@ -1,6 +1,6 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {Alert, StyleSheet, View} from 'react-native';
+import {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';
@@ -8,6 +8,7 @@ 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';
 
 interface MomentProps {
   title: string;
@@ -16,9 +17,21 @@ interface MomentProps {
 
 const Moment: React.FC<MomentProps> = ({title, images}) => {
   const navigation = useNavigation();
+
   const navigateToImagePicker = () => {
-    Alert.alert('Perform navigation to Image Picker with Caption screen');
-    // navigation.navigate('')
+    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(() => {});
   };
   return (
     <View style={styles.container}>
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index 2d16c830..4eb435df 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -5,3 +5,4 @@ export {default as ProfileCutout} from './ProfileCutout';
 export {default as ProfileBody} from './ProfileBody';
 export {default as ProfileHeader} from './ProfileHeader';
 export {default as Feed} from './Feed';
+export {default as CaptionScreenHeader} from './CaptionScreenHeader';