From 5d4eef46f1db16914cc3caa71072677050697bd7 Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Tue, 29 Jun 2021 19:28:09 -0400 Subject: Removed the search icon from the navigation bar and replaced it with the upload icon (along with the corresponding routing). Small tweaks on navigation and design will be needed. Commented out the code for navigation to search page - should be deleted soon. --- src/routes/main/MainStackNavigator.tsx | 10 +++- src/routes/main/MainStackScreen.tsx | 103 +++++++++++++++++++-------------- src/routes/tabs/NavigationBar.tsx | 54 +++++++++-------- src/screens/profile/CaptionScreen.tsx | 50 ++++++++-------- src/types/types.ts | 29 +++++----- 5 files changed, 134 insertions(+), 112 deletions(-) (limited to 'src') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index ef3fc7fd..ed3863b3 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -1,8 +1,8 @@ /** * Note the name userXId here, it refers to the id of the user being visited */ -import {createStackNavigator} from '@react-navigation/stack'; -import {Image} from 'react-native-image-crop-picker'; +import { createStackNavigator } from '@react-navigation/stack'; +import { Image } from 'react-native-image-crop-picker'; import { CommentBaseType, MomentTagType, @@ -15,9 +15,13 @@ export type MainStackParams = { SuggestedPeople: { screenType: ScreenType; }; + /* Search: { screenType: ScreenType; - }; + }; */ + Upload: { + screenType: ScreenType; + } RequestContactsAccess: { screenType: ScreenType; }; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index f6adeab1..e1ad8aa9 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -1,8 +1,8 @@ -import {RouteProp} from '@react-navigation/native'; -import {StackNavigationOptions} from '@react-navigation/stack'; +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 { StyleSheet, Text } from 'react-native'; +import { normalize } from 'react-native-elements'; import BackIcon from '../../assets/icons/back-arrow.svg'; import { AccountType, @@ -26,7 +26,7 @@ import { PrivacyScreen, ProfileScreen, RequestContactsAccess, - SearchScreen, + // SearchScreen, SettingsScreen, SocialMediaTaggs, SuggestedPeopleScreen, @@ -37,10 +37,10 @@ import { CameraScreen, } from '../../screens'; import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; -import {ScreenType} from '../../types'; -import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils'; -import {MainStack, MainStackParams} from './MainStackNavigator'; -import {ZoomInCropper} from '../../components/comments/ZoomInCropper'; +import { ScreenType } from '../../types'; +import { AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH } from '../../utils'; +import { MainStack, MainStackParams } from './MainStackNavigator'; +import { ZoomInCropper } from '../../components/comments/ZoomInCropper'; /** * 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. @@ -57,33 +57,37 @@ type MainStackRouteProps = RouteProp; interface MainStackProps { route: MainStackRouteProps; } -const MainStackScreen: React.FC = ({route}) => { - const {screenType} = route.params; +const MainStackScreen: React.FC = ({ route }) => { + const { screenType } = route.params; - const isSearchTab = screenType === ScreenType.Search; + // const isSearchTab = screenType === ScreenType.Search; const isNotificationsTab = screenType === ScreenType.Notifications; const isSuggestedPeopleTab = screenType === ScreenType.SuggestedPeople; + const isUploadTab = screenType === ScreenType.Upload; const initialRouteName = (() => { switch (screenType) { case ScreenType.Profile: return 'Profile'; + /* case ScreenType.Search: - return 'Search'; + return 'Search'; */ case ScreenType.Notifications: return 'Notifications'; case ScreenType.SuggestedPeople: return 'SuggestedPeople'; case ScreenType.Chat: return 'ChatList'; + case ScreenType.Upload: + return 'Upload'; } })(); const tutorialModalStyle: StackNavigationOptions = { - cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'}, + cardStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' }, gestureDirection: 'vertical', cardOverlayEnabled: true, - cardStyleInterpolator: ({current: {progress}}) => ({ + cardStyleInterpolator: ({ current: { progress } }) => ({ cardStyle: { opacity: progress.interpolate({ inputRange: [0, 0.5, 0.9, 1], @@ -94,24 +98,37 @@ const MainStackScreen: React.FC = ({route}) => { }; const newChatModalStyle: StackNavigationOptions = { - cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'}, + cardStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' }, cardOverlayEnabled: true, animationEnabled: false, }; + /* + Following was removed to eliminate search screen naviagtion + + {isSearchTab && ( + + )} + + */ + const mainStackScreen = () => { return ( = ({route}) => { )} {isNotificationsTab && ( )} - {isSearchTab && ( + {isUploadTab && ( )} = ({route}) => { options={{ ...tutorialModalStyle, }} - initialParams={{screenType}} + initialParams={{ screenType }} /> = ({route}) => { = ({route}) => { = ({route}) => { = ({route}) => { = ({route}) => { = ({route}) => { = ({route}) => { = ({route}) => { = ({route}) => { = ({route}) => { 18 ? normalize(14) : normalize(16)}, + { color: color }, + { fontSize: title.length > 18 ? normalize(14) : normalize(16) }, ]}> {title} @@ -380,10 +397,10 @@ export const headerBarOptions: ( }); export const modalStyle: StackNavigationOptions = { - cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'}, + cardStyle: { backgroundColor: 'rgba(80,80,80,0.6)' }, gestureDirection: 'vertical', cardOverlayEnabled: true, - cardStyleInterpolator: ({current: {progress}}) => ({ + cardStyleInterpolator: ({ current: { progress } }) => ({ cardStyle: { opacity: progress.interpolate({ inputRange: [0, 0.5, 0.9, 1], @@ -401,7 +418,7 @@ const styles = StyleSheet.create({ shadowColor: 'black', shadowRadius: 3, shadowOpacity: 0.7, - shadowOffset: {width: 0, height: 0}, + shadowOffset: { width: 0, height: 0 }, }, headerTitle: { letterSpacing: normalize(1.3), diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index c3a42739..f8b94470 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -1,23 +1,23 @@ -import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; -import React, {Fragment, useEffect, useState} from 'react'; -import {useSelector} from 'react-redux'; -import {NavigationIcon} from '../../components'; -import {NO_NOTIFICATIONS} from '../../store/initialStates'; -import {RootState} from '../../store/rootReducer'; -import {setNotificationsReadDate} from '../../services'; -import {ScreenType} from '../../types'; -import {haveUnreadNotifications} from '../../utils'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import React, { Fragment, useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; +import { NavigationIcon } from '../../components'; +import { NO_NOTIFICATIONS } from '../../store/initialStates'; +import { RootState } from '../../store/rootReducer'; +import { setNotificationsReadDate } from '../../services'; +import { ScreenType } from '../../types'; +import { haveUnreadNotifications } from '../../utils'; import MainStackScreen from '../main/MainStackScreen'; -import {NotificationPill} from '../../components/notifications'; +import { NotificationPill } from '../../components/notifications'; const Tabs = createBottomTabNavigator(); const NavigationBar: React.FC = () => { - const {isOnboardedUser, newNotificationReceived} = useSelector( + const { isOnboardedUser, newNotificationReceived } = useSelector( (state: RootState) => state.user, ); - const {notifications: {notifications} = NO_NOTIFICATIONS} = useSelector( + const { notifications: { notifications } = NO_NOTIFICATIONS } = useSelector( (state: RootState) => state, ); // Triggered if user clicks on Notifications page to close the pill @@ -41,13 +41,13 @@ const NavigationBar: React.FC = () => { <> ({ - tabBarIcon: ({focused}) => { + screenOptions={({ route }) => ({ + tabBarIcon: ({ focused }) => { switch (route.name) { case 'Home': return ; - case 'Search': - return ; + case 'Chat': + return ; case 'Upload': return ; case 'Notifications': @@ -60,8 +60,6 @@ const NavigationBar: React.FC = () => { disabled={!focused} /> ); - case 'Chat': - return ; case 'Profile': return ; case 'SuggestedPeople': @@ -88,17 +86,22 @@ const NavigationBar: React.FC = () => { + { // Closes the pill once this screen has been opened @@ -108,15 +111,10 @@ const NavigationBar: React.FC = () => { }, }} /> - diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 75533a9b..e18679dc 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -1,6 +1,6 @@ -import {RouteProp} from '@react-navigation/native'; -import {StackNavigationProp} from '@react-navigation/stack'; -import React, {Fragment, useEffect, useState} from 'react'; +import { RouteProp } from '@react-navigation/native'; +import { StackNavigationProp } from '@react-navigation/stack'; +import React, { Fragment, useEffect, useState } from 'react'; import { Alert, Image, @@ -13,29 +13,29 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import {MentionInputControlled} from '../../components'; -import {Button, normalize} from 'react-native-elements'; -import {useDispatch, useSelector} from 'react-redux'; +import { MentionInputControlled } from '../../components'; +import { Button, normalize } from 'react-native-elements'; +import { useDispatch, useSelector } from 'react-redux'; import FrontArrow from '../../assets/icons/front-arrow.svg'; -import {SearchBackground} from '../../components'; -import {CaptionScreenHeader} from '../../components/'; +import { SearchBackground } from '../../components'; +import { CaptionScreenHeader } from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; -import {TAGG_LIGHT_BLUE_2} from '../../constants'; +import { TAGG_LIGHT_BLUE_2 } from '../../constants'; import { ERROR_SOMETHING_WENT_WRONG_REFRESH, ERROR_UPLOAD, SUCCESS_PIC_UPLOAD, } from '../../constants/strings'; -import {MainStackParams} from '../../routes'; -import {patchMoment, postMoment, postMomentTags} from '../../services'; +import { MainStackParams } from '../../routes'; +import { patchMoment, postMoment, postMomentTags } from '../../services'; import { loadUserMoments, updateProfileCompletionStage, } from '../../store/actions'; -import {RootState} from '../../store/rootReducer'; -import {MomentTagType} from '../../types'; -import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; -import {mentionPartTypes} from '../../utils/comments'; +import { RootState } from '../../store/rootReducer'; +import { MomentTagType } from '../../types'; +import { SCREEN_WIDTH, StatusBarHeight } from '../../utils'; +import { mentionPartTypes } from '../../utils/comments'; /** * Upload Screen to allow users to upload posts to Tagg @@ -50,10 +50,10 @@ interface CaptionScreenProps { navigation: CaptionScreenNavigationProp; } -const CaptionScreen: React.FC = ({route, navigation}) => { - const {title, image, screenType, selectedTags, moment} = route.params; +const CaptionScreen: React.FC = ({ route, navigation }) => { + const { title, image, screenType, selectedTags, moment } = route.params; const { - user: {userId}, + user: { userId }, } = useSelector((state: RootState) => state.user); const dispatch = useDispatch(); const [caption, setCaption] = useState(moment ? moment.caption : ''); @@ -179,7 +179,9 @@ const CaptionScreen: React.FC = ({route, navigation}) => { title="Cancel" buttonStyle={styles.button} onPress={() => - moment ? navigation.goBack() : navigateToProfile() + // There is issue here with navigations on the commented code below + // moment ? navigation.goBack() : navigateToProfile() + navigation.goBack() } />