diff options
| -rw-r--r-- | src/constants/constants.ts | 1 | ||||
| -rw-r--r-- | src/screens/profile/ChoosingCategoryScreen.tsx | 80 |
2 files changed, 57 insertions, 24 deletions
diff --git a/src/constants/constants.ts b/src/constants/constants.ts index f4ffd750..13a73208 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -66,6 +66,7 @@ export const YOUTUBE_FONT_COLOR: string = '#FCA4A4'; export const TAGG_PURPLE = '#8F01FF'; export const TAGG_DARK_BLUE = '#4E699C'; +export const TAGG_DARK_PURPLEISH_BLUE = '#4755A1'; export const TAGG_LIGHT_BLUE: string = '#698DD3'; export const TAGG_LIGHT_BLUE_2: string = '#6EE7E7'; export const TAGG_LIGHT_PURPLE = '#F4DDFF'; diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx index a591cd69..daf7642d 100644 --- a/src/screens/profile/ChoosingCategoryScreen.tsx +++ b/src/screens/profile/ChoosingCategoryScreen.tsx @@ -2,19 +2,27 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {RouteProp, useNavigation} from '@react-navigation/native'; import React, {FC} from 'react'; import { + Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, } from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; 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 {TAGGS_GRADIENT, TAGG_DARK_PURPLEISH_BLUE} from '../../constants'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootReducer'; -import {normalize, SCREEN_HEIGHT, StatusBarHeight} from '../../utils'; +import { + getMomentCategoryIconInfo, + normalize, + SCREEN_HEIGHT, + StatusBarHeight, +} from '../../utils'; type ChoosingCategoryScreenRouteProps = RouteProp< MainStackParams, @@ -38,28 +46,32 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({ const MomentItem: FC<{ title: string; 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> - ); + }> = ({title, onPress}) => { + const icon = getMomentCategoryIconInfo(title).icon; + return ( + <TouchableOpacity onPress={onPress} style={styles.itemContainer}> + <View style={styles.row}> + <LinearGradient + style={styles.gradientIcon} + colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]} + useAngle={true} + angle={-45}> + <View style={styles.iconBackground}> + <Image style={styles.icon} source={icon} /> + </View> + </LinearGradient> + <Text style={styles.itemTitle}>{title}</Text> + </View> + <View style={styles.row}> + <FrontArrow + width={normalize(13)} + height={normalize(13)} + color={'white'} + /> + </View> + </TouchableOpacity> + ); + }; return ( <SearchBackground> @@ -69,6 +81,7 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({ contentContainerStyle={{paddingBottom: tabBarHeight}}> {momentCategories.map((title) => ( <MomentItem + key={title} title={title} onPress={() => navigation.navigate('CaptionScreen', { @@ -92,7 +105,26 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - marginBottom: normalize(20), + marginVertical: normalize(20), + borderRadius: 4, + }, + gradientIcon: { + width: normalize(40), + height: normalize(40), + justifyContent: 'center', + alignItems: 'center', + borderRadius: 4, + }, + iconBackground: { + height: '85%', + width: '85%', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: TAGG_DARK_PURPLEISH_BLUE, + }, + icon: { + height: normalize(25), + width: normalize(25), }, itemTitle: { color: 'white', |