aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/moments/IndividualMomentTitleBar.tsx53
-rw-r--r--src/components/moments/MomentPost.tsx52
-rw-r--r--src/components/moments/index.ts1
-rw-r--r--src/routes/main/MainStackScreen.tsx49
-rw-r--r--src/screens/moments/TagFriendsScreen.tsx104
-rw-r--r--src/screens/suggestedPeople/index.ts1
6 files changed, 103 insertions, 157 deletions
diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx
deleted file mode 100644
index c6bf1423..00000000
--- a/src/components/moments/IndividualMomentTitleBar.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import {StyleSheet, Text, View, ViewProps} from 'react-native';
-import {normalize, SCREEN_WIDTH} from '../../utils';
-
-interface IndividualMomentTitleBarProps extends ViewProps {
- title: string;
-}
-const IndividualMomentTitleBar: React.FC<IndividualMomentTitleBarProps> = ({
- title,
-}) => {
- return (
- <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({
- title: {
- textAlign: 'center',
- color: 'white',
- fontSize: normalize(18),
- fontWeight: '700',
- lineHeight: normalize(21.48),
- letterSpacing: normalize(1.3),
- },
- 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%',
- },
-});
-
-export default IndividualMomentTitleBar;
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 921f7693..939c0cf6 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,4 +1,4 @@
-import {useNavigation} from '@react-navigation/native';
+import {useIsFocused, useNavigation} from '@react-navigation/native';
import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
import {
Image,
@@ -25,8 +25,7 @@ import Video from 'react-native-video';
import {useDispatch, useSelector, useStore} from 'react-redux';
import {TaggedUsersDrawer} from '.';
import PauseIcon from '../../assets/icons/pause-icon.svg';
-import {TAGG_PURPLE} from '../../constants/constants';
-import {headerBarOptions} from '../../routes';
+import {headerBarOptions, multilineHeaderTitle} from '../../routes';
import {MomentContext} from '../../screens/profile/IndividualMoment';
import {deleteMomentTag, loadMomentTags} from '../../services';
import {loadUserMoments} from '../../store/actions';
@@ -43,7 +42,6 @@ import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
import CommentsCount from '../comments/CommentsCount';
import {GradientProgressBar, MomentTags} from '../common';
import {MomentMoreInfoDrawer, TaggAvatar} from '../profile';
-import IndividualMomentTitleBar from './IndividualMomentTitleBar';
interface MomentPostProps {
moment: MomentPostType;
userXId: string | undefined;
@@ -93,7 +91,14 @@ const MomentPost: React.FC<MomentPostProps> = ({
);
const mediaHeight = SCREEN_WIDTH / aspectRatio;
const [isVideoPaused, setIsVideoPaused] = useState<boolean>(false);
+ const screenIsFocused = useIsFocused();
const videoProgress = useSharedValue(0);
+
+ // update play/pause icon based on video pause state
+ useEffect(() => {
+ setFadeValue(new Animated.Value(isVideoPaused ? 1 : 0));
+ }, [isVideoPaused]);
+
/*
* Load tags on initial render to pass tags data to moment header and content
*/
@@ -131,16 +136,18 @@ const MomentPost: React.FC<MomentPostProps> = ({
}
};
- useEffect(
- () =>
+ useEffect(() => {
+ if (moment.moment_category.length > 20) {
navigation.setOptions({
...headerBarOptions('white', ''),
- headerTitle: () => (
- <IndividualMomentTitleBar title={moment.moment_category} />
- ),
- }),
- [moment.moment_id],
- );
+ ...multilineHeaderTitle(moment.moment_category),
+ });
+ } else {
+ navigation.setOptions({
+ ...headerBarOptions('white', moment.moment_category),
+ });
+ }
+ }, [moment.moment_id]);
/*
* Determines if an image is 9:16 to set aspect ratio of current image and
@@ -228,7 +235,11 @@ const MomentPost: React.FC<MomentPostProps> = ({
const {width, height} = response.naturalSize;
setAspectRatio(width / height);
}}
- paused={moment.moment_id !== currentVisibleMomentId || isVideoPaused}
+ paused={
+ moment.moment_id !== currentVisibleMomentId ||
+ isVideoPaused ||
+ !screenIsFocused
+ }
onProgress={({currentTime, seekableDuration}) => {
const localProgress = currentTime / seekableDuration;
if (!isNaN(localProgress)) {
@@ -294,9 +305,6 @@ const MomentPost: React.FC<MomentPostProps> = ({
onPress={() => {
if (isVideo) {
setIsVideoPaused(!isVideoPaused);
- isVideoPaused
- ? setFadeValue(new Animated.Value(0))
- : setFadeValue(new Animated.Value(1));
} else {
setTagsVisible(!tagsVisible);
setFadeValue(new Animated.Value(0));
@@ -493,17 +501,9 @@ const styles = StyleSheet.create({
height: 3,
marginHorizontal: 2,
},
- progressDot: {
- backgroundColor: '#fff',
- width: 10,
- height: 10,
- borderRadius: 10,
- borderWidth: 0.3,
- borderColor: TAGG_PURPLE,
- position: 'absolute',
- top: -2.5,
+ profilePreviewContainer: {
+ paddingHorizontal: '3%',
},
- profilePreviewContainer: {paddingHorizontal: '3%'},
});
export default MomentPost;
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
index 3f33ec53..4c1c509e 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -1,4 +1,3 @@
-export {default as IndividualMomentTitleBar} from './IndividualMomentTitleBar';
export {default as CaptionScreenHeader} from './CaptionScreenHeader';
export {default as Moment} from './Moment';
export {default as TagFriendsFooter} from './TagFriendsFoooter';
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 064e9725..64060554 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -2,25 +2,28 @@ import {RouteProp} from '@react-navigation/native';
import {StackNavigationOptions} from '@react-navigation/stack';
import React from 'react';
import {StyleSheet, Text} from 'react-native';
-import {normalize} from 'react-native-elements';
import BackIcon from '../../assets/icons/back-arrow.svg';
import {
AccountType,
AnimatedTutorial,
BadgeSelection,
+ CameraScreen,
CaptionScreen,
CategorySelection,
ChatListScreen,
ChatScreen,
+ ChoosingCategoryScreen,
CommentReactionScreen,
CreateCustomCategory,
DiscoverUsers,
+ EditMedia,
EditProfile,
FriendsListScreen,
IndividualMoment,
InviteFriendsScreen,
MomentCommentsScreen,
MomentUploadPromptScreen,
+ MutualBadgeHolders,
NewChatModal,
NotificationsScreen,
PrivacyScreen,
@@ -31,16 +34,17 @@ import {
SuggestedPeopleScreen,
SuggestedPeopleUploadPictureScreen,
SuggestedPeopleWelcomeScreen,
- TagSelectionScreen,
TagFriendsScreen,
- CameraScreen,
- EditMedia,
+ TagSelectionScreen,
} from '../../screens';
-import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
import {ScreenType} from '../../types';
-import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils';
+import {
+ AvatarHeaderHeight,
+ ChatHeaderHeight,
+ normalize,
+ SCREEN_WIDTH,
+} from '../../utils';
import {MainStack, MainStackParams} from './MainStackNavigator';
-import ChoosingCategoryScreen from '../../screens/profile/ChoosingCategoryScreen';
/**
* 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.
@@ -378,6 +382,7 @@ export const headerBarOptions: (
),
headerTitle: () => (
<Text
+ numberOfLines={1}
style={[
styles.headerTitle,
{color: color},
@@ -388,6 +393,23 @@ export const headerBarOptions: (
),
});
+export const multilineHeaderTitle: (title: string) => StackNavigationOptions = (
+ title,
+) => ({
+ headerTitle: () => (
+ <Text
+ numberOfLines={3}
+ style={[
+ styles.multilineHeaderTitle,
+ {
+ fontSize: title.length > 18 ? normalize(14) : normalize(16),
+ },
+ ]}>
+ {title}
+ </Text>
+ ),
+});
+
export const modalStyle: StackNavigationOptions = {
cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'},
gestureDirection: 'vertical',
@@ -413,8 +435,21 @@ const styles = StyleSheet.create({
shadowOffset: {width: 0, height: 0},
},
headerTitle: {
+ width: SCREEN_WIDTH * 0.7,
+ textAlign: 'center',
+ lineHeight: normalize(21.48),
+ letterSpacing: normalize(1.3),
+ fontWeight: '700',
+ },
+ multilineHeaderTitle: {
+ width: SCREEN_WIDTH * 0.7,
+ height: normalize(70),
+ marginTop: normalize(90) / 2,
+ textAlign: 'center',
+ lineHeight: normalize(21.48),
letterSpacing: normalize(1.3),
fontWeight: '700',
+ color: 'white',
},
});
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index d11f8049..c55721ed 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -10,15 +10,13 @@ import {
View,
} from 'react-native';
import Video from 'react-native-video';
-import {MainStackParams} from 'src/routes';
-import BackArrow from '../../assets/icons/back-arrow.svg';
import {MomentTags} from '../../components';
import {TagFriendsFooter} from '../../components/moments';
+import {headerBarOptions, MainStackParams} from '../../routes';
import {MomentTagType} from '../../types';
import {
HeaderHeight,
isIPhoneX,
- normalize,
SCREEN_HEIGHT,
SCREEN_WIDTH,
} from '../../utils';
@@ -48,6 +46,36 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
setTags(selectedTags ? selectedTags : []);
}, [selectedTags]);
+ useEffect(() => {
+ const title = media.isVideo
+ ? ''
+ : tags.length === 0
+ ? 'Tap on photo to tag friends!'
+ : 'Press and drag to move';
+ navigation.setOptions({
+ ...headerBarOptions('white', title),
+ headerRight: () => (
+ <TouchableOpacity
+ style={styles.buttonContainer}
+ // Altering the opacity style of TouchableOpacity doesn't work,
+ // so the next two lines are needed
+ disabled={tags.length === 0}
+ activeOpacity={tags.length === 0 ? 0 : 1}
+ onPress={handleDone}>
+ <Text
+ style={[
+ styles.shareButtonTitle,
+ // makes the Done buttomn invisible if there are no tags
+ // eslint-disable-next-line react-native/no-inline-styles
+ {opacity: tags.length !== 0 ? 1 : 0},
+ ]}>
+ Done
+ </Text>
+ </TouchableOpacity>
+ ),
+ });
+ }, [tags]);
+
/*
* Navigate back to Tag Users Screen, send selected users
*/
@@ -174,49 +202,8 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
onLayout={(event) => {
const {y, height} = event.nativeEvent.layout;
setTopHeight(y + height);
- }}>
- <TouchableOpacity
- onPress={() => {
- navigation.goBack();
- }}
- style={styles.backArrow}>
- <View style={styles.backArrowContainer}>
- <BackArrow
- height={normalize(18)}
- width={normalize(18)}
- color={'white'}
- />
- </View>
- </TouchableOpacity>
- {!media.isVideo ? (
- <TouchableWithoutFeedback style={styles.headerContainer}>
- {tags.length === 0 ? (
- <Text style={styles.header}>Tap on photo to tag friends!</Text>
- ) : (
- <Text style={styles.header}>Press and drag to move</Text>
- )}
- </TouchableWithoutFeedback>
- ) : (
- <View style={styles.headerPlaceholder} />
- )}
- <TouchableOpacity
- style={styles.buttonContainer}
- // Altering the opacity style of TouchableOpacity doesn't work,
- // so the next two lines are needed
- disabled={tags.length === 0}
- activeOpacity={tags.length === 0 ? 0 : 1}
- onPress={handleDone}>
- <Text
- style={[
- styles.shareButtonTitle,
- // makes the Done buttomn invisible if there are no tags
- // eslint-disable-next-line react-native/no-inline-styles
- {opacity: tags.length !== 0 ? 1 : 0},
- ]}>
- Done
- </Text>
- </TouchableOpacity>
- </View>
+ }}
+ />
{tags.length !== 0 && !media.isVideo && (
<MomentTags
tags={tags}
@@ -244,34 +231,11 @@ const styles = StyleSheet.create({
height: SCREEN_HEIGHT,
alignContent: 'center',
},
- backArrow: {
- marginTop: isIPhoneX() ? HeaderHeight : '10%',
- zIndex: 9999,
- },
- backArrowContainer: {
- flex: 1,
- flexDirection: 'column',
- justifyContent: 'center',
- alignContent: 'center',
- },
button: {
zIndex: 9999,
},
buttonContainer: {
- marginTop: isIPhoneX() ? HeaderHeight : '10%',
- right: 0,
- zIndex: 9999,
- flexDirection: 'row',
- justifyContent: 'flex-end',
- },
- headerContainer: {
- width: SCREEN_WIDTH,
- flexDirection: 'row',
- justifyContent: 'center',
- zIndex: 9999,
- },
- headerPlaceholder: {
- width: SCREEN_WIDTH * 0.5,
+ right: 20,
},
shareButtonTitle: {
fontWeight: 'bold',
diff --git a/src/screens/suggestedPeople/index.ts b/src/screens/suggestedPeople/index.ts
index 8c06d81e..be2393b5 100644
--- a/src/screens/suggestedPeople/index.ts
+++ b/src/screens/suggestedPeople/index.ts
@@ -1,2 +1,3 @@
export {default as SuggestedPeopleScreen} from './SuggestedPeopleScreen';
export {default as AnimatedTutorial} from './AnimatedTutorial';
+export {default as MutualBadgeHolders} from './MutualBadgeHolders';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 02:44:04 +0000