diff options
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/main/MainStackNavigator.tsx | 17 | ||||
| -rw-r--r-- | src/routes/main/MainStackScreen.tsx | 88 | ||||
| -rw-r--r-- | src/routes/tabs/NavigationBar.tsx | 51 |
3 files changed, 78 insertions, 78 deletions
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index ed3863b3..f12072e6 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -1,8 +1,7 @@ /** * 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 { CommentBaseType, MomentTagType, @@ -21,7 +20,7 @@ export type MainStackParams = { }; */ Upload: { screenType: ScreenType; - } + }; RequestContactsAccess: { screenType: ScreenType; }; @@ -42,16 +41,16 @@ export type MainStackParams = { }; CaptionScreen: { title?: string; - image?: { - filename: string; - path: string; - }; + media?: {uri: string; isVideo: boolean}; screenType: ScreenType; selectedTags?: MomentTagType[]; moment?: MomentType; }; TagFriendsScreen: { - imagePath: string; + media: { + uri: string; + isVideo: boolean; + }; selectedTags?: MomentTagType[]; }; TagSelectionScreen: { @@ -115,7 +114,7 @@ export type MainStackParams = { Chat: undefined; NewChatModal: undefined; ZoomInCropper: { - image: Image; + media: {uri: string; isVideo: boolean}; screenType: ScreenType; title: string; }; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index e1ad8aa9..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<MainStackParams, 'Profile'>; interface MainStackProps { route: MainStackRouteProps; } -const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { - const { screenType } = route.params; +const MainStackScreen: React.FC<MainStackProps> = ({route}) => { + const {screenType} = route.params; // const isSearchTab = screenType === ScreenType.Search; const isNotificationsTab = screenType === ScreenType.Notifications; @@ -84,10 +84,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({ 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<MainStackProps> = ({ 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<MainStackProps> = ({ route }) => { <MainStack.Navigator screenOptions={{ headerShown: false, - gestureResponseDistance: { horizontal: SCREEN_WIDTH * 0.6 }, + gestureResponseDistance: {horizontal: SCREEN_WIDTH * 0.6}, }} mode="card" initialRouteName={initialRouteName}> <MainStack.Screen name="Profile" component={ProfileScreen} - initialParams={{ screenType }} + initialParams={{screenType}} options={{ ...headerBarOptions('white', ''), }} @@ -137,21 +137,21 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { <MainStack.Screen name="SuggestedPeople" component={SuggestedPeopleScreen} - initialParams={{ screenType }} + initialParams={{screenType}} /> )} {isNotificationsTab && ( <MainStack.Screen name="Notifications" component={NotificationsScreen} - initialParams={{ screenType }} + initialParams={{screenType}} /> )} {isUploadTab && ( <MainStack.Screen name="Upload" component={CameraScreen} - initialParams={{ screenType }} + initialParams={{screenType}} /> )} <MainStack.Screen @@ -188,7 +188,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { options={{ ...tutorialModalStyle, }} - initialParams={{ screenType }} + initialParams={{screenType}} /> <MainStack.Screen name="CaptionScreen" @@ -201,10 +201,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { <MainStack.Screen name="SocialMediaTaggs" component={SocialMediaTaggs} - initialParams={{ screenType }} + initialParams={{screenType}} options={{ ...headerBarOptions('white', ''), - headerStyle: { height: AvatarHeaderHeight }, + headerStyle: {height: AvatarHeaderHeight}, }} /> <MainStack.Screen @@ -224,7 +224,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { <MainStack.Screen name="IndividualMoment" component={IndividualMoment} - initialParams={{ screenType }} + initialParams={{screenType}} options={{ ...modalStyle, gestureEnabled: false, @@ -234,7 +234,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { <MainStack.Screen name="MomentCommentsScreen" component={MomentCommentsScreen} - initialParams={{ screenType }} + initialParams={{screenType}} options={{ ...headerBarOptions('black', 'Comments'), }} @@ -249,7 +249,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { <MainStack.Screen name="MomentUploadPrompt" component={MomentUploadPromptScreen} - initialParams={{ screenType }} + initialParams={{screenType}} options={{ ...modalStyle, }} @@ -257,7 +257,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { <MainStack.Screen name="FriendsListScreen" component={FriendsListScreen} - initialParams={{ screenType }} + initialParams={{screenType}} options={{ ...headerBarOptions('black', 'Friends'), }} @@ -272,7 +272,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { <MainStack.Screen name="RequestContactsAccess" component={RequestContactsAccess} - initialParams={{ screenType }} + initialParams={{screenType}} options={{ ...modalStyle, gestureEnabled: false, @@ -288,7 +288,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { <MainStack.Screen name="UpdateSPPicture" component={SuggestedPeopleUploadPictureScreen} - initialParams={{ editing: true }} + initialParams={{editing: true}} options={{ ...headerBarOptions('white', ''), }} @@ -296,7 +296,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { <MainStack.Screen name="BadgeSelection" component={BadgeSelection} - initialParams={{ editing: true }} + initialParams={{editing: true}} options={{ ...headerBarOptions('white', ''), }} @@ -304,7 +304,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { <MainStack.Screen name="MutualBadgeHolders" component={MutualBadgeHolders} - options={{ ...modalStyle }} + options={{...modalStyle}} /> <MainStack.Screen name="SPWelcomeScreen" @@ -316,20 +316,20 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { <MainStack.Screen name="ChatList" component={ChatListScreen} - options={{ headerTitle: 'Chats' }} + options={{headerTitle: 'Chats'}} /> <MainStack.Screen name="Chat" component={ChatScreen} options={{ ...headerBarOptions('black', ''), - headerStyle: { height: ChatHeaderHeight }, + headerStyle: {height: ChatHeaderHeight}, }} /> <MainStack.Screen name="NewChatModal" component={NewChatModal} - options={{ headerShown: false, ...newChatModalStyle }} + options={{headerShown: false, ...newChatModalStyle}} /> <MainStack.Screen name="TagSelectionScreen" @@ -349,6 +349,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { name="ZoomInCropper" component={ZoomInCropper} options={{ + ...modalStyle, gestureEnabled: false, }} /> @@ -356,6 +357,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => { name="CameraScreen" component={CameraScreen} options={{ + ...modalStyle, gestureEnabled: false, }} /> @@ -388,8 +390,8 @@ export const headerBarOptions: ( <Text style={[ styles.headerTitle, - { color: color }, - { fontSize: title.length > 18 ? normalize(14) : normalize(16) }, + {color: color}, + {fontSize: title.length > 18 ? normalize(14) : normalize(16)}, ]}> {title} </Text> @@ -397,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], @@ -418,24 +420,12 @@ 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), fontWeight: '700', }, - whiteHeaderTitle: { - fontSize: normalize(16), - letterSpacing: normalize(1.3), - fontWeight: '700', - color: 'white', - }, - blackHeaderTitle: { - fontSize: normalize(16), - letterSpacing: normalize(1.3), - fontWeight: '700', - color: 'black', - }, }); export default MainStackScreen; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index f8b94470..789cbcac 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 = () => { <> <NotificationPill showIcon={showIcon} /> <Tabs.Navigator - screenOptions={({ route }) => ({ - tabBarIcon: ({ focused }) => { + screenOptions={({route}) => ({ + tabBarIcon: ({focused}) => { switch (route.name) { case 'Home': return <NavigationIcon tab="Home" disabled={!focused} />; case 'Chat': return <NavigationIcon tab="Chat" disabled={!focused} />; case 'Upload': - return <NavigationIcon tab="Upload" disabled={!focused} />; + return ( + <NavigationIcon + tab="Upload" + disabled={!focused} + isBigger={true} + /> + ); case 'Notifications': return ( <NavigationIcon @@ -86,22 +92,27 @@ const NavigationBar: React.FC = () => { <Tabs.Screen name="SuggestedPeople" component={MainStackScreen} - initialParams={{ screenType: ScreenType.SuggestedPeople }} + initialParams={{screenType: ScreenType.SuggestedPeople}} + /> + <Tabs.Screen + name="Chat" + component={MainStackScreen} + initialParams={{screenType: ScreenType.Chat}} /> <Tabs.Screen name="Chat" component={MainStackScreen} - initialParams={{ screenType: ScreenType.Chat }} + initialParams={{screenType: ScreenType.Chat}} /> <Tabs.Screen name="Upload" component={MainStackScreen} - initialParams={{ screenType: ScreenType.Upload }} + initialParams={{screenType: ScreenType.Upload}} /> <Tabs.Screen name="Notifications" component={MainStackScreen} - initialParams={{ screenType: ScreenType.Notifications }} + initialParams={{screenType: ScreenType.Notifications}} listeners={{ tabPress: (_) => { // Closes the pill once this screen has been opened @@ -114,7 +125,7 @@ const NavigationBar: React.FC = () => { <Tabs.Screen name="Profile" component={MainStackScreen} - initialParams={{ screenType: ScreenType.Profile }} + initialParams={{screenType: ScreenType.Profile}} /> </Tabs.Navigator> </> |
