aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/moments/TagFriendsScreen.tsx83
-rw-r--r--src/screens/profile/CaptionScreen.tsx8
-rw-r--r--src/screens/profile/IndividualMoment.tsx118
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx5
4 files changed, 110 insertions, 104 deletions
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index bda38651..201caf49 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -27,6 +27,8 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
const navigation = useNavigation();
const imageRef = useRef(null);
const [tags, setTags] = useState<MomentTagType[]>([]);
+ const [imageWidth, setImageWidth] = useState<number>(0);
+ const [imageHeight, setImageHeight] = useState<number>(0);
/*
* Update list of tagged users from route params
@@ -45,6 +47,36 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
});
};
+ const setMediaDimensions = (width: number, height: number) => {
+ const imageAspectRatio = width / height;
+
+ // aspectRatio: >= 1 [Landscape] [1:1]
+ if (imageAspectRatio >= 1) {
+ setImageWidth(SCREEN_WIDTH);
+ setImageHeight(SCREEN_WIDTH / imageAspectRatio);
+ }
+ // aspectRatio: < 1 [Portrait]
+ if (imageAspectRatio < 1) {
+ setImageHeight(SCREEN_WIDTH);
+ setImageWidth(SCREEN_WIDTH * imageAspectRatio);
+ }
+ };
+
+ /*
+ * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images.
+ */
+ useEffect(() => {
+ if (imageRef && imageRef.current && !media.isVideo) {
+ Image.getSize(
+ media.uri,
+ (w, h) => {
+ setMediaDimensions(w, h);
+ },
+ (err) => console.log(err),
+ );
+ }
+ }, []);
+
return (
<SearchBackground>
<View style={styles.contentContainer}>
@@ -72,19 +104,42 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
})
}>
{media.isVideo ? (
- <View style={styles.media} ref={imageRef}>
+ <View
+ style={{
+ width: imageWidth,
+ height: imageHeight,
+ marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
+ marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
+ }}
+ ref={imageRef}>
<Video
- style={styles.media}
+ style={{
+ width: imageWidth,
+ height: imageHeight,
+ }}
source={{uri: media.uri}}
repeat={true}
+ onLoad={(response) => {
+ const {width, height, orientation} = response.naturalSize;
+ // portrait will flip width and height
+ if (orientation === 'portrait') {
+ setMediaDimensions(height, width);
+ } else {
+ setMediaDimensions(width, height);
+ }
+ }}
/>
</View>
) : (
<Image
ref={imageRef}
- style={styles.media}
+ style={{
+ width: imageWidth,
+ height: imageHeight,
+ marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
+ marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
+ }}
source={{uri: media.uri}}
- resizeMode={'cover'}
/>
)}
</TouchableWithoutFeedback>
@@ -127,24 +182,10 @@ const styles = StyleSheet.create({
header: {
marginVertical: 20,
},
- media: {
- position: 'relative',
- width: SCREEN_WIDTH,
- aspectRatio: 1,
- marginBottom: '3%',
- },
- text: {
- position: 'relative',
- backgroundColor: 'white',
- width: '100%',
- paddingHorizontal: '2%',
- paddingVertical: '1%',
- height: 60,
- },
- flex: {
- flex: 1,
+ footerContainer: {
+ marginHorizontal: '5%',
+ marginTop: '3%',
},
- footerContainer: {marginHorizontal: '5%', marginTop: '3%'},
});
export default TagFriendsScreen;
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index d53570cb..364b81a3 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -13,7 +13,7 @@ import {
TouchableWithoutFeedback,
View,
} from 'react-native';
-import {MentionInput} from 'react-native-controlled-mentions';
+import {MentionInputControlled} from '../../components';
import {Button, normalize} from 'react-native-elements';
import Video from 'react-native-video';
import {useDispatch, useSelector} from 'react-redux';
@@ -237,16 +237,16 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
<Image
style={styles.media}
source={{uri: mediaUri}}
- resizeMode={'cover'}
+ resizeMode={'contain'}
/>
)}
- <MentionInput
+ <MentionInputControlled
containerStyle={styles.text}
placeholder="Write something....."
placeholderTextColor="gray"
value={caption}
onChange={setCaption}
- partTypes={mentionPartTypes('blue')}
+ partTypes={mentionPartTypes('blue', 'caption')}
/>
<TouchableOpacity
onPress={() =>
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index f8113aba..a322b1e9 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,28 +1,16 @@
-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, ViewToken} from 'react-native';
import {useSelector} from 'react-redux';
-import {IndividualMomentTitleBar, MomentPost} from '../../components';
-import {AVATAR_DIM} from '../../constants';
+import {MomentPost, TabsGradient} from '../../components';
import {MainStackParams} from '../../routes';
import {RootState} from '../../store/rootreducer';
import {MomentPostType} from '../../types';
-import {
- isIPhoneX,
- normalize,
- SCREEN_HEIGHT,
- StatusBarHeight,
-} from '../../utils';
-
-/**
- * Individual moment view opened when user clicks on a moment tile
- */
type MomentContextType = {
keyboardVisible: boolean;
- scrollTo: (index: number) => void;
+ currentVisibleMomentId: string | undefined;
};
export const MomentContext = React.createContext({} as MomentContextType);
@@ -39,10 +27,7 @@ interface IndividualMomentProps {
navigation: IndividualMomentNavigationProp;
}
-const IndividualMoment: React.FC<IndividualMomentProps> = ({
- route,
- navigation,
-}) => {
+const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
const {
userXId,
screenType,
@@ -57,6 +42,18 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
);
const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
const [keyboardVisible, setKeyboardVisible] = useState(false);
+ const [currentVisibleMomentId, setCurrentVisibleMomentId] = useState<
+ string | undefined
+ >();
+ // https://stackoverflow.com/a/57502343
+ const viewabilityConfigCallback = useRef(
+ (info: {viewableItems: ViewToken[]; changed: ViewToken[]}) => {
+ const index = info.viewableItems[0].index;
+ if (index !== null) {
+ setCurrentVisibleMomentId(momentData[index].moment_id);
+ }
+ },
+ );
useEffect(() => {
const showKeyboard = () => setKeyboardVisible(true);
@@ -69,70 +66,39 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
};
}, []);
- const scrollTo = (index: number) => {
- // TODO: make this dynamic
- const offset = isIPhoneX() ? -(AVATAR_DIM + 100) : -(AVATAR_DIM + 160);
- scrollRef.current?.scrollToIndex({
- index: index,
- viewOffset: offset,
- });
- };
-
return (
<MomentContext.Provider
value={{
keyboardVisible,
- scrollTo,
+ currentVisibleMomentId,
}}>
- <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}
+ onViewableItemsChanged={viewabilityConfigCallback.current}
+ 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;
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 7dfe8ae9..402e5f44 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -48,9 +48,8 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
React.useState(true);
//Keeps track of the current comments object in focus so that the application knows which comment to post a reply to
- const [commentTapped, setCommentTapped] = useState<
- CommentType | CommentThreadType | undefined
- >();
+ const [commentTapped, setCommentTapped] =
+ useState<CommentType | CommentThreadType | undefined>();
useEffect(() => {
navigation.setOptions({
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-29 07:20:35 +0000