aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/common/AvatarTitle.tsx45
-rw-r--r--src/components/profile/FollowUnfollow.tsx2
-rw-r--r--src/components/profile/ProfileHeader.tsx12
-rw-r--r--src/components/profile/ProfilePreview.tsx2
-rw-r--r--src/constants/regex.ts4
-rw-r--r--src/routes/onboarding/OnboardingStack.tsx7
-rw-r--r--src/routes/profile/ProfileStack.tsx2
-rw-r--r--src/routes/tabs/NavigationBar.tsx2
-rw-r--r--src/screens/onboarding/Checkpoint.tsx3
-rw-r--r--src/screens/onboarding/RegistrationTwo.tsx2
-rw-r--r--src/screens/profile/SocialMediaTaggs.tsx11
-rw-r--r--src/screens/profile/index.ts2
-rw-r--r--src/services/MomentServices.ts2
-rw-r--r--src/types/types.ts10
-rw-r--r--src/utils/statusBarHeight.ts17
15 files changed, 71 insertions, 52 deletions
diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx
index e9998113..f3105f70 100644
--- a/src/components/common/AvatarTitle.tsx
+++ b/src/components/common/AvatarTitle.tsx
@@ -1,27 +1,26 @@
import React from 'react';
-import {Image, StyleSheet} from 'react-native';
+import {Image, StyleSheet, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
-import {AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT} from '../../constants';
+import {TAGGS_GRADIENT} from '../../constants';
import {AuthContext, ProfileContext} from '../../routes/';
-/**
- * An image component that returns the <Image> of the icon for a specific social media platform.
- */
-
type AvatarTitleProps = {
isProfileView: boolean;
};
+
const AvatarTitle: React.FC<AvatarTitleProps> = ({isProfileView}) => {
const {avatar} = isProfileView
? React.useContext(ProfileContext)
: React.useContext(AuthContext);
return (
- <LinearGradient
- colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
- useAngle={true}
- angle={154.72}
- angleCenter={{x: 0.5, y: 0.5}}
- style={[styles.gradient]}>
+ <View style={[styles.container]}>
+ <LinearGradient
+ colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
+ useAngle={true}
+ angle={154.72}
+ angleCenter={{x: 0.5, y: 0.5}}
+ style={styles.gradient}
+ />
<Image
style={styles.avatar}
source={
@@ -30,22 +29,30 @@ const AvatarTitle: React.FC<AvatarTitleProps> = ({isProfileView}) => {
: require('../../assets/images/avatar-placeholder.png')
}
/>
- </LinearGradient>
+ </View>
);
};
const styles = StyleSheet.create({
+ container: {
+ width: '100%',
+ height: '100%',
+ aspectRatio: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
gradient: {
- width: AVATAR_GRADIENT_DIM,
- height: AVATAR_GRADIENT_DIM,
- borderRadius: AVATAR_GRADIENT_DIM / 2,
+ width: '82%',
+ height: '82%',
+ borderRadius: 1000,
justifyContent: 'center',
alignItems: 'center',
},
avatar: {
- width: AVATAR_DIM,
- height: AVATAR_DIM,
- borderRadius: AVATAR_DIM / 2,
+ position: 'absolute',
+ width: '73%',
+ height: '73%',
+ borderRadius: 1000,
},
});
diff --git a/src/components/profile/FollowUnfollow.tsx b/src/components/profile/FollowUnfollow.tsx
index bb1e9ef7..fa224be3 100644
--- a/src/components/profile/FollowUnfollow.tsx
+++ b/src/components/profile/FollowUnfollow.tsx
@@ -15,7 +15,7 @@ const FollowUnfollow: React.FC<FollowUnfollowProps> = ({
<TouchableOpacity
style={styles.button}
onPress={() => handleFollowUnfollow()}>
- <Text style={styles.text}>{!followed ? `Follow` : `Unfollow`}</Text>
+ <Text style={styles.text}>{!followed ? 'Follow' : 'Unfollow'}</Text>
</TouchableOpacity>
);
};
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index f3ef5dfa..0b56a787 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -5,15 +5,19 @@ import FollowCount from './FollowCount';
import {View, Text, StyleSheet} from 'react-native';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {AuthContext, ProfileContext} from '../../routes/';
-import { ProfilePreviewType } from 'src/types';
+import {ProfilePreviewType} from 'src/types';
type ProfileHeaderProps = {
- isProfileView: boolean,
- numFollowing: number,
+ isProfileView: boolean;
+ numFollowing: number;
numFollowers: number;
};
-const ProfileHeader: React.FC<ProfileHeaderProps> = ({isProfileView, numFollowing, numFollowers}) => {
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({
+ isProfileView,
+ numFollowing,
+ numFollowers,
+}) => {
const {
profile: {name},
} = isProfileView
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 6848f993..7bbc3fb6 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -149,7 +149,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
};
//With @ sign if on search screen.
- const usernameToDisplay = !isComment ? `@` + username : username;
+ const usernameToDisplay = !isComment ? '@' + username : username;
const usernameStyle = isComment
? styles.commentUsername
: styles.searchUsername;
diff --git a/src/constants/regex.ts b/src/constants/regex.ts
index ac38a3b7..01fd9a2d 100644
--- a/src/constants/regex.ts
+++ b/src/constants/regex.ts
@@ -51,8 +51,8 @@ export const genderRegex: RegExp = /^$|^[A-Za-z\- ]{2,20}$/;
/**
* The phone regex has the following constraints
- * - must be 10 digits
+ * - must be 10 digits
* - accepts 012-345-6789
- *
+ *
*/
export const phoneRegex: RegExp = /([0-9]{10})/;
diff --git a/src/routes/onboarding/OnboardingStack.tsx b/src/routes/onboarding/OnboardingStack.tsx
index 6bc1ed9d..d40e0728 100644
--- a/src/routes/onboarding/OnboardingStack.tsx
+++ b/src/routes/onboarding/OnboardingStack.tsx
@@ -6,7 +6,12 @@ export type OnboardingStackParams = {
InvitationCodeVerification: undefined;
RegistrationOne: undefined;
RegistrationTwo: {phone: string};
- RegistrationThree: {firstName: string; lastName: string; phone: string; email: string};
+ RegistrationThree: {
+ firstName: string;
+ lastName: string;
+ phone: string;
+ email: string;
+ };
Checkpoint: {username: string; userId: string};
Verification: {phone: string};
ProfileOnboarding: {username: string; userId: string};
diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx
index d85f003e..b535d90d 100644
--- a/src/routes/profile/ProfileStack.tsx
+++ b/src/routes/profile/ProfileStack.tsx
@@ -27,7 +27,7 @@ export type ProfileStackParams = {
isProfileView: boolean;
};
FollowersListScreen: {
- isProfileView: boolean,
+ isProfileView: boolean;
isFollowers: boolean;
};
};
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index e0341c40..21a1f7d2 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -53,7 +53,7 @@ const NavigationBar: React.FC = () => {
borderTopWidth: 0,
left: 0,
right: 0,
- bottom: 0,
+ bottom: '1%',
},
}}>
<Tabs.Screen name="Home" component={Home} />
diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/Checkpoint.tsx
index 8e53996f..0be1e831 100644
--- a/src/screens/onboarding/Checkpoint.tsx
+++ b/src/screens/onboarding/Checkpoint.tsx
@@ -48,7 +48,7 @@ const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
<Background style={styles.container}>
<StatusBar barStyle="light-content" />
<RegistrationWizard style={styles.wizard} step="six" />
- <View style={styles.textContainer}>
+ <View style={styles.textContainer}>
<Text style={styles.header}>You are registered!</Text>
<Text style={styles.subtext}>
We're almost there. Would you like to setup your profile now?
@@ -64,7 +64,6 @@ const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
</TouchableOpacity>
</View>
</View>
-
</Background>
);
};
diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/RegistrationTwo.tsx
index 3249a281..edefebaf 100644
--- a/src/screens/onboarding/RegistrationTwo.tsx
+++ b/src/screens/onboarding/RegistrationTwo.tsx
@@ -106,7 +106,7 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
});
};
- /*
+ /*
* Handles changes to the email field value and verifies the input by updating state and running a validation function.
*/
const handleEmailUpdate = (email: string) => {
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 34ad7f48..a0321341 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -1,4 +1,5 @@
import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
import React, {useEffect} from 'react';
import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
@@ -12,8 +13,7 @@ import {
import {AVATAR_GRADIENT} from '../../constants';
import {AuthContext, ProfileContext, ProfileStackParams} from '../../routes';
import {SimplePostType, TwitterPostType} from '../../types';
-import {headerBarHeightWithImage, SCREEN_HEIGHT} from '../../utils';
-import {StackNavigationProp} from '@react-navigation/stack';
+import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils';
type SocialMediaTaggsRouteProp = RouteProp<
ProfileStackParams,
@@ -42,7 +42,7 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
profile: {name},
socialAccounts,
} = context;
- const headerHeight = headerBarHeightWithImage();
+
let accountData = socialAccounts[socialMediaType];
/**
@@ -54,8 +54,9 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
headerTitle: () => {
return <AvatarTitle isProfileView={isProfileView} />;
},
+ headerStyle: {height: AvatarHeaderHeight},
});
- }, []);
+ }, [isProfileView, navigation]);
return (
<LinearGradient
@@ -67,7 +68,7 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
{/* Cropping the scroll view to mimic the presence of a header while preserving the gradient background */}
<View
// we want a slightly bigger header here for the avatar image
- style={[styles.flex, {paddingTop: headerHeight}]}>
+ style={[styles.flex, {marginTop: AvatarHeaderHeight}]}>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}>
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index a9f3511c..c2bd4c4b 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -3,4 +3,4 @@ export {default as SocialMediaTaggs} from './SocialMediaTaggs';
export {default as CaptionScreen} from './CaptionScreen';
export {default as IndividualMoment} from './IndividualMoment';
export {default as MomentCommentsScreen} from './MomentCommentsScreen';
-export {default as FollowersListScreen} from './FollowersListScreen'; \ No newline at end of file
+export {default as FollowersListScreen} from './FollowersListScreen';
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 60f516ce..bf846b1c 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -81,7 +81,7 @@ export const getMomentCommentsCount = async (
const status = response.status;
if (status === 200) {
const response_data = await response.json();
- callback(response_data['count']);
+ callback(response_data.count);
} else {
console.log(
'Something went wrong! 😭',
diff --git a/src/types/types.ts b/src/types/types.ts
index 97c8ef64..8b55e113 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -77,9 +77,9 @@ export interface MomentType {
}
export interface CommentType {
- comment_id: string,
- comment: string,
- date_time: string,
- commenter__id: string,
- commenter__username: string
+ comment_id: string;
+ comment: string;
+ date_time: string;
+ commenter__id: string;
+ commenter__username: string;
}
diff --git a/src/utils/statusBarHeight.ts b/src/utils/statusBarHeight.ts
index dd4a67ac..b8eb7b33 100644
--- a/src/utils/statusBarHeight.ts
+++ b/src/utils/statusBarHeight.ts
@@ -1,25 +1,28 @@
-import {useHeaderHeight} from '@react-navigation/stack';
import {Platform, StatusBar} from 'react-native';
-import {AVATAR_DIM} from '../constants';
-import {SCREEN_WIDTH, SCREEN_HEIGHT} from './screenDimensions';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from './screenDimensions';
const X_WIDTH = 375;
const X_HEIGHT = 812;
const XSMAX_WIDTH = 414;
const XSMAX_HEIGHT = 896;
-const isIPhoneX = () =>
+export const isIPhoneX = () =>
Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS
? (SCREEN_WIDTH === X_WIDTH && SCREEN_HEIGHT === X_HEIGHT) ||
(SCREEN_WIDTH === XSMAX_WIDTH && SCREEN_HEIGHT === XSMAX_HEIGHT)
: false;
+// Taken from: https://github.com/react-navigation/react-navigation/issues/283
+export const HeaderHeight = Platform.select({
+ ios: 44,
+ android: 56,
+ default: 64,
+});
+
export const StatusBarHeight = Platform.select({
ios: isIPhoneX() ? 44 : 20,
android: StatusBar.currentHeight,
default: 0,
});
-export const headerBarHeightWithImage = () => {
- return Math.max(useHeaderHeight() + 14, AVATAR_DIM + StatusBarHeight + 14);
-};
+export const AvatarHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.3;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 13:08:37 +0000