From 493a724d9092c5eb7c32915613ea99f1e3b31121 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Thu, 1 Apr 2021 14:17:26 -0400 Subject: Add chat icon assets --- src/assets/navigationIcons/chat-clicked.png | Bin 0 -> 858 bytes src/assets/navigationIcons/chat-clicked@2x.png | Bin 0 -> 1856 bytes src/assets/navigationIcons/chat-clicked@3x.png | Bin 0 -> 2883 bytes src/assets/navigationIcons/chat-notifications.png | Bin 0 -> 1587 bytes src/assets/navigationIcons/chat-notifications@2x.png | Bin 0 -> 3994 bytes src/assets/navigationIcons/chat-notifications@3x.png | Bin 0 -> 6183 bytes src/assets/navigationIcons/chat.png | Bin 0 -> 1587 bytes src/assets/navigationIcons/chat@2x.png | Bin 0 -> 3994 bytes src/assets/navigationIcons/chat@3x.png | Bin 0 -> 6183 bytes 9 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/assets/navigationIcons/chat-clicked.png create mode 100644 src/assets/navigationIcons/chat-clicked@2x.png create mode 100644 src/assets/navigationIcons/chat-clicked@3x.png create mode 100644 src/assets/navigationIcons/chat-notifications.png create mode 100644 src/assets/navigationIcons/chat-notifications@2x.png create mode 100644 src/assets/navigationIcons/chat-notifications@3x.png create mode 100644 src/assets/navigationIcons/chat.png create mode 100644 src/assets/navigationIcons/chat@2x.png create mode 100644 src/assets/navigationIcons/chat@3x.png (limited to 'src') diff --git a/src/assets/navigationIcons/chat-clicked.png b/src/assets/navigationIcons/chat-clicked.png new file mode 100644 index 00000000..f62b4cf5 Binary files /dev/null and b/src/assets/navigationIcons/chat-clicked.png differ diff --git a/src/assets/navigationIcons/chat-clicked@2x.png b/src/assets/navigationIcons/chat-clicked@2x.png new file mode 100644 index 00000000..4ce0f46a Binary files /dev/null and b/src/assets/navigationIcons/chat-clicked@2x.png differ diff --git a/src/assets/navigationIcons/chat-clicked@3x.png b/src/assets/navigationIcons/chat-clicked@3x.png new file mode 100644 index 00000000..bd3a1352 Binary files /dev/null and b/src/assets/navigationIcons/chat-clicked@3x.png differ diff --git a/src/assets/navigationIcons/chat-notifications.png b/src/assets/navigationIcons/chat-notifications.png new file mode 100644 index 00000000..cffb5751 Binary files /dev/null and b/src/assets/navigationIcons/chat-notifications.png differ diff --git a/src/assets/navigationIcons/chat-notifications@2x.png b/src/assets/navigationIcons/chat-notifications@2x.png new file mode 100644 index 00000000..22ae62db Binary files /dev/null and b/src/assets/navigationIcons/chat-notifications@2x.png differ diff --git a/src/assets/navigationIcons/chat-notifications@3x.png b/src/assets/navigationIcons/chat-notifications@3x.png new file mode 100644 index 00000000..98b1073d Binary files /dev/null and b/src/assets/navigationIcons/chat-notifications@3x.png differ diff --git a/src/assets/navigationIcons/chat.png b/src/assets/navigationIcons/chat.png new file mode 100644 index 00000000..cffb5751 Binary files /dev/null and b/src/assets/navigationIcons/chat.png differ diff --git a/src/assets/navigationIcons/chat@2x.png b/src/assets/navigationIcons/chat@2x.png new file mode 100644 index 00000000..22ae62db Binary files /dev/null and b/src/assets/navigationIcons/chat@2x.png differ diff --git a/src/assets/navigationIcons/chat@3x.png b/src/assets/navigationIcons/chat@3x.png new file mode 100644 index 00000000..98b1073d Binary files /dev/null and b/src/assets/navigationIcons/chat@3x.png differ -- cgit v1.2.3-70-g09d2 From 5c32ec8f6b1723604456ccabc3417f1e3c2c9227 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Thu, 1 Apr 2021 14:18:24 -0400 Subject: Add dummy chat screens --- src/screens/chat/ChatListScreen.tsx | 48 +++++++++++++++++++++++++++++++++++++ src/screens/chat/ChatScreen.tsx | 34 ++++++++++++++++++++++++++ src/screens/chat/index.ts | 2 ++ src/screens/index.ts | 1 + 4 files changed, 85 insertions(+) create mode 100644 src/screens/chat/ChatListScreen.tsx create mode 100644 src/screens/chat/ChatScreen.tsx create mode 100644 src/screens/chat/index.ts (limited to 'src') diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx new file mode 100644 index 00000000..c49c790d --- /dev/null +++ b/src/screens/chat/ChatListScreen.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import {View, StyleSheet, Text, TouchableOpacity} from 'react-native'; +import {StackNavigationProp} from '@react-navigation/stack'; + +import {MainStackParams} from '../../routes'; + +type ChatListScreenNavigationProp = StackNavigationProp< + MainStackParams, + 'ChatList' +>; +interface ChatListScreenProps { + navigation: ChatListScreenNavigationProp; +} +/* + * Screen that displays all of the user's active conversations. + */ +const ChatListScreen: React.FC = ({navigation}) => { + return ( + + I am the chat list. + navigation.navigate('Chat')}> + Let's go to a conversation! + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + placeholder: { + fontSize: 14, + fontWeight: 'bold', + marginBottom: 10, + }, + button: { + backgroundColor: '#CCE4FC', + padding: 15, + borderRadius: 5, + }, +}); + +export default ChatListScreen; diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx new file mode 100644 index 00000000..af83f504 --- /dev/null +++ b/src/screens/chat/ChatScreen.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import {View, StyleSheet, Text} from 'react-native'; +import {StackNavigationProp} from '@react-navigation/stack'; + +import {MainStackParams} from '../../routes'; + +type ChatScreenNavigationProp = StackNavigationProp; +interface ChatScreenProps { + navigation: ChatScreenNavigationProp; +} +/* + * Screen that displays all of the user's active conversations. + */ +const ChatScreen: React.FC = () => { + return ( + + I am a chat! + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + placeholder: { + fontSize: 14, + fontWeight: 'bold', + }, +}); + +export default ChatScreen; diff --git a/src/screens/chat/index.ts b/src/screens/chat/index.ts new file mode 100644 index 00000000..d2ccb02b --- /dev/null +++ b/src/screens/chat/index.ts @@ -0,0 +1,2 @@ +export {default as ChatListScreen} from './ChatListScreen'; +export {default as ChatScreen} from './ChatScreen'; diff --git a/src/screens/index.ts b/src/screens/index.ts index 50ada3d1..44ae4b52 100644 --- a/src/screens/index.ts +++ b/src/screens/index.ts @@ -5,3 +5,4 @@ export * from './search'; export * from './suggestedPeople'; export * from './suggestedPeopleOnboarding'; export * from './badge'; +export * from './chat'; -- cgit v1.2.3-70-g09d2 From ecd44e517cbb978c0a590a5861cb2cd357d0fc11 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Thu, 1 Apr 2021 14:19:17 -0400 Subject: Add chat to navigation --- src/components/common/NavigationIcon.tsx | 10 +++++++++- src/routes/main/MainStackNavigator.tsx | 2 ++ src/routes/main/MainStackScreen.tsx | 14 ++++++++++++++ src/routes/tabs/NavigationBar.tsx | 7 +++++++ src/types/types.ts | 1 + 5 files changed, 33 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx index 1a9934f2..5128f3da 100644 --- a/src/components/common/NavigationIcon.tsx +++ b/src/components/common/NavigationIcon.tsx @@ -14,7 +14,8 @@ interface NavigationIconProps extends TouchableOpacityProps { | 'Upload' | 'Notifications' | 'Profile' - | 'SuggestedPeople'; + | 'SuggestedPeople' + | 'Chat'; disabled?: boolean; newIcon?: boolean; } @@ -44,6 +45,13 @@ const NavigationIcon = (props: NavigationIconProps) => { : require('../../assets/navigationIcons/notifications.png') : require('../../assets/navigationIcons/notifications-clicked.png'); break; + case 'Chat': + imgSrc = props.disabled + ? props.newIcon + ? require('../../assets/navigationIcons/chat-notifications.png') + : require('../../assets/navigationIcons/chat.png') + : require('../../assets/navigationIcons/chat-clicked.png'); + break; case 'Profile': imgSrc = props.disabled ? require('../../assets/navigationIcons/profile.png') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 9b089634..021c0688 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -92,6 +92,8 @@ export type MainStackParams = { screenType: ScreenType; }; SPWelcomeScreen: {}; + ChatList: undefined; + Chat: undefined; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index d855f0df..8068b893 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -29,6 +29,8 @@ import { SuggestedPeopleUploadPictureScreen, SuggestedPeopleWelcomeScreen, SettingsScreen, + ChatListScreen, + ChatScreen, } from '../../screens'; import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; @@ -85,6 +87,8 @@ const MainStackScreen: React.FC = ({route}) => { return 'Notifications'; case ScreenType.SuggestedPeople: return 'SuggestedPeople'; + case ScreenType.Chat: + return 'ChatList'; } })(); @@ -294,6 +298,16 @@ const MainStackScreen: React.FC = ({route}) => { ...headerBarOptions('white', ''), }} /> + + ); }; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index e9208525..9b8427e7 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -54,6 +54,8 @@ const NavigationBar: React.FC = () => { disabled={!focused} /> ); + case 'Chat': + return ; case 'Profile': return ; case 'SuggestedPeople': @@ -92,6 +94,11 @@ const NavigationBar: React.FC = () => { component={MainStackScreen} initialParams={{screenType: ScreenType.Notifications}} /> +