From ad98ad617d78c7b68ffc37327f21a8769fcaab57 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 14:49:58 -0400 Subject: Fix styling, Cleanup imports --- src/routes/main/MainStackScreen.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) (limited to 'src/routes/main/MainStackScreen.tsx') diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 064e9725..ccfc4cbd 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. @@ -413,6 +417,7 @@ const styles = StyleSheet.create({ shadowOffset: {width: 0, height: 0}, }, headerTitle: { + textAlign: 'center', letterSpacing: normalize(1.3), fontWeight: '700', }, -- cgit v1.2.3-70-g09d2 From 4cd0910e9b20b10b0a5ef46945b139e711eec252 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 14:02:59 -0400 Subject: Fix header styling --- src/components/moments/MomentPost.tsx | 36 +++++++++++++++++++++++++++++++++-- src/routes/main/MainStackScreen.tsx | 3 +++ 2 files changed, 37 insertions(+), 2 deletions(-) (limited to 'src/routes/main/MainStackScreen.tsx') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 123ee5f4..ecd2e66f 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -34,6 +34,7 @@ import {RootState} from '../../store/rootReducer'; import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types'; import { getTimePosted, + isIPhoneX, navigateToProfile, normalize, SCREEN_HEIGHT, @@ -133,7 +134,22 @@ const MomentPost: React.FC = ({ useEffect( () => navigation.setOptions({ - ...headerBarOptions('white', moment.moment_category), + ...headerBarOptions('white', ''), + headerTitle: () => ( + 18 + ? normalize(14) + : normalize(16), + }, + ]}> + {moment.moment_category} + + ), }), [moment.moment_id], ); @@ -499,7 +515,23 @@ const styles = StyleSheet.create({ position: 'absolute', top: -2.5, }, - profilePreviewContainer: {paddingHorizontal: '3%'}, + progressBaContainer: { + position: 'absolute', + top: isIPhoneX() ? 75 : 70, + }, + profilePreviewContainer: { + paddingHorizontal: '3%', + }, + 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', + }, }); export default MomentPost; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index ccfc4cbd..35e1f8e0 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -382,6 +382,7 @@ export const headerBarOptions: ( ), headerTitle: () => ( Date: Thu, 29 Jul 2021 14:27:45 -0400 Subject: Cleaned up logic, Add logic to check if long title --- src/components/moments/MomentPost.tsx | 42 +++++++++-------------------------- src/routes/main/MainStackScreen.tsx | 27 ++++++++++++++++++++++ 2 files changed, 38 insertions(+), 31 deletions(-) (limited to 'src/routes/main/MainStackScreen.tsx') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index eae95fe2..d95d6f3a 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -25,7 +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 {headerBarOptions} from '../../routes'; +import {headerBarOptions, multilineHeaderTitle} from '../../routes'; import {MomentContext} from '../../screens/profile/IndividualMoment'; import {deleteMomentTag, loadMomentTags} from '../../services'; import {loadUserMoments} from '../../store/actions'; @@ -129,28 +129,18 @@ const MomentPost: React.FC = ({ } }; - useEffect( - () => + useEffect(() => { + if (moment.moment_category.length > 20) { navigation.setOptions({ ...headerBarOptions('white', ''), - headerTitle: () => ( - 18 - ? normalize(14) - : normalize(16), - }, - ]}> - {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 @@ -506,16 +496,6 @@ const styles = StyleSheet.create({ profilePreviewContainer: { paddingHorizontal: '3%', }, - 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', - }, }); export default MomentPost; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 35e1f8e0..64060554 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -393,6 +393,23 @@ export const headerBarOptions: ( ), }); +export const multilineHeaderTitle: (title: string) => StackNavigationOptions = ( + title, +) => ({ + headerTitle: () => ( + 18 ? normalize(14) : normalize(16), + }, + ]}> + {title} + + ), +}); + export const modalStyle: StackNavigationOptions = { cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'}, gestureDirection: 'vertical', @@ -424,6 +441,16 @@ const styles = StyleSheet.create({ 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', + }, }); export default MainStackScreen; -- cgit v1.2.3-70-g09d2