Add more styling to choosing category screen

2 files changed, 69 insertions, 23 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index a8664d85..280319b4 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -224,13 +224,15 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     onPress: () => void;
   }> = ({text, imageUri, onPress}) => {
     return (
-      <TouchableOpacity onPress={onPress} style={styles.tagFriendsContainer}>
+      <TouchableOpacity
+        onPress={onPress}
+        style={styles.selectableItemContainer}>
         <View style={styles.row}>
           {text === 'Category' && !momentCategory && (
             <Text style={styles.asteriskText}>* </Text>
           )}
           <Image style={styles.tagIcon} source={imageUri} />
-          <Text style={styles.tagFriendsTitle}>{text}</Text>
+          <Text style={styles.selectableItemTitle}>{text}</Text>
         </View>
         <View style={styles.row}>
           {text === 'Tag Friends' && (
@@ -359,14 +361,14 @@ const styles = StyleSheet.create({
   flex: {
     flex: 1,
   },
-  tagFriendsTitle: {
+  selectableItemTitle: {
     color: 'white',
     fontSize: normalize(14),
     lineHeight: normalize(16.71),
     letterSpacing: normalize(0.3),
     fontWeight: '600',
   },
-  tagFriendsContainer: {
+  selectableItemContainer: {
     marginHorizontal: '5%',
     flexDirection: 'row',
     justifyContent: 'space-between',
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index dd3bc1bb..a591cd69 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -1,4 +1,3 @@
-import AsyncStorage from '@react-native-community/async-storage';
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {RouteProp, useNavigation} from '@react-navigation/native';
 import React, {FC} from 'react';
@@ -9,10 +8,13 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {CaptionScreenHeader, SearchBackground} from '../../components';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {useSelector} from 'react-redux';
+import FrontArrow from '../../assets/icons/front-arrow.svg';
+import {SearchBackground} from '../../components';
 import {MainStackParams} from '../../routes';
-import {StatusBarHeight} from '../../utils';
+import {RootState} from '../../store/rootReducer';
+import {normalize, SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
 
 type ChoosingCategoryScreenRouteProps = RouteProp<
   MainStackParams,
@@ -26,33 +28,57 @@ interface ChoosingCategoryScreenProps {
 const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
   route,
 }) => {
+  const {momentCategories} = useSelector(
+    (state: RootState) => state.momentCategories,
+  );
   const navigation = useNavigation();
   const tabBarHeight = useBottomTabBarHeight();
   const insetTop = useSafeAreaInsets().top;
+
   const MomentItem: FC<{
     title: string;
-  }> = ({title}) => (
-    <TouchableOpacity
-      onPress={async () =>
-        navigation.navigate('CaptionScreen', {
-          selectedCategory: 'Food',
-        })
-      }>
-      <Text style={{height: 100, backgroundColor: 'green'}}>foo</Text>
+    onPress: () => void;
+  }> = ({title, onPress}) => (
+    <TouchableOpacity onPress={onPress} style={styles.itemContainer}>
+      <View style={styles.row}>
+        <View
+          style={{
+            height: normalize(35),
+            width: normalize(35),
+            backgroundColor: 'red',
+          }}
+        />
+        {/* <Image style={styles.tagIcon} source={imageUri} /> */}
+        <Text style={styles.itemTitle}>{title}</Text>
+      </View>
+      <View style={styles.row}>
+        <FrontArrow
+          width={normalize(13)}
+          height={normalize(13)}
+          color={'white'}
+        />
+      </View>
     </TouchableOpacity>
   );
+
   return (
     <SearchBackground>
-      {/* <SafeAreaView style={styles.container}> */}
-      {/* <CaptionScreenHeader style={styles.header} title={'Moments'} /> */}
       <View style={{marginTop: StatusBarHeight + insetTop}}>
-        <ScrollView contentContainerStyle={{paddingBottom: tabBarHeight}}>
-          {[0, 0, 0, 0].map((item) => (
-            <MomentItem />
+        <ScrollView
+          style={{height: SCREEN_HEIGHT * 0.9}}
+          contentContainerStyle={{paddingBottom: tabBarHeight}}>
+          {momentCategories.map((title) => (
+            <MomentItem
+              title={title}
+              onPress={() =>
+                navigation.navigate('CaptionScreen', {
+                  selectedCategory: title,
+                })
+              }
+            />
           ))}
         </ScrollView>
       </View>
-      {/* </SafeAreaView> */}
     </SearchBackground>
   );
 };
@@ -61,7 +87,25 @@ const styles = StyleSheet.create({
   container: {
     marginTop: StatusBarHeight,
   },
-  scrollContainer: {},
+  itemContainer: {
+    marginHorizontal: '5%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: normalize(20),
+  },
+  itemTitle: {
+    color: 'white',
+    fontSize: normalize(14),
+    lineHeight: normalize(16.71),
+    letterSpacing: normalize(0.3),
+    fontWeight: '600',
+    alignSelf: 'center',
+    marginLeft: normalize(25),
+  },
+  row: {
+    flexDirection: 'row',
+  },
 });
 
 export default ChoosingCategoryScreen;