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 +++++++++-------- 3 files changed, 93 insertions(+), 74 deletions(-) (limited to 'src/routes') 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 = () => { }, }} /> - -- cgit v1.2.3-70-g09d2 From 3e5444b37bb8dccc7405cc9aa83da64181fd4746 Mon Sep 17 00:00:00 2001 From: Michael Date: Fri, 2 Jul 2021 11:22:51 -0400 Subject: Merge master with this brach. --- src/routes/main/MainStackNavigator.tsx | 4 ++ src/routes/main/MainStackScreen.tsx | 103 +++++++++++++++++++-------------- src/routes/tabs/NavigationBar.tsx | 54 +++++++++-------- src/screens/profile/CaptionScreen.tsx | 4 +- src/types/types.ts | 29 +++++----- 5 files changed, 108 insertions(+), 86 deletions(-) (limited to 'src/routes') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index a5d73988..f12072e6 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -14,8 +14,12 @@ 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 43760b60..2e1f5251 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} @@ -389,10 +406,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], @@ -410,7 +427,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 05db8ed7..28e8808f 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -210,7 +210,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() } />