aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/comments/CommentsCount.tsx48
-rw-r--r--src/components/comments/ZoomInCropper.tsx184
-rw-r--r--src/components/common/MomentTags.tsx28
-rw-r--r--src/components/moments/IndividualMomentTitleBar.tsx58
-rw-r--r--src/components/moments/Moment.tsx10
-rw-r--r--src/components/moments/MomentPost.tsx336
-rw-r--r--src/components/moments/index.ts1
-rw-r--r--src/components/moments/legacy/MomentPostContent.tsx (renamed from src/components/moments/MomentPostContent.tsx)19
-rw-r--r--src/components/profile/MomentMoreInfoDrawer.tsx8
-rw-r--r--src/components/profile/PublicProfile.tsx4
-rw-r--r--src/routes/main/MainStackNavigator.tsx10
-rw-r--r--src/routes/main/MainStackScreen.tsx9
-rw-r--r--src/screens/main/NotificationsScreen.tsx5
-rw-r--r--src/screens/moments/TagFriendsScreen.tsx2
-rw-r--r--src/screens/onboarding/BasicInfoOnboarding.tsx5
-rw-r--r--src/screens/profile/CaptionScreen.tsx2
-rw-r--r--src/screens/profile/IndividualMoment.tsx88
17 files changed, 645 insertions, 172 deletions
diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
new file mode 100644
index 00000000..90514193
--- /dev/null
+++ b/src/components/comments/CommentsCount.tsx
@@ -0,0 +1,48 @@
+import {useNavigation} from '@react-navigation/core';
+import React from 'react';
+import {StyleSheet, Text} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import CommentsIcon from '../../assets/icons/moment-comment-icon.svg';
+import {MomentPostType, ScreenType} from '../../types';
+import {normalize} from '../../utils';
+
+interface CommentsCountProps {
+ moment: MomentPostType;
+ screenType: ScreenType;
+}
+
+const CommentsCount: React.FC<CommentsCountProps> = ({moment, screenType}) => {
+ const navigation = useNavigation();
+ return (
+ <TouchableOpacity
+ style={styles.countContainer}
+ onPress={() =>
+ navigation.navigate('MomentCommentsScreen', {
+ moment_id: moment.moment_id,
+ screenType,
+ })
+ }>
+ <CommentsIcon width={25} height={25} />
+ <Text style={styles.count}>{moment.comments_count}</Text>
+ </TouchableOpacity>
+ );
+};
+
+const styles = StyleSheet.create({
+ countContainer: {
+ minWidth: 50,
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ count: {
+ fontWeight: '500',
+ fontSize: normalize(11),
+ lineHeight: normalize(13),
+ letterSpacing: normalize(0.05),
+ textAlign: 'center',
+ color: 'white',
+ marginTop: normalize(5),
+ },
+});
+export default CommentsCount;
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
new file mode 100644
index 00000000..25301e6a
--- /dev/null
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -0,0 +1,184 @@
+import {RouteProp} from '@react-navigation/core';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {default as React, useEffect, useState} from 'react';
+import {Image, StyleSheet, TouchableOpacity} from 'react-native';
+import {normalize} from 'react-native-elements';
+import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
+import PhotoManipulator from 'react-native-photo-manipulator';
+import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {MainStackParams} from '../../routes';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {TaggSquareButton} from '../common';
+
+type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
+type ZoomInCropperNavigationProps = StackNavigationProp<
+ MainStackParams,
+ 'ZoomInCropper'
+>;
+interface ZoomInCropperProps {
+ route: ZoomInCropperRouteProps;
+ navigation: ZoomInCropperNavigationProps;
+}
+
+export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
+ route,
+ navigation,
+}) => {
+ const {screenType, title, image} = route.params;
+ const [aspectRatio, setAspectRatio] = useState<number>(1);
+
+ const [x0, setX0] = useState<number>();
+ const [x1, setX1] = useState<number>();
+ const [y0, setY0] = useState<number>();
+ const [y1, setY1] = useState<number>();
+
+ useEffect(() => {
+ navigation.dangerouslyGetParent()?.setOptions({
+ tabBarVisible: false,
+ });
+ }, []);
+
+ useEffect(() => {
+ if (image.sourceURL) {
+ Image.getSize(
+ image.sourceURL,
+ (w, h) => {
+ setAspectRatio(w / h);
+ },
+ (err) => console.log(err),
+ );
+ }
+ }, []);
+
+ const handleNext = () => {
+ if (
+ x0 !== undefined &&
+ x1 !== undefined &&
+ y0 !== undefined &&
+ y1 !== undefined &&
+ image.sourceURL
+ ) {
+ PhotoManipulator.crop(image.sourceURL, {
+ x: x0,
+ y: y1,
+ width: Math.abs(x0 - x1),
+ height: Math.abs(y0 - y1),
+ })
+ .then((croppedURL) => {
+ navigation.navigate('CaptionScreen', {
+ screenType,
+ title: title,
+ image: {filename: croppedURL, path: croppedURL},
+ });
+ })
+ .catch((err) => console.log('err: ', err));
+ } else if (
+ x0 === undefined &&
+ x1 === undefined &&
+ y0 === undefined &&
+ y1 === undefined &&
+ image.sourceURL
+ ) {
+ navigation.navigate('CaptionScreen', {
+ screenType,
+ title: title,
+ image: {filename: image.sourceURL, path: image.sourceURL},
+ });
+ }
+ };
+
+ const onMove = (position: IOnMove) => {
+ Image.getSize(
+ image.path,
+ (w, h) => {
+ const x = position.positionX;
+ const y = position.positionY;
+ const scale = position.scale;
+ const screen_ratio = SCREEN_HEIGHT / SCREEN_WIDTH;
+ let tempx0 = w / 2 - x * (w / SCREEN_WIDTH) - w / 2 / scale;
+ let tempx1 = w / 2 - x * (w / SCREEN_WIDTH) + w / 2 / scale;
+ if (tempx0 < 0) {
+ tempx0 = 0;
+ }
+ if (tempx1 > w) {
+ tempx1 = w;
+ }
+ const x_distance = Math.abs(tempx1 - tempx0);
+ const y_distance = screen_ratio * x_distance;
+ let tempy0 = h / 2 - y * (h / SCREEN_HEIGHT) + y_distance / 2;
+ let tempy1 = h / 2 - y * (h / SCREEN_HEIGHT) - y_distance / 2;
+ if (tempy0 > h) {
+ tempy0 = h;
+ }
+ if (tempy1 < 0) {
+ tempy1 = 0;
+ }
+ setX0(tempx0);
+ setX1(tempx1);
+ setY0(tempy0);
+ setY1(tempy1);
+ },
+ (err) => console.log(err),
+ );
+ };
+
+ return (
+ <>
+ <TouchableOpacity
+ style={styles.closeButton}
+ 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: image.sourceURL,
+ }}
+ />
+ </ImageZoom>
+ <TaggSquareButton
+ onPress={handleNext}
+ title={'Next'}
+ buttonStyle={'normal'}
+ buttonColor={'blue'}
+ labelColor={'white'}
+ style={styles.button}
+ labelStyle={styles.buttonLabel}
+ />
+ </>
+ );
+};
+
+const styles = StyleSheet.create({
+ closeButton: {
+ position: 'absolute',
+ top: 0,
+ paddingTop: HeaderHeight,
+ zIndex: 1,
+ marginLeft: '5%',
+ },
+ button: {
+ zIndex: 1,
+ position: 'absolute',
+ bottom: normalize(20),
+ right: normalize(15),
+ width: normalize(108),
+ height: normalize(25),
+ borderRadius: 10,
+ },
+ buttonLabel: {
+ fontWeight: '700',
+ fontSize: normalize(15),
+ lineHeight: normalize(17.8),
+ letterSpacing: normalize(1.3),
+ textAlign: 'center',
+ },
+ zoomView: {backgroundColor: 'black'},
+});
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index bdd1fbeb..4afacddb 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -66,19 +66,21 @@ const MomentTags: React.FC<MomentTagsProps> = ({
useEffect(() => {
setTimeout(
() => {
- imageRef.current.measure(
- (
- fx: number, // location of ref relative to parent element
- fy: number,
- width: number,
- height: number,
- _x: number, // location of ref relative to entire screen
- _y: number,
- ) => {
- setOffset([fx, fy]);
- setImageDimensions([width, height]);
- },
- );
+ if (imageRef && imageRef.current) {
+ imageRef.current.measure(
+ (
+ fx: number, // location of ref relative to parent element
+ fy: number,
+ width: number,
+ height: number,
+ _x: number, // location of ref relative to entire screen
+ _y: number,
+ ) => {
+ setOffset([fx, fy]);
+ setImageDimensions([width, height]);
+ },
+ );
+ }
},
editing ? 100 : 0,
);
diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx
index 4ae9471f..c6bf1423 100644
--- a/src/components/moments/IndividualMomentTitleBar.tsx
+++ b/src/components/moments/IndividualMomentTitleBar.tsx
@@ -1,45 +1,32 @@
import React from 'react';
-import {
- StyleSheet,
- Text,
- TouchableOpacity,
- View,
- ViewProps,
-} from 'react-native';
-import CloseIcon from '../../assets/ionicons/close-outline.svg';
-import {normalize} from '../../utils';
+import {StyleSheet, Text, View, ViewProps} from 'react-native';
+import {normalize, SCREEN_WIDTH} from '../../utils';
interface IndividualMomentTitleBarProps extends ViewProps {
title: string;
- close: () => void;
}
const IndividualMomentTitleBar: React.FC<IndividualMomentTitleBarProps> = ({
title,
- close,
- style,
}) => {
return (
- <View style={[styles.container, style]}>
- <TouchableOpacity style={styles.closeButton} onPress={close}>
- <CloseIcon height={'100%'} width={'100%'} color={'white'} />
- </TouchableOpacity>
- <View style={styles.headerContainer}>
- <Text style={styles.header}>{title}</Text>
+ <View style={styles.mainContainer}>
+ <View style={styles.titleContainer}>
+ <Text
+ style={[
+ styles.title,
+ {
+ fontSize: title.length > 18 ? normalize(14) : normalize(16),
+ },
+ ]}>
+ {title}
+ </Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
- container: {
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'flex-start',
- },
- headerContainer: {
- width: '80%',
- },
- header: {
+ title: {
textAlign: 'center',
color: 'white',
fontSize: normalize(18),
@@ -47,10 +34,19 @@ const styles = StyleSheet.create({
lineHeight: normalize(21.48),
letterSpacing: normalize(1.3),
},
- closeButton: {
- height: '50%',
- aspectRatio: 1,
- left: '8%',
+ titleContainer: {
+ width: '80%',
+ position: 'absolute',
+ left: '10%',
+ right: '10%',
+ height: normalize(70),
+ },
+ mainContainer: {
+ flex: 1,
+ width: SCREEN_WIDTH * 0.6,
+ flexDirection: 'row',
+ justifyContent: 'flex-end',
+ marginVertical: '2%',
},
});
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index cde5b2e0..81e23076 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -7,8 +7,8 @@ import ImagePicker from 'react-native-image-crop-picker';
import LinearGradient from 'react-native-linear-gradient';
import DeleteIcon from '../../assets/icons/delete-logo.svg';
import DownIcon from '../../assets/icons/down_icon.svg';
-import PlusIcon from '../../assets/icons/plus-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 {ERROR_UPLOAD} from '../../constants/strings';
@@ -52,15 +52,11 @@ const Moment: React.FC<MomentProps> = ({
'Screenshots',
'UserLibrary',
],
- width: 580,
- height: 580,
- cropping: true,
- cropperToolbarTitle: 'Upload a moment',
- mediaType: 'photo',
+ mediaType: 'any',
})
.then((picture) => {
if ('path' in picture) {
- navigation.navigate('CaptionScreen', {
+ navigation.navigate('ZoomInCropper', {
screenType,
title: title,
image: picture,
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index d87028e3..e069089c 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,38 +1,77 @@
-import React, {useEffect, useState} from 'react';
-import {StyleSheet} from 'react-native';
-import {useSelector} from 'react-redux';
-import {MomentPostContent, MomentPostHeader} from '.';
+import {useNavigation} from '@react-navigation/native';
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import {
+ Image,
+ KeyboardAvoidingView,
+ Platform,
+ StatusBar,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ TouchableWithoutFeedback,
+ View,
+} from 'react-native';
+import Animated, {EasingNode} from 'react-native-reanimated';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {headerBarOptions} from '../../routes';
+import {MomentContext} from '../../screens/profile/IndividualMoment';
import {deleteMomentTag, loadMomentTags} from '../../services';
+import {loadUserMoments} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
-import {MomentPostType, MomentTagType, ScreenType} from '../../types';
-import {normalize, SCREEN_HEIGHT} from '../../utils';
-
+import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types';
+import {
+ getTimePosted,
+ HeaderHeight,
+ navigateToProfile,
+ normalize,
+ SCREEN_HEIGHT,
+ SCREEN_WIDTH,
+} from '../../utils';
+import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
+import {AddComment} from '../comments';
+import CommentsCount from '../comments/CommentsCount';
+import {MomentTags} from '../common';
+import {MomentMoreInfoDrawer, TaggAvatar} from '../profile';
+import IndividualMomentTitleBar from './IndividualMomentTitleBar';
interface MomentPostProps {
moment: MomentPostType;
userXId: string | undefined;
screenType: ScreenType;
- index: number;
}
const MomentPost: React.FC<MomentPostProps> = ({
moment,
userXId,
screenType,
- index,
}) => {
+ const navigation = useNavigation();
+ const dispatch = useDispatch();
const {userId: loggedInUserId, username: loggedInUsername} = useSelector(
(state: RootState) => state.user.user,
);
-
- const {
- user: {username},
- } = useSelector((state: RootState) =>
+ const {user} = useSelector((state: RootState) =>
userXId ? state.userX[screenType][userXId] : state.user,
);
+ const state: RootState = useStore().getState();
+ const isOwnProfile = user.username === loggedInUsername;
+
const [tags, setTags] = useState<MomentTagType[]>([]);
+ const [visible, setVisible] = useState(false);
+ const [drawerVisible, setDrawerVisible] = useState(false);
+ const [hideText, setHideText] = useState(false);
+ const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
+
+ const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
+ new Animated.Value(0),
+ );
+ const [commentCount, setCommentCount] = useState<number>(
+ moment.comments_count,
+ );
+ const [aspectRatio, setAspectRatio] = useState<number>(1);
const [momentTagId, setMomentTagId] = useState<string>('');
- const isOwnProfile = username === loggedInUsername;
+ const imageRef = useRef(null);
+ const {keyboardVisible} = useContext(MomentContext);
/*
* Load tags on initial render to pass tags data to moment header and content
@@ -41,7 +80,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
loadMomentTags(moment.moment_id).then((response) => {
setTags(response ? response : []);
});
- }, []);
+ }, [moment]);
/*
* Check if loggedInUser has been tagged in the picture and set the id
@@ -71,34 +110,259 @@ const MomentPost: React.FC<MomentPostProps> = ({
}
};
+ useEffect(
+ () =>
+ navigation.setOptions({
+ ...headerBarOptions('white', ''),
+ headerTitle: () => (
+ <IndividualMomentTitleBar title={moment.moment_category} />
+ ),
+ }),
+ [moment.moment_id],
+ );
+
+ useEffect(() => {
+ Image.getSize(
+ moment.moment_url,
+ (w, h) => {
+ const isFS = Math.abs(w / h - 9 / 16) < 0.01;
+ setAspectRatio(w / h);
+ setIsFullScreen(isFS);
+ },
+ (err) => console.log(err),
+ );
+ }, []);
+
+ useEffect(() => {
+ const fade = async () => {
+ Animated.timing(fadeValue, {
+ toValue: 1,
+ duration: 250,
+ easing: EasingNode.linear,
+ }).start();
+ };
+ fade();
+ }, [fadeValue]);
+
+ useEffect(() => {
+ if (!keyboardVisible && hideText) {
+ setHideText(false);
+ }
+ }, [keyboardVisible, hideText]);
+
+ const MomentPosterPreview = () => (
+ <View style={styles.momentPosterContainer}>
+ <TouchableOpacity
+ onPress={() =>
+ navigateToProfile(state, dispatch, navigation, screenType, user)
+ }
+ style={styles.header}>
+ <TaggAvatar
+ style={styles.avatar}
+ userXId={userXId}
+ screenType={screenType}
+ editable={false}
+ />
+ <Text style={styles.headerText}>{user.username}</Text>
+ </TouchableOpacity>
+ </View>
+ );
+
return (
<>
- <MomentPostHeader
- style={styles.postHeader}
- userXId={userXId}
- screenType={screenType}
- username={isOwnProfile ? loggedInUsername : username}
- momentTagId={momentTagId}
- removeTag={removeTag}
- moment={moment}
- tags={tags}
- />
- <MomentPostContent
- style={styles.postContent}
- moment={moment}
- screenType={screenType}
- momentTags={tags}
- index={index}
- />
+ <StatusBar barStyle={'light-content'} />
+ <View style={styles.mainContainer}>
+ <Image
+ source={{uri: moment.moment_url}}
+ style={[
+ styles.image,
+ {
+ height: isFullScreen ? SCREEN_HEIGHT : SCREEN_WIDTH / aspectRatio,
+ },
+ ]}
+ resizeMode={'cover'}
+ ref={imageRef}
+ />
+ {visible && (
+ <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
+ <MomentTags
+ editing={false}
+ tags={tags}
+ setTags={() => null}
+ imageRef={imageRef}
+ />
+ </Animated.View>
+ )}
+ <TouchableWithoutFeedback
+ onPress={() => {
+ setVisible(!visible);
+ setFadeValue(new Animated.Value(0));
+ }}>
+ <View style={styles.contentContainer}>
+ <View style={styles.topContainer}>
+ <MomentMoreInfoDrawer
+ isOpen={drawerVisible}
+ setIsOpen={setDrawerVisible}
+ isOwnProfile={isOwnProfile}
+ momentTagId={momentTagId}
+ removeTag={removeTag}
+ dismissScreenAndUpdate={() => {
+ dispatch(loadUserMoments(loggedInUserId));
+ navigation.goBack();
+ }}
+ screenType={screenType}
+ moment={moment}
+ tags={tags}
+ />
+ </View>
+ <KeyboardAvoidingView
+ behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+ keyboardVerticalOffset={-20}>
+ <View style={styles.bottomContainer}>
+ {tags.length > 0 && (
+ <Image
+ source={require('../../assets/icons/tag_indicate.png')}
+ style={styles.tagIcon}
+ />
+ )}
+ <View style={styles.commentsCountContainer}>
+ <CommentsCount moment={moment} screenType={screenType} />
+ </View>
+ <MomentPosterPreview />
+ {!hideText && (
+ <>
+ {moment.caption !== '' &&
+ renderTextWithMentions({
+ value: moment.caption,
+ styles: styles.captionText,
+ partTypes: mentionPartTypes('white'),
+ onPress: (userLocal: UserType) =>
+ navigateToProfile(
+ state,
+ dispatch,
+ navigation,
+ screenType,
+ userLocal,
+ ),
+ })}
+ </>
+ )}
+ <View>
+ <AddComment
+ placeholderText={'Add a comment here!'}
+ momentId={moment.moment_id}
+ callback={() => {
+ setCommentCount(commentCount + 1);
+ }}
+ onFocus={() => {
+ setHideText(true);
+ }}
+ isKeyboardAvoiding={false}
+ theme={'dark'}
+ />
+ <Text style={styles.text}>
+ {getTimePosted(moment.date_created)}
+ </Text>
+ </View>
+ </View>
+ </KeyboardAvoidingView>
+ </View>
+ </TouchableWithoutFeedback>
+ </View>
</>
);
};
const styles = StyleSheet.create({
- postHeader: {},
- postContent: {
- minHeight: SCREEN_HEIGHT * 0.8,
- paddingBottom: normalize(20),
+ image: {
+ width: SCREEN_WIDTH,
+ marginBottom: '3%',
+ zIndex: 0,
+ position: 'absolute',
+ },
+ text: {
+ marginHorizontal: '5%',
+ color: 'white',
+ fontWeight: '500',
+ textAlign: 'right',
+ marginTop: 5,
+ },
+ captionText: {
+ position: 'relative',
+ marginHorizontal: '5%',
+ color: '#ffffff',
+ fontWeight: '500',
+ fontSize: normalize(13),
+ lineHeight: normalize(15.51),
+ letterSpacing: normalize(0.6),
+ marginBottom: normalize(5),
+ width: SCREEN_WIDTH * 0.79,
+ },
+ tagIcon: {
+ width: normalize(30),
+ height: normalize(30),
+ bottom: normalize(20),
+ left: '5%',
+ },
+ avatar: {
+ width: 48,
+ aspectRatio: 1,
+ borderRadius: 100,
+ marginLeft: '3%',
+ },
+ headerText: {
+ fontSize: 15,
+ fontWeight: 'bold',
+ color: 'white',
+ paddingHorizontal: '3%',
+ },
+ header: {
+ alignItems: 'center',
+ flexDirection: 'row',
+ marginBottom: normalize(15),
+ alignSelf: 'flex-start',
+ },
+ momentPosterContainer: {
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ commentsCountContainer: {
+ position: 'absolute',
+ right: '2%',
+ bottom: SCREEN_HEIGHT * 0.12,
+ },
+ bottomContainer: {
+ flexDirection: 'column',
+ justifyContent: 'flex-end',
+ },
+ topContainer: {
+ paddingTop: HeaderHeight,
+ alignSelf: 'flex-end',
+ paddingRight: '8%',
+ },
+ contentContainer: {
+ position: 'absolute',
+ width: SCREEN_WIDTH,
+ height: SCREEN_HEIGHT,
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ paddingBottom: '24%',
+ },
+ tagsContainer: {
+ position: 'absolute',
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ marginBottom: '3%',
+ },
+ mainContainer: {
+ backgroundColor: 'black',
+ width: SCREEN_WIDTH,
+ height: SCREEN_HEIGHT,
+ flexDirection: 'column',
+ justifyContent: 'center',
},
});
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
index c1419cfd..743b78b0 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -1,7 +1,6 @@
export {default as IndividualMomentTitleBar} from './IndividualMomentTitleBar';
export {default as CaptionScreenHeader} from './CaptionScreenHeader';
export {default as MomentPostHeader} from './MomentPostHeader';
-export {default as MomentPostContent} from './MomentPostContent';
export {default as Moment} from './Moment';
export {default as TagFriendsFooter} from './TagFriendsFoooter';
export {default as MomentPost} from './MomentPost';
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/legacy/MomentPostContent.tsx
index aca2999c..6388be27 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/legacy/MomentPostContent.tsx
@@ -4,26 +4,29 @@ import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import Animated, {EasingNode} from 'react-native-reanimated';
import {useDispatch, useStore} from 'react-redux';
-import {MomentContext} from '../../screens/profile/IndividualMoment';
-import {RootState} from '../../store/rootReducer';
+import {MomentContext} from '../../../screens/profile/IndividualMoment';
+import {RootState} from '../../../store/rootReducer';
import {
MomentCommentPreviewType,
MomentPostType,
MomentTagType,
ScreenType,
UserType,
-} from '../../types';
+} from '../../../types';
import {
getLoggedInUserAsProfilePreview,
getTimePosted,
navigateToProfile,
normalize,
SCREEN_WIDTH,
-} from '../../utils';
-import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
-import {AddComment} from '../comments';
-import {MomentTags} from '../common';
-import MomentCommentPreview from './MomentCommentPreview';
+} from '../../../utils';
+import {
+ mentionPartTypes,
+ renderTextWithMentions,
+} from '../../../utils/comments';
+import {AddComment} from '../../comments';
+import {MomentTags} from '../../common';
+import MomentCommentPreview from '../MomentCommentPreview';
interface MomentPostContentProps extends ViewProps {
screenType: ScreenType;
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index a796ffd8..dc4ebe32 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -3,7 +3,6 @@ import React, {useEffect, useState} from 'react';
import {
Alert,
GestureResponderEvent,
- StyleSheet,
TextStyle,
TouchableOpacity,
ViewProps,
@@ -169,7 +168,6 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
return (
<>
<TouchableOpacity
- style={styles.icon}
onPress={() => {
setIsOpen(true);
}}>
@@ -184,10 +182,4 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
);
};
-const styles = StyleSheet.create({
- icon: {
- marginRight: '3%',
- },
-});
-
export default MomentMoreInfoDrawer;
diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx
index 8a80c56f..6b991d7c 100644
--- a/src/components/profile/PublicProfile.tsx
+++ b/src/components/profile/PublicProfile.tsx
@@ -87,7 +87,9 @@ const PublicProfile: React.FC<ContentProps> = ({
scrollViewRef.current
) {
setScrollEnabled(false);
- scrollViewRef.current.scrollTo({y: 0});
+ if (scrollViewRef && scrollViewRef.current) {
+ scrollViewRef.current.scrollTo({y: 0});
+ }
navigation.navigate('MomentUploadPrompt', {
screenType,
momentCategory: momentCategories[0],
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 8fce5e2f..b58e03cc 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -38,7 +38,10 @@ export type MainStackParams = {
};
CaptionScreen: {
title?: string;
- image?: Image;
+ image?: {
+ filename: string;
+ path: string;
+ };
screenType: ScreenType;
selectedTags?: MomentTagType[];
moment?: MomentType;
@@ -107,6 +110,11 @@ export type MainStackParams = {
ChatList: undefined;
Chat: undefined;
NewChatModal: undefined;
+ ZoomInCropper: {
+ image: Image;
+ screenType: ScreenType;
+ title: string;
+ };
};
export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 3be2ff28..9e3747f9 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -39,6 +39,7 @@ import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders
import {ScreenType} from '../../types';
import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils';
import {MainStack, MainStackParams} from './MainStackNavigator';
+import {ZoomInCropper} from '../../components/comments/ZoomInCropper';
/**
* Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited.
@@ -209,6 +210,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
options={{
...modalStyle,
gestureEnabled: false,
+ ...headerBarOptions('white', ''),
}}
/>
<MainStack.Screen
@@ -325,6 +327,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
gestureEnabled: false,
}}
/>
+ <MainStack.Screen
+ name="ZoomInCropper"
+ component={ZoomInCropper}
+ options={{
+ gestureEnabled: false,
+ }}
+ />
</MainStack.Navigator>
);
};
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 03842b0a..84c15f66 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -36,8 +36,9 @@ const NotificationsScreen: React.FC = () => {
);
const [refreshing, setRefreshing] = useState(false);
// used for figuring out which ones are unread
- const [lastViewed, setLastViewed] =
- useState<moment.Moment | undefined>(undefined);
+ const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>(
+ undefined,
+ );
const {notifications} = useSelector(
(state: RootState) => state.notifications,
);
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 570c3776..6956dc0d 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -86,7 +86,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
ref={imageRef}
style={styles.image}
source={{uri: imagePath}}
- resizeMode={'cover'}
+ resizeMode={'contain'}
/>
</TouchableWithoutFeedback>
{tags.length !== 0 && (
diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx
index d5998ac1..4c8da021 100644
--- a/src/screens/onboarding/BasicInfoOnboarding.tsx
+++ b/src/screens/onboarding/BasicInfoOnboarding.tsx
@@ -71,8 +71,9 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
const [invalidWithError, setInvalidWithError] = useState(
'Please enter a valid ',
);
- const [autoCapitalize, setAutoCap] =
- useState<'none' | 'sentences' | 'words' | 'characters' | undefined>('none');
+ const [autoCapitalize, setAutoCap] = useState<
+ 'none' | 'sentences' | 'words' | 'characters' | undefined
+ >('none');
const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
new Animated.Value(0),
);
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 253346d5..75533a9b 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -197,7 +197,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
<Image
style={styles.image}
source={{uri: moment ? moment.moment_url : image?.path}}
- resizeMode={'cover'}
+ resizeMode={'contain'}
/>
<MentionInputControlled
containerStyle={styles.text}
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index f8113aba..ca31ad5b 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,20 +1,14 @@
-import {BlurView} from '@react-native-community/blur';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useEffect, useRef, useState} from 'react';
-import {FlatList, Keyboard, StyleSheet} from 'react-native';
+import {FlatList, Keyboard} from 'react-native';
import {useSelector} from 'react-redux';
-import {IndividualMomentTitleBar, MomentPost} from '../../components';
+import {MomentPost, TabsGradient} from '../../components';
import {AVATAR_DIM} from '../../constants';
import {MainStackParams} from '../../routes';
import {RootState} from '../../store/rootreducer';
import {MomentPostType} from '../../types';
-import {
- isIPhoneX,
- normalize,
- SCREEN_HEIGHT,
- StatusBarHeight,
-} from '../../utils';
+import {isIPhoneX} from '../../utils';
/**
* Individual moment view opened when user clicks on a moment tile
@@ -39,10 +33,7 @@ interface IndividualMomentProps {
navigation: IndividualMomentNavigationProp;
}
-const IndividualMoment: React.FC<IndividualMomentProps> = ({
- route,
- navigation,
-}) => {
+const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
const {
userXId,
screenType,
@@ -84,55 +75,32 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
keyboardVisible,
scrollTo,
}}>
- <BlurView
- blurType="light"
- blurAmount={30}
- reducedTransparencyFallbackColor="white"
- style={styles.contentContainer}>
- <IndividualMomentTitleBar
- style={styles.header}
- close={() => navigation.goBack()}
- title={moment_category}
- />
- <FlatList
- ref={scrollRef}
- data={momentData}
- contentContainerStyle={styles.listContentContainer}
- renderItem={({item, index}) => (
- <MomentPost
- moment={item}
- userXId={userXId}
- screenType={screenType}
- index={index}
- />
- )}
- keyExtractor={(item, _) => item.moment_id}
- showsVerticalScrollIndicator={false}
- initialScrollIndex={initialIndex}
- onScrollToIndexFailed={() => {
- // TODO: code below does not work, index resets to 0
- // const wait = new Promise((resolve) => setTimeout(resolve, 500));
- // wait.then(() => {
- // console.log('scrolling to ', initialIndex);
- // scrollRef.current?.scrollToIndex({index: initialIndex});
- // });
- }}
- />
- </BlurView>
+ <FlatList
+ ref={scrollRef}
+ data={momentData}
+ renderItem={({item}) => (
+ <MomentPost
+ key={item.moment_id}
+ moment={item}
+ userXId={userXId}
+ screenType={screenType}
+ />
+ )}
+ keyExtractor={(item, _) => item.moment_id}
+ showsVerticalScrollIndicator={false}
+ initialScrollIndex={initialIndex}
+ onScrollToIndexFailed={(info) => {
+ setTimeout(() => {
+ scrollRef.current?.scrollToIndex({
+ index: info.index,
+ });
+ }, 500);
+ }}
+ pagingEnabled
+ />
+ <TabsGradient />
</MomentContext.Provider>
);
};
-const styles = StyleSheet.create({
- contentContainer: {
- paddingTop: StatusBarHeight,
- flex: 1,
- },
- header: {
- height: normalize(70),
- },
- listContentContainer: {
- paddingBottom: SCREEN_HEIGHT * 0.2,
- },
-});
export default IndividualMoment;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 13:52:50 +0000