aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/moments/TagFriendsScreen.tsx58
-rw-r--r--src/screens/profile/CaptionScreen.tsx8
-rw-r--r--src/screens/profile/IndividualMoment.tsx88
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx5
4 files changed, 86 insertions, 73 deletions
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index bda38651..db7456bc 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,32 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
});
};
+ /*
+ * Calculating image width and height with respect to it's enclosing view's dimensions
+ */
+ useEffect(() => {
+ if (imageRef && imageRef.current) {
+ Image.getSize(
+ media.uri,
+ (w, h) => {
+ const imageAspectRatio = w / h;
+
+ // aspectRatio: >= 1 [Landscape] [1:1]
+ if (imageAspectRatio >= 1) {
+ setImageWidth(SCREEN_WIDTH);
+ setImageHeight(SCREEN_WIDTH / imageAspectRatio);
+ }
+ // aspectRatio: < 1 [Portrait]
+ else if (imageAspectRatio < 1) {
+ setImageHeight(SCREEN_WIDTH);
+ setImageWidth(SCREEN_WIDTH * imageAspectRatio);
+ }
+ },
+ (err) => console.log(err),
+ );
+ }
+ }, []);
+
return (
<SearchBackground>
<View style={styles.contentContainer}>
@@ -80,11 +108,24 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
/>
</View>
) : (
+ // <Image
+ // ref={imageRef}
+ // style={styles.media}
+ // source={{uri: media.uri}}
+ // resizeMode={'cover'}
+ // />
<Image
ref={imageRef}
- style={styles.media}
+ style={[
+ {
+ width: imageWidth,
+ height: imageHeight,
+ marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
+ marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
+ },
+ styles.media,
+ ]}
source={{uri: media.uri}}
- resizeMode={'cover'}
/>
)}
</TouchableWithoutFeedback>
@@ -127,11 +168,16 @@ const styles = StyleSheet.create({
header: {
marginVertical: 20,
},
+ // media: {
+ // position: 'relative',
+ // width: SCREEN_WIDTH,
+ // aspectRatio: 1,
+ // marginBottom: '3%',
+ // },
media: {
- position: 'relative',
- width: SCREEN_WIDTH,
- aspectRatio: 1,
- marginBottom: '3%',
+ zIndex: 0,
+ justifyContent: 'center',
+ alignSelf: 'center',
},
text: {
position: 'relative',
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..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;
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-11-23 10:11:36 +0000