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') 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() } />