aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/comments/ZoomInCropper.tsx114
-rw-r--r--src/components/common/MomentTags.tsx44
-rw-r--r--src/components/common/NavigationIcon.tsx2
-rw-r--r--src/components/common/TaggSquareButton.tsx26
-rw-r--r--src/components/common/TaggTypeahead.tsx49
-rw-r--r--src/components/moments/CaptionScreenHeader.tsx5
-rw-r--r--src/components/moments/Moment.tsx24
-rw-r--r--src/components/moments/MomentPost.tsx2
-rw-r--r--src/components/notifications/Notification.tsx11
-rw-r--r--src/components/onboarding/MomentCategory.tsx89
-rw-r--r--src/components/profile/MomentMoreInfoDrawer.tsx1
11 files changed, 136 insertions, 231 deletions
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 3a492af3..f4c06311 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,7 +1,6 @@
import {RouteProp} from '@react-navigation/core';
-import {useFocusEffect} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
import {normalize} from 'react-native-elements';
import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
@@ -13,7 +12,6 @@ import {
HeaderHeight,
SCREEN_HEIGHT,
SCREEN_WIDTH,
- numberWithCommas,
} from '../../utils';
import {TaggSquareButton} from '../common';
import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
@@ -33,7 +31,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
route,
navigation,
}) => {
- const {screenType, title, media} = route.params;
+ const {screenType, media, selectedCategory} = route.params;
const [aspectRatio, setAspectRatio] = useState<number>(1);
// width and height of video, if video
const [origDimensions, setOrigDimensions] = useState<number[]>([0, 0]);
@@ -64,19 +62,6 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
);
};
- useFocusEffect(
- useCallback(() => {
- navigation.dangerouslyGetParent()?.setOptions({
- tabBarVisible: false,
- });
- return () => {
- navigation.dangerouslyGetParent()?.setOptions({
- tabBarVisible: true,
- });
- };
- }, [navigation]),
- );
-
// Setting original aspect ratio of image
useEffect(() => {
if (media.uri && checkIfUriImage(media.uri)) {
@@ -155,11 +140,11 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
(croppedURL: string) => {
navigation.navigate('CaptionScreen', {
screenType,
- title: title,
media: {
uri: croppedURL,
isVideo: true,
},
+ selectedCategory,
});
},
videoCrop,
@@ -169,76 +154,18 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
// for whenever the video is altered by the user
const onVideoMove = (zoomableEvent: any) => {
- const {
- distanceBottom,
- distanceLeft,
- distanceRight,
- distanceTop,
- lastMovePinch,
- lastX,
- lastY,
- lastZoomLevel,
- offsetX,
- offsetY,
- originalHeight,
- originalWidth,
- zoomLevel,
- } = zoomableEvent;
- // let cropWidth = origDimensions[0] / (zoomLevel * aspectRatio);
- // let cropOffsetX = Math.abs((origDimensions[0] - cropWidth) / 2);
- // let screenScale = SCREEN_HEIGHT / origDimensions[1];
- // const relativeHeight = SCREEN_WIDTH / aspectRatio;
- // let cropHeight = origDimensions[1];
- // let cropOffsetY = 0;
+ const {originalHeight, originalWidth} = zoomableEvent;
let cropWidth = 0;
let cropHeight = 0;
let cropOffsetX = 0;
let cropOffsetY = 0;
- // if (aspectRatio > 1) {
- // cropWidth =
- // originalWidth * (originalWidth - (distanceLeft + distanceRight));
- // cropHeight = origDimensions[1];
- // }
-
- // console.log(relativeHeight * zoomLevel, SCREEN_HEIGHT, zoomLevel);
- // if (cropHeight * screenScale > SCREEN_HEIGHT) {
- // console.log('true');
- // } else {
- // console.log('false');
- // }
-
- // console.log(
- // aspectRatio,
- // zoomLevel,
- // originalWidth,
- // originalHeight,
- // origDimensions[0],
- // origDimensions[1],
- // cropWidth,
- // cropHeight,
- // distanceBottom,
- // distanceLeft,
- // distanceRight,
- // distanceTop,
- // SCREEN_WIDTH * zoomLevel - SCREEN_WIDTH,
- // distanceBottom + distanceTop,
- // distanceLeft + distanceRight,
- // );
- // console.log(
- // zoomLevel,
- // distanceBottom,
- // distanceLeft,
- // distanceRight,
- // distanceTop,
- // originalWidth / (originalWidth - (distanceLeft + distanceRight)),
- // );
if (vidRef !== null && vidRef.current !== null) {
vidRef.current.measure(
(
- x: number,
- y: number,
+ _x: number,
+ _y: number,
width: number,
height: number,
pageX: number,
@@ -248,11 +175,10 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
cropWidth = origDimensions[0] * (originalWidth / width);
// offsetX
- // cropOffsetX = (origDimensions[0] - cropWidth) / 2;
cropOffsetX = -1 * origDimensions[0] * (pageX / width);
if (cropOffsetX < 0) {
cropOffsetX = 0;
- } else if (cropOffsetX + cropWidth > origDimensions[0]) {
+ } else if (cropOffsetX + cropWidth > origDimensions[0] - 1) {
cropOffsetX = origDimensions[0] - cropWidth - 1;
}
@@ -263,7 +189,11 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
) {
const superHeight = width / aspectRatio;
cropHeight = origDimensions[1] * (originalHeight / superHeight);
- // cropOffsetY = (origDimensions[1] - cropHeight) / 2;
+
+ // offsetY
+ const topDeadZone = (height - superHeight) / 2;
+ const offsetY = topDeadZone + pageY;
+ cropOffsetY = -1 * origDimensions[1] * (offsetY / superHeight);
if (cropOffsetY < 0) {
cropOffsetY = 0;
} else if (cropOffsetY + cropHeight > origDimensions[1]) {
@@ -328,24 +258,6 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
onPress={() => navigation.goBack()}>
<CloseIcon height={25} width={25} color={'white'} />
</TouchableOpacity>
- {/* <ImageZoom
- style={styles.zoomView}
- cropWidth={SCREEN_WIDTH}
- cropHeight={SCREEN_HEIGHT}
- imageWidth={SCREEN_WIDTH}
- imageHeight={SCREEN_WIDTH / aspectRatio}
- onMove={onMove}>
- <Image
- style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}}
- source={{
- uri: media.uri,
- }}
- />
- </ImageZoom> */}
-
- {/* <Image style={{ flex: 1, width: null, height: '100%' }}
- source={require('./image.jpg')}
- resizeMode="contain" /> */}
{checkIfUriImage(media.uri) ? (
<ImageZoom
style={styles.zoomView}
@@ -399,7 +311,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
height: SCREEN_WIDTH / aspectRatio,
},
]}
- repeat={false}
+ repeat={true}
resizeMode={'contain'}
onLoad={(response) => {
const {width, height} = response.naturalSize;
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index d8a70353..37069e18 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -10,6 +10,13 @@ interface MomentTagsProps {
setTags: (tag: MomentTagType[]) => void;
imageRef: RefObject<Image>;
deleteFromList?: (user: ProfilePreviewType) => void;
+ boundaries?: DraggableBoundaries;
+}
+interface DraggableBoundaries {
+ top?: number;
+ bottom?: number;
+ left?: number;
+ right?: number;
}
const MomentTags: React.FC<MomentTagsProps> = ({
@@ -18,11 +25,14 @@ const MomentTags: React.FC<MomentTagsProps> = ({
setTags,
imageRef,
deleteFromList,
+ boundaries,
}) => {
const [offset, setOffset] = useState([0, 0]);
const [imageDimensions, setImageDimensions] = useState([0, 0]);
const [maxZIndex, setMaxZIndex] = useState(1);
const [draggableRefs, setDraggableRefs] = useState<RefObject<View>[]>([]);
+ // [minXBoundary, maxXBoundary, minYBoundary, maxYBoundary]
+ const [boundariesList, setBoundariesList] = useState<number[]>([0, 0, 0, 0]);
const updateTagPosition = (ref: RefObject<Image>, userId: string) => {
if (ref !== null && ref.current !== null) {
@@ -77,6 +87,24 @@ const MomentTags: React.FC<MomentTagsProps> = ({
},
);
}
+
+ // Checks for and adds boundaries
+ if (boundaries) {
+ const newBounds = [...boundariesList];
+ if (boundaries.top) {
+ newBounds[2] = boundaries.top;
+ }
+ if (boundaries.bottom) {
+ newBounds[3] = boundaries.bottom;
+ }
+ if (boundaries.left) {
+ newBounds[0] = boundaries.left;
+ }
+ if (boundaries.right) {
+ newBounds[1] = boundaries.right;
+ }
+ setBoundariesList(newBounds);
+ }
},
editing ? 100 : 0,
);
@@ -94,10 +122,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
z={tag.z}
- minX={offset[0]}
- minY={offset[1]}
- maxX={imageDimensions[0] + offset[0]}
- maxY={imageDimensions[1] + offset[1]}
+ minX={offset[0] + boundariesList[0]}
+ minY={offset[1] + boundariesList[2]}
+ maxX={imageDimensions[0] + offset[0] - boundariesList[1]}
+ maxY={imageDimensions[1] + offset[1] - boundariesList[3]}
onDragStart={() => {
const currZIndex = maxZIndex;
setMaxZIndex(currZIndex + 1);
@@ -123,10 +151,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
z={tag.z}
- minX={offset[0]}
- minY={offset[1]}
- maxX={imageDimensions[0] + offset[0]}
- maxY={imageDimensions[1] + offset[1]}
+ minX={offset[0] + boundariesList[0]}
+ minY={offset[1] + boundariesList[2]}
+ maxX={imageDimensions[0] + offset[0] - boundariesList[1]}
+ maxY={imageDimensions[1] + offset[1] - boundariesList[3]}
disabled={true}>
<TaggDraggable
draggableRef={draggableRefs[index]}
diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index debb36b3..a5f42992 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -37,7 +37,7 @@ const NavigationIcon = (props: NavigationIconProps) => {
case 'Upload':
imgSrc = props.disabled
? require('../../assets/navigationIcons/new-upload.png')
- : require('../../assets/navigationIcons/upload-clicked.png');
+ : require('../../assets/navigationIcons/new-upload.png');
break;
case 'Notifications':
imgSrc = props.disabled
diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 1a1c33b3..b1e65ba6 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
+import React, {FC} from 'react';
import {
GestureResponderEvent,
+ StyleProp,
StyleSheet,
Text,
TextStyle,
TouchableOpacity,
- ViewProps,
+ TouchableOpacityProps,
ViewStyle,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
@@ -15,14 +16,16 @@ import {
TAGG_PURPLE,
} from '../../constants';
import {normalize, SCREEN_WIDTH} from '../../utils';
-interface TaggSquareButtonProps extends ViewProps {
+
+interface TaggSquareButtonProps extends TouchableOpacityProps {
onPress: (event: GestureResponderEvent) => void;
title: string;
buttonStyle: 'normal' | 'large' | 'gradient';
buttonColor: 'purple' | 'white' | 'blue';
labelColor: 'white' | 'blue';
- style?: ViewStyle;
- labelStyle?: TextStyle;
+ style?: StyleProp<ViewStyle>;
+ labelStyle?: StyleProp<TextStyle>;
+ icon?: Element;
}
const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
@@ -50,8 +53,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
case 'large':
return (
<TouchableOpacity
+ {...props}
onPress={props.onPress}
style={[styles.largeButton, buttonColor, props.style]}>
+ {props.icon}
<Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
{props.title}
</Text>
@@ -59,12 +64,16 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
);
case 'gradient':
return (
- <TouchableOpacity onPress={props.onPress} style={props.style}>
+ <TouchableOpacity
+ {...props}
+ onPress={props.onPress}
+ style={props.style}>
<LinearGradient
style={styles.gradientButton}
colors={BACKGROUND_GRADIENT_MAP[0]}
useAngle
angle={90}>
+ {props.icon}
<Text style={[styles.gradientLabel, props.labelStyle]}>
{props.title}
</Text>
@@ -75,8 +84,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
default:
return (
<TouchableOpacity
+ {...props}
onPress={props.onPress}
style={[styles.normalButton, buttonColor, props.style]}>
+ {props.icon}
<Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
{props.title}
</Text>
@@ -87,6 +98,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
const styles = StyleSheet.create({
largeButton: {
+ flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: '70%',
@@ -99,6 +111,7 @@ const styles = StyleSheet.create({
color: '#eee',
},
normalButton: {
+ flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: SCREEN_WIDTH * 0.45,
@@ -111,6 +124,7 @@ const styles = StyleSheet.create({
fontWeight: '500',
},
gradientButton: {
+ flexDirection: 'row',
marginTop: '8%',
borderRadius: 5,
paddingVertical: '5%',
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 7967fdbc..672cff69 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,27 +1,34 @@
-import React, {Fragment, useEffect, useState} from 'react';
-import {ScrollView, StyleSheet, View} from 'react-native';
+import React, {Fragment, useEffect, useRef, useState} from 'react';
+import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native';
import {Suggestion} from 'react-native-controlled-mentions';
import {useSelector} from 'react-redux';
import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
import {loadSearchResults} from '../../services';
import {RootState} from '../../store/rootReducer';
import {ProfilePreviewType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
import TaggUserRowCell from './TaggUserRowCell';
type TaggTypeaheadProps = {
keyword: string | undefined;
component: string | undefined;
onSuggestionPress: (suggestion: Suggestion) => void;
+ isShowBelowStyle?: boolean;
};
const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
keyword,
component,
onSuggestionPress,
+ isShowBelowStyle = false,
}) => {
const {friends} = useSelector((state: RootState) => state.friends);
const [results, setResults] = useState<ProfilePreviewType[]>([]);
+ const [viewPxy, setViewPxy] = useState<{px: number; py: number}>({
+ px: 0,
+ py: 0,
+ });
+ const viewRef = useRef<View>(null);
const [height, setHeight] = useState(0);
const margin = component === 'comment' ? -10 : 0;
@@ -33,6 +40,22 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
}
}, [keyword]);
+ const onLayout = (e: LayoutChangeEvent) => {
+ setHeight(e.nativeEvent.layout.height);
+ viewRef.current?.measure(
+ (
+ _fx: number,
+ _fy: number,
+ _width: number,
+ _height: number,
+ px: number,
+ py: number,
+ ) => {
+ setViewPxy({px, py});
+ },
+ );
+ };
+
const getQuerySuggested = async () => {
if (keyword === undefined || keyword === '@') {
return;
@@ -50,14 +73,17 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
}
return (
- <View>
- <View style={styles.overlay} />
+ <View ref={viewRef} onLayout={onLayout}>
+ {/* <View ref={viewRef} onLayout={onLayout}> */}
+ {!isShowBelowStyle && <View style={styles.overlay} />}
<ScrollView
- style={[styles.container, {top: -height, margin: margin}]}
+ style={[
+ styles.container,
+ isShowBelowStyle
+ ? [styles.topPadding, {left: -viewPxy.px}]
+ : {top: -height, margin: margin},
+ ]}
showsVerticalScrollIndicator={false}
- onLayout={(event) => {
- setHeight(event.nativeEvent.layout.height);
- }}
keyboardShouldPersistTaps={'always'}>
{results.map((user) => (
<TaggUserRowCell
@@ -78,10 +104,10 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
const styles = StyleSheet.create({
container: {
+ position: 'absolute',
width: SCREEN_WIDTH,
maxHeight: 264,
backgroundColor: 'white',
- position: 'absolute',
alignSelf: 'center',
zIndex: 1,
},
@@ -95,6 +121,9 @@ const styles = StyleSheet.create({
bottom: 10,
zIndex: -1,
},
+ topPadding: {
+ top: isIPhoneX() ? 180 : 150,
+ },
});
export default TaggTypeahead;
diff --git a/src/components/moments/CaptionScreenHeader.tsx b/src/components/moments/CaptionScreenHeader.tsx
index 0638c128..cda85e57 100644
--- a/src/components/moments/CaptionScreenHeader.tsx
+++ b/src/components/moments/CaptionScreenHeader.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import {Text, View, StyleSheet, ViewProps} from 'react-native';
+import {normalize} from '../../utils';
interface CaptionScreenHeaderProps extends ViewProps {
title: string;
}
@@ -26,8 +27,8 @@ const styles = StyleSheet.create({
width: '90%',
},
header: {
- fontSize: 20,
- fontWeight: 'bold',
+ fontSize: normalize(18),
+ fontWeight: '700',
color: 'white',
textAlign: 'center',
},
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 73503c5e..087b343f 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -7,7 +7,6 @@ import LinearGradient from 'react-native-linear-gradient';
import DeleteIcon from '../../assets/icons/delete-logo.svg';
import DownIcon from '../../assets/icons/down_icon.svg';
import BigPlusIcon from '../../assets/icons/plus-icon-white.svg';
-import PlusIcon from '../../assets/icons/plus-icon.svg';
import UpIcon from '../../assets/icons/up_icon.svg';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {MomentType, ScreenType} from '../../types';
@@ -40,14 +39,6 @@ const Moment: React.FC<MomentProps> = ({
externalStyles,
}) => {
const navigation = useNavigation();
-
- const navigateToCameraScreen = () => {
- navigation.navigate('CameraScreen', {
- title,
- screenType,
- });
- };
-
return (
<View style={[styles.container, externalStyles?.container]}>
<View style={[styles.header, externalStyles?.header]}>
@@ -81,13 +72,6 @@ const Moment: React.FC<MomentProps> = ({
)}
{!userXId && (
<View style={styles.row}>
- <PlusIcon
- width={23}
- height={23}
- onPress={navigateToCameraScreen}
- color={TAGG_LIGHT_BLUE}
- style={styles.horizontalMargin}
- />
{shouldAllowDeletion && (
<DeleteIcon
onPress={() => handleMomentCategoryDelete(title)}
@@ -114,7 +98,13 @@ const Moment: React.FC<MomentProps> = ({
/>
))}
{(images === undefined || images.length === 0) && !userXId && (
- <TouchableOpacity onPress={navigateToCameraScreen}>
+ <TouchableOpacity
+ onPress={() =>
+ navigation.navigate('CameraScreen', {
+ screenType: ScreenType.Profile,
+ selectedCategory: title,
+ })
+ }>
<LinearGradient
colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
<View style={styles.defaultImage}>
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 319542f9..07295369 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -2,6 +2,7 @@ import {useNavigation} from '@react-navigation/native';
import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
import {
Image,
+ Keyboard,
KeyboardAvoidingView,
Platform,
StatusBar,
@@ -252,6 +253,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
onPress={() => {
setVisible(!visible);
setFadeValue(new Animated.Value(0));
+ Keyboard.dismiss();
}}>
<View style={styles.contentContainer}>
<View style={styles.topContainer}>
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index fd1b11ac..946f2164 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -314,7 +314,11 @@ const Notification: React.FC<NotificationProps> = (props) => {
<TouchableWithoutFeedback
style={styles.moment}
onPress={onNotificationTap}>
- <Image style={styles.imageFlex} source={{uri: momentURI}} />
+ <Image
+ style={styles.imageFlex}
+ source={{uri: momentURI}}
+ resizeMode={'contain'}
+ />
</TouchableWithoutFeedback>
)}
</View>
@@ -357,8 +361,9 @@ const styles = StyleSheet.create({
lineHeight: normalize(14.32),
},
moment: {
- height: normalize(42),
- width: normalize(42),
+ height: normalize(72),
+ width: normalize(40),
+ backgroundColor: 'black',
},
buttonsContainer: {
height: '80%',
diff --git a/src/components/onboarding/MomentCategory.tsx b/src/components/onboarding/MomentCategory.tsx
index 97099b9e..eb9d5bcc 100644
--- a/src/components/onboarding/MomentCategory.tsx
+++ b/src/components/onboarding/MomentCategory.tsx
@@ -3,11 +3,12 @@ import {StyleSheet} from 'react-native';
import {Image, Text} from 'react-native-animatable';
import {TouchableOpacity} from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';
+import {BACKGROUND_GRADIENT_MAP} from '../../constants';
import {
- BACKGROUND_GRADIENT_MAP,
- MOMENT_CATEGORY_BG_COLORS,
-} from '../../constants';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+ getMomentCategoryIconInfo,
+ SCREEN_HEIGHT,
+ SCREEN_WIDTH,
+} from '../../utils';
type MomentCategoryProps = {
categoryType: string;
@@ -22,85 +23,7 @@ const MomentCategory: React.FC<MomentCategoryProps> = ({
isAdded,
onSelect,
}) => {
- var icon, bgColor;
-
- /**
- * Choose icon and color based on category type
- */
- switch (categoryType) {
- case 'Friends':
- icon = require('../../assets/moment-categories/friends-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[0];
- break;
- case 'Adventure':
- icon = require('../../assets/moment-categories/adventure-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[1];
- break;
- case 'Photo Dump':
- icon = require('../../assets/moment-categories/photo-dump-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[2];
- break;
- case 'Food':
- icon = require('../../assets/moment-categories/food-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[3];
- break;
- case 'Music':
- icon = require('../../assets/moment-categories/music-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[4];
- break;
- case 'Art':
- icon = require('../../assets/moment-categories/art-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[5];
- break;
- case 'Sports':
- icon = require('../../assets/moment-categories/sports-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[6];
- break;
- case 'Fashion':
- icon = require('../../assets/moment-categories/fashion-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[7];
- break;
- case 'Travel':
- icon = require('../../assets/moment-categories/travel-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[8];
- break;
- case 'Pets':
- icon = require('../../assets/moment-categories/pets-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[9];
- break;
- case 'Fitness':
- icon = require('../../assets/moment-categories/fitness-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[10];
- break;
- case 'DIY':
- icon = require('../../assets/moment-categories/diy-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[11];
- break;
- case 'Nature':
- icon = require('../../assets/moment-categories/nature-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[12];
- break;
- case 'Early Life':
- icon = require('../../assets/moment-categories/early-life-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[13];
- break;
- case 'Beauty':
- icon = require('../../assets/moment-categories/beauty-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[14];
- break;
- default:
- // All custom categories
- icon = require('../../assets/moment-categories/custom-icon.png');
- // A quick deterministic "random" color picker by summing up ascii char codees
- const charCodeSum = categoryType
- .split('')
- .reduce((acc: number, x: string) => acc + x.charCodeAt(0), 0);
- bgColor =
- MOMENT_CATEGORY_BG_COLORS[
- charCodeSum % MOMENT_CATEGORY_BG_COLORS.length
- ];
- break;
- }
+ const {icon, bgColor} = getMomentCategoryIconInfo(categoryType);
/**
* The Linear Gradient helps us add a gradient border when the category is already added /selected by user
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index 910aa095..493f6238 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -129,6 +129,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
screenType: screenType,
selectedTags: tags,
moment: moment,
+ selectedCategory: moment.moment_category,
});
};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 20:51:06 +0000