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') 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