aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/assets/navigationIcons/new-upload.pngbin0 -> 454951 bytes
-rw-r--r--src/components/common/NavigationIcon.tsx19
-rw-r--r--src/routes/main/MainStackScreen.tsx81
-rw-r--r--src/routes/tabs/NavigationBar.tsx46
-rw-r--r--src/types/types.ts30
5 files changed, 93 insertions, 83 deletions
diff --git a/src/assets/navigationIcons/new-upload.png b/src/assets/navigationIcons/new-upload.png
new file mode 100644
index 00000000..f6a5487c
--- /dev/null
+++ b/src/assets/navigationIcons/new-upload.png
Binary files 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 (
<View style={styles.container}>
<TouchableOpacity {...props}>
- <Image source={imgSrc} style={styles.icon} />
+ <Image source={imgSrc} style={getStyles(props.isBigger ?? false)} />
</TouchableOpacity>
</View>
);
};
+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<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"
@@ -361,13 +361,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
gestureEnabled: false,
}}
/>
- <MainStack.Screen
- name="CameraScreen"
- component={CameraScreen}
- options={{
- gestureEnabled: false,
- }}
- />
</MainStack.Navigator>
);
};
@@ -397,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>
@@ -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 = () => {
<>
<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,22 @@ 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 }}
+ 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 +120,7 @@ const NavigationBar: React.FC = () => {
<Tabs.Screen
name="Profile"
component={MainStackScreen}
- initialParams={{ screenType: ScreenType.Profile }}
+ initialParams={{screenType: ScreenType.Profile}}
/>
</Tabs.Navigator>
</>
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
>
>;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 07:52:27 +0000