From cf558e378e238edd29f4fa135befce43a5880d36 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 16:40:06 -0400 Subject: created initial styling --- src/screens/chat/ChatListScreen.tsx | 6 ++++-- src/screens/chat/ChatScreen.tsx | 3 ++- 2 files changed, 6 insertions(+), 3 deletions(-) (limited to 'src/screens') diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index daea9984..61a16c93 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -1,4 +1,6 @@ import AsyncStorage from '@react-native-community/async-storage'; +import type {DeepPartial, Theme} from 'stream-chat-react-native'; +import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useContext, useEffect, useMemo, useState} from 'react'; import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; @@ -30,8 +32,8 @@ interface ChatListScreenProps { /* * Screen that displays all of the user's active conversations. */ -const ChatListScreen: React.FC = ({navigation}) => { - const {chatClient, setChannel} = useContext(ChatContext); +const ChatListScreen: React.FC = () => { + const {chatClient} = useContext(ChatContext); const [modalVisible, setChatModalVisible] = useState(false); const [clientReady, setClientReady] = useState(false); diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 59c53c99..feb95b83 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -10,6 +10,7 @@ import { MessageList, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; +import {ChatInput} from '../../components'; import ChatHeader from '../../components/messages/ChatHeader'; import {MainStackParams} from '../../routes'; import {isIPhoneX} from '../../utils'; @@ -36,7 +37,7 @@ const ChatScreen: React.FC = () => { {}} /> - + -- cgit v1.2.3-70-g09d2 From 612df06361d4738f4711669d01df256e98620273 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 17:59:46 -0400 Subject: added white theme --- src/screens/chat/ChatListScreen.tsx | 13 ++++++++++++- src/screens/chat/ChatScreen.tsx | 10 +++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) (limited to 'src/screens') diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 61a16c93..605163d2 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -22,6 +22,7 @@ import { } from '../../types'; import NewChatModal from './NewChatModal'; +import {HeaderHeight} from '../../utils'; type ChatListScreenNavigationProp = StackNavigationProp< MainStackParams, 'ChatList' @@ -39,6 +40,7 @@ const ChatListScreen: React.FC = () => { const [clientReady, setClientReady] = useState(false); const state: RootState = useStore().getState(); const loggedInUserId = state.user.user.userId; + const tabbarHeight = useBottomTabBarHeight(); const memoizedFilters = useMemo( () => ({ @@ -48,6 +50,15 @@ const ChatListScreen: React.FC = () => { [], ); + const chatTheme = { + channelListMessenger: { + flatListContent: { + backgroundColor: 'white', + paddingBottom: tabbarHeight + HeaderHeight + 20, + }, + }, + }; + useEffect(() => { const setupClient = async () => { const chatToken = await AsyncStorage.getItem('chatToken'); @@ -76,7 +87,7 @@ const ChatListScreen: React.FC = () => { }} /> {clientReady && ( - + = () => { const {channel, chatClient} = useContext(ChatContext); const tabbarHeight = useBottomTabBarHeight(); + const chatTheme = { + messageList: { + container: { + backgroundColor: 'white', + }, + }, + }; + return ( = () => { {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50}, ]}> - + {}} /> -- cgit v1.2.3-70-g09d2 From 17de7d8312b10f84af2178f769ff92bf96ab47f5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 19:52:25 -0400 Subject: added our button --- src/screens/chat/ChatListScreen.tsx | 5 ++--- src/screens/chat/ChatScreen.tsx | 33 +++++++++++++++++++++++++++++---- 2 files changed, 31 insertions(+), 7 deletions(-) (limited to 'src/screens') diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 605163d2..c11f4d1d 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -1,5 +1,4 @@ import AsyncStorage from '@react-native-community/async-storage'; -import type {DeepPartial, Theme} from 'stream-chat-react-native'; import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useContext, useEffect, useMemo, useState} from 'react'; @@ -20,9 +19,9 @@ import { LocalReactionType, LocalUserType, } from '../../types'; - -import NewChatModal from './NewChatModal'; import {HeaderHeight} from '../../utils'; +import NewChatModal from './NewChatModal'; + type ChatListScreenNavigationProp = StackNavigationProp< MainStackParams, 'ChatList' diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 7e189be5..baf1e23d 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -1,7 +1,7 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useContext} from 'react'; -import {StyleSheet} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; import { Channel, @@ -10,8 +10,9 @@ import { MessageList, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; -import {ChatInput} from '../../components'; +import UpArrowIcon from '../../assets/icons/up_arrow.svg'; import ChatHeader from '../../components/messages/ChatHeader'; +import {TAGG_LIGHT_BLUE} from '../../constants'; import {MainStackParams} from '../../routes'; import {isIPhoneX} from '../../utils'; @@ -34,6 +35,12 @@ const ChatScreen: React.FC = () => { }, }; + const SendButton = () => ( + + + + ); + return ( = () => { ]}> - + [ + copyMessage, + deleteMessage, + ]}> {}} /> - + {/* */} + @@ -57,6 +71,17 @@ const styles = StyleSheet.create({ backgroundColor: 'white', flex: 1, }, + + submitButton: { + height: 35, + width: 35, + backgroundColor: TAGG_LIGHT_BLUE, + borderRadius: 999, + justifyContent: 'center', + alignItems: 'center', + bottom: -5, + alignSelf: 'flex-end', + }, }); export default ChatScreen; -- cgit v1.2.3-70-g09d2 From 3097ece62ac3c410efaa6750571a0395b63be410 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 20:18:06 -0400 Subject: added insets, photo working --- src/screens/chat/ChatScreen.tsx | 34 ++++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 12 deletions(-) (limited to 'src/screens') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 3d791f3c..8281ca85 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -1,6 +1,6 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useContext} from 'react'; +import React, {Fragment, useContext} from 'react'; import {StyleSheet, View} from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; import { @@ -8,6 +8,7 @@ import { Chat, MessageInput, MessageList, + OverlayProvider, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; @@ -41,6 +42,7 @@ const ChatScreen: React.FC = () => { ); + // const insets = useSafeAreaInsets(); return ( = () => { ]}> - [ - copyMessage, - deleteMessage, - ]}> - {}} /> - {/* */} - - + + [ + copyMessage, + deleteMessage, + ]} + Attachment={Fragment}> + {}} /> + {/* */} + + + ); -- cgit v1.2.3-70-g09d2 From 6862e278129341b7989dba937c7252f2f5f84cd5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 20:43:09 -0400 Subject: cleaned up code --- src/screens/chat/ChatScreen.tsx | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) (limited to 'src/screens') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 8281ca85..a7dd3717 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -2,6 +2,7 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {Fragment, useContext} from 'react'; import {StyleSheet, View} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; import {SafeAreaView} from 'react-native-safe-area-context'; import { Channel, @@ -9,9 +10,11 @@ import { MessageInput, MessageList, OverlayProvider, + useMessageInputContext, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; +import {ChatInput} from '../../components'; import ChatHeader from '../../components/messages/ChatHeader'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {MainStackParams} from '../../routes'; @@ -37,13 +40,6 @@ const ChatScreen: React.FC = () => { }, }; - const SendButton = () => ( - - - - ); - // const insets = useSafeAreaInsets(); - return ( = () => { ]}> - + = () => { messageActions={({copyMessage, deleteMessage}) => [ copyMessage, deleteMessage, - ]} - Attachment={Fragment}> + ]}> {}} /> - {/* */} - + -- cgit v1.2.3-70-g09d2 From fac8d9e28602d6b766e9bb85b2184711e743dbfa Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 20:52:25 -0400 Subject: removed attach button --- src/screens/chat/ChatScreen.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/screens') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index f9467535..d4e97a37 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -104,7 +104,8 @@ const ChatScreen: React.FC = () => { messageActions={({copyMessage, deleteMessage}) => [ copyMessage, deleteMessage, - ]}> + ]} + AttachButton={() => null}> {}} /> -- cgit v1.2.3-70-g09d2 From e88bc199f9432b6f483c3ad5601642775550809b Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 20:59:44 -0400 Subject: fixed error --- src/screens/chat/ChatScreen.tsx | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'src/screens') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index d4e97a37..9518970f 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -95,21 +95,21 @@ const ChatScreen: React.FC = () => { ]}> - - null} - MessageSimple={CustomMessageUIComponent} - messageActions={({copyMessage, deleteMessage}) => [ - copyMessage, - deleteMessage, - ]} - AttachButton={() => null}> - {}} /> - - - + {/* */} + null} + MessageSimple={CustomMessageUIComponent} + messageActions={({copyMessage, deleteMessage}) => [ + copyMessage, + deleteMessage, + ]} + AttachButton={() => null}> + {}} /> + + + {/* */} ); -- cgit v1.2.3-70-g09d2 From 220305d25b27388494d730513c90917b5d69548c Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 21:10:25 -0400 Subject: changed to default bubble --- src/screens/chat/ChatScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/screens') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 9518970f..df39afb5 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -100,7 +100,7 @@ const ChatScreen: React.FC = () => { channel={channel} keyboardVerticalOffset={0} OverlayReactionList={() => null} - MessageSimple={CustomMessageUIComponent} + // MessageSimple={CustomMessageUIComponent} messageActions={({copyMessage, deleteMessage}) => [ copyMessage, deleteMessage, -- cgit v1.2.3-70-g09d2 From f317431b733113181e83ff864e11c79542cc295b Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 21:12:00 -0400 Subject: added attach button back --- src/screens/chat/ChatScreen.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/screens') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index df39afb5..c5e3e446 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -105,7 +105,8 @@ const ChatScreen: React.FC = () => { copyMessage, deleteMessage, ]} - AttachButton={() => null}> + // AttachButton={() => null} + > {}} /> -- cgit v1.2.3-70-g09d2 From 2bf6764cf287fbce958e4a4f43f146e0e3c2ddf0 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 21:16:05 -0400 Subject: yes --- src/screens/chat/ChatScreen.tsx | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'src/screens') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index c5e3e446..682906ee 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -95,22 +95,22 @@ const ChatScreen: React.FC = () => { ]}> - {/* */} - null} - // MessageSimple={CustomMessageUIComponent} - messageActions={({copyMessage, deleteMessage}) => [ - copyMessage, - deleteMessage, - ]} - // AttachButton={() => null} - > - {}} /> - - - {/* */} + + null} + // MessageSimple={CustomMessageUIComponent} + messageActions={({copyMessage, deleteMessage}) => [ + copyMessage, + deleteMessage, + ]} + // AttachButton={() => null} + > + {}} /> + + + ); -- cgit v1.2.3-70-g09d2