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/routes/main/MainStackScreen.tsx | 81 +++++++++++++++++-------------------- src/routes/tabs/NavigationBar.tsx | 46 ++++++++++++--------- 2 files changed, 63 insertions(+), 64 deletions(-) (limited to 'src/routes') 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 = () => { -- cgit v1.2.3-70-g09d2