aboutsummaryrefslogtreecommitdiff
path: root/src/routes
diff options
context:
space:
mode:
Diffstat (limited to 'src/routes')
-rw-r--r--src/routes/main/MainStackNavigator.tsx17
-rw-r--r--src/routes/main/MainStackScreen.tsx88
-rw-r--r--src/routes/tabs/NavigationBar.tsx51
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>
</>