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/MainStackScreen.tsx | 103 +++++++++++++++++++++--------------- 1 file changed, 60 insertions(+), 43 deletions(-) (limited to 'src/routes/main/MainStackScreen.tsx') 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), -- cgit v1.2.3-70-g09d2 From 69189c84bdb69c187e92eca5b9e6b4d00b62f4fa Mon Sep 17 00:00:00 2001 From: Michael Date: Fri, 2 Jul 2021 11:58:09 -0400 Subject: Add new upload button in the middle on the nav bar and shifting the older icons to new positions. Follow Blessing's design by enlargining it and making the other icons a bit smaller. Also, add the navigation that goes to the camera screen from the upload icon. Ending the rebase from master. --- src/assets/navigationIcons/new-upload.png | Bin 0 -> 454951 bytes src/components/common/NavigationIcon.tsx | 19 +++++-- src/routes/main/MainStackScreen.tsx | 81 ++++++++++++++---------------- src/routes/tabs/NavigationBar.tsx | 46 +++++++++-------- src/types/types.ts | 30 +++++------ 5 files changed, 93 insertions(+), 83 deletions(-) create mode 100644 src/assets/navigationIcons/new-upload.png (limited to 'src/routes/main/MainStackScreen.tsx') diff --git a/src/assets/navigationIcons/new-upload.png b/src/assets/navigationIcons/new-upload.png new file mode 100644 index 00000000..f6a5487c Binary files /dev/null and b/src/assets/navigationIcons/new-upload.png differ diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx index 5128f3da..f97bb861 100644 --- a/src/components/common/NavigationIcon.tsx +++ b/src/components/common/NavigationIcon.tsx @@ -18,6 +18,7 @@ interface NavigationIconProps extends TouchableOpacityProps { | 'Chat'; disabled?: boolean; newIcon?: boolean; + isBigger?: boolean; } const NavigationIcon = (props: NavigationIconProps) => { @@ -35,7 +36,7 @@ const NavigationIcon = (props: NavigationIconProps) => { break; case 'Upload': imgSrc = props.disabled - ? require('../../assets/navigationIcons/upload.png') + ? require('../../assets/navigationIcons/new-upload.png') : require('../../assets/navigationIcons/upload-clicked.png'); break; case 'Notifications': @@ -68,12 +69,22 @@ const NavigationIcon = (props: NavigationIconProps) => { return ( - + ); }; +const getStyles = (isBigger: boolean) => + isBigger ? biggerIconStyles.icon : styles.icon; + +const biggerIconStyles = StyleSheet.create({ + icon: { + height: 44, + width: 44, + }, +}); + const styles = StyleSheet.create({ container: { flex: 1, @@ -87,8 +98,8 @@ const styles = StyleSheet.create({ shadowOpacity: 0.4, }, icon: { - height: 30, - width: 30, + height: 28, + width: 28, }, }); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 2e1f5251..e19df2c2 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, @@ -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,8 +57,8 @@ 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 isNotificationsTab = screenType === ScreenType.Notifications; @@ -84,10 +84,10 @@ const MainStackScreen: React.FC = ({ route }) => { })(); 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], @@ -98,7 +98,7 @@ 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, }; @@ -121,14 +121,14 @@ const MainStackScreen: React.FC = ({ route }) => { = ({ route }) => { )} {isNotificationsTab && ( )} {isUploadTab && ( )} = ({ route }) => { options={{ ...tutorialModalStyle, }} - initialParams={{ screenType }} + initialParams={{screenType}} /> = ({ route }) => { = ({ route }) => { = ({ route }) => { = ({ route }) => { = ({ route }) => { = ({ route }) => { = ({ route }) => { = ({ route }) => { = ({ route }) => { = ({ route }) => { = ({ route }) => { gestureEnabled: false, }} /> - ); }; @@ -397,8 +390,8 @@ export const headerBarOptions: ( 18 ? normalize(14) : normalize(16) }, + {color: color}, + {fontSize: title.length > 18 ? normalize(14) : normalize(16)}, ]}> {title} @@ -406,10 +399,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], @@ -427,7 +420,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 f8b94470..12f6ab58 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,15 +41,21 @@ const NavigationBar: React.FC = () => { <> ({ - tabBarIcon: ({ focused }) => { + screenOptions={({route}) => ({ + tabBarIcon: ({focused}) => { switch (route.name) { case 'Home': return ; case 'Chat': return ; case 'Upload': - return ; + return ( + + ); case 'Notifications': return ( { { // Closes the pill once this screen has been opened @@ -114,7 +120,7 @@ const NavigationBar: React.FC = () => { diff --git a/src/types/types.ts b/src/types/types.ts index eb5c2fa4..5f70d1f8 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -1,6 +1,6 @@ -import { ImageSourcePropType } from 'react-native'; +import {ImageSourcePropType} from 'react-native'; import Animated from 'react-native-reanimated'; -import { Channel as ChannelType, StreamChat } from 'stream-chat'; +import {Channel as ChannelType, StreamChat} from 'stream-chat'; export interface UserType { userId: string; @@ -171,7 +171,7 @@ export enum ScreenType { Notifications, SuggestedPeople, Chat, - Upload + Upload, } /** @@ -237,10 +237,10 @@ export type NotificationType = { verbage: string; notification_type: TypeOfNotification; notification_object: - | CommentNotificationType - | ThreadNotificationType - | MomentType - | undefined; + | CommentNotificationType + | ThreadNotificationType + | MomentType + | undefined; timestamp: string; unread: boolean; }; @@ -344,14 +344,14 @@ export type ChatContextType = { setChannel: React.Dispatch< React.SetStateAction< | ChannelType< - LocalAttachmentType, - LocalChannelType, - LocalCommandType, - LocalEventType, - LocalMessageType, - LocalResponseType, - LocalUserType - > + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalResponseType, + LocalUserType + > | undefined > >; -- cgit v1.2.3-70-g09d2 From 222c7ab62e57f7dec41d8a14de3768ee9a63fc8e Mon Sep 17 00:00:00 2001 From: Michael Date: Fri, 2 Jul 2021 15:56:56 -0400 Subject: Remove comments added from pr review. Also, clean some code that was suggested from pr review. --- src/components/common/NavigationIcon.tsx | 19 ++++++++----------- src/routes/main/MainStackNavigator.tsx | 4 ---- src/routes/main/MainStackScreen.tsx | 18 ------------------ 3 files changed, 8 insertions(+), 33 deletions(-) (limited to 'src/routes/main/MainStackScreen.tsx') diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx index f97bb861..debb36b3 100644 --- a/src/components/common/NavigationIcon.tsx +++ b/src/components/common/NavigationIcon.tsx @@ -69,22 +69,15 @@ const NavigationIcon = (props: NavigationIconProps) => { return ( - + ); }; -const getStyles = (isBigger: boolean) => - isBigger ? biggerIconStyles.icon : styles.icon; - -const biggerIconStyles = StyleSheet.create({ - icon: { - height: 44, - width: 44, - }, -}); - const styles = StyleSheet.create({ container: { flex: 1, @@ -101,6 +94,10 @@ const styles = StyleSheet.create({ height: 28, width: 28, }, + biggerIcon: { + height: 44, + width: 44, + }, }); export default NavigationIcon; diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index f12072e6..bc023da8 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -14,10 +14,6 @@ export type MainStackParams = { SuggestedPeople: { screenType: ScreenType; }; - /* - Search: { - screenType: ScreenType; - }; */ Upload: { screenType: ScreenType; }; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index e19df2c2..948f37b8 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -26,7 +26,6 @@ import { PrivacyScreen, ProfileScreen, RequestContactsAccess, - // SearchScreen, SettingsScreen, SocialMediaTaggs, SuggestedPeopleScreen, @@ -60,7 +59,6 @@ interface MainStackProps { const MainStackScreen: React.FC = ({route}) => { const {screenType} = route.params; - // const isSearchTab = screenType === ScreenType.Search; const isNotificationsTab = screenType === ScreenType.Notifications; const isSuggestedPeopleTab = screenType === ScreenType.SuggestedPeople; const isUploadTab = screenType === ScreenType.Upload; @@ -69,9 +67,6 @@ const MainStackScreen: React.FC = ({route}) => { switch (screenType) { case ScreenType.Profile: return 'Profile'; - /* - case ScreenType.Search: - return 'Search'; */ case ScreenType.Notifications: return 'Notifications'; case ScreenType.SuggestedPeople: @@ -103,19 +98,6 @@ const MainStackScreen: React.FC = ({route}) => { animationEnabled: false, }; - /* - Following was removed to eliminate search screen naviagtion - - {isSearchTab && ( - - )} - - */ - const mainStackScreen = () => { return (