aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/messages/ChannelPreview.tsx23
-rw-r--r--src/components/messages/ChatInput.tsx115
-rw-r--r--src/components/messages/index.ts1
-rw-r--r--src/screens/chat/ChatListScreen.tsx15
-rw-r--r--src/screens/chat/ChatScreen.tsx51
5 files changed, 179 insertions, 26 deletions
diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
index 312f879a..a7a7268a 100644
--- a/src/components/messages/ChannelPreview.tsx
+++ b/src/components/messages/ChannelPreview.tsx
@@ -3,7 +3,6 @@ import React, {useContext} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {useStore} from 'react-redux';
-import {usernameRegex} from 'src/constants';
import {ChannelPreviewMessengerProps} from 'stream-chat-react-native';
import {ChatContext} from '../../App';
import {
@@ -18,19 +17,21 @@ import {
import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {getMember, isOnline} from '../../utils/messages';
-const ChannelPreview: React.FC<ChannelPreviewMessengerProps<
- LocalAttachmentType,
- LocalChannelType,
- LocalCommandType,
- LocalEventType,
- LocalMessageType,
- LocalReactionType,
- LocalUserType
->> = (props) => {
+const ChannelPreview: React.FC<
+ ChannelPreviewMessengerProps<
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalReactionType,
+ LocalUserType
+ >
+> = (props) => {
+ const {channel} = props;
const {setChannel} = useContext(ChatContext);
const state = useStore().getState();
const navigation = useNavigation();
- const {channel} = props;
const member = getMember(channel, state);
const online = isOnline(member?.user?.last_active);
const unread = channel.state.unreadCount > 0;
diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx
new file mode 100644
index 00000000..9aeb9c62
--- /dev/null
+++ b/src/components/messages/ChatInput.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+ Image,
+ StyleSheet,
+ TextInput,
+ TouchableOpacity,
+ View,
+} from 'react-native';
+import {useStore} from 'react-redux';
+import {
+ MessageInputProps,
+ useMessageInputContext,
+} from 'stream-chat-react-native';
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {RootState} from '../../store/rootReducer';
+import {
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalReactionType,
+ LocalUserType,
+} from '../../types';
+
+const ChatInput: React.FC<
+ MessageInputProps<
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalReactionType,
+ LocalUserType
+ >
+> = () => {
+ const state: RootState = useStore().getState();
+ const avatar = state.user.avatar;
+ const {sendMessage, setText, text} = useMessageInputContext();
+
+ return (
+ <View style={styles.container}>
+ <View style={styles.textContainer}>
+ <Image
+ style={styles.avatar}
+ source={
+ avatar
+ ? {uri: avatar}
+ : require('../../assets/images/avatar-placeholder.png')
+ }
+ />
+ <TextInput
+ style={styles.text}
+ placeholder={'Message...'}
+ placeholderTextColor="grey"
+ multiline={true}
+ value={text}
+ onChangeText={setText}
+ />
+ <View style={styles.submitButton}>
+ <TouchableOpacity style={styles.submitButton} onPress={sendMessage}>
+ <UpArrowIcon width={35} height={35} color={'white'} />
+ </TouchableOpacity>
+ </View>
+ </View>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ alignItems: 'center',
+ width: '100%',
+ },
+ textContainer: {
+ width: '95%',
+ flexDirection: 'row',
+ backgroundColor: '#e8e8e8',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ margin: '3%',
+ borderRadius: 25,
+ },
+ text: {
+ flex: 1,
+ padding: '1%',
+ marginHorizontal: '1%',
+ },
+ avatar: {
+ height: 35,
+ width: 35,
+ borderRadius: 30,
+ marginRight: 10,
+ marginLeft: '3%',
+ marginVertical: '2%',
+ alignSelf: 'flex-end',
+ },
+ submitButton: {
+ height: 35,
+ width: 35,
+ backgroundColor: TAGG_LIGHT_BLUE,
+ borderRadius: 999,
+ justifyContent: 'center',
+ alignItems: 'center',
+ marginRight: '3%',
+ marginVertical: '2%',
+ alignSelf: 'flex-end',
+ },
+ whiteBackround: {
+ backgroundColor: '#fff',
+ },
+});
+
+export default ChatInput;
diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts
index e194093c..83ecd2ad 100644
--- a/src/components/messages/index.ts
+++ b/src/components/messages/index.ts
@@ -1,2 +1,3 @@
export {default as MessagesHeader} from './MessagesHeader';
export {default as ChannelPreview} from './ChannelPreview';
+export {default as ChatInput} from './ChatInput';
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index f9db0c77..0cbc7592 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,3 +1,4 @@
+import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useContext, useEffect, useMemo, useState} from 'react';
import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
@@ -17,7 +18,7 @@ import {
LocalReactionType,
LocalUserType,
} from '../../types';
-import {connectChatAccount} from '../../utils';
+import {connectChatAccount, HeaderHeight} from '../../utils';
import NewChatModal from './NewChatModal';
type ChatListScreenNavigationProp = StackNavigationProp<
@@ -35,6 +36,7 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
const [modalVisible, setChatModalVisible] = useState(false);
const state: RootState = useStore().getState();
const loggedInUserId = state.user.user.userId;
+ const tabbarHeight = useBottomTabBarHeight();
const memoizedFilters = useMemo(
() => ({
@@ -44,6 +46,15 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
[],
);
+ const chatTheme = {
+ channelListMessenger: {
+ flatListContent: {
+ backgroundColor: 'white',
+ paddingBottom: tabbarHeight + HeaderHeight + 20,
+ },
+ },
+ };
+
useEffect(() => {
connectChatAccount(loggedInUserId, chatClient)
.then((success) => {
@@ -66,7 +77,7 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
setChatModalVisible(true);
}}
/>
- <Chat client={chatClient}>
+ <Chat client={chatClient} style={chatTheme}>
<View style={styles.chatContainer}>
<ChannelList<
LocalAttachmentType,
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 2307b242..f9467535 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,21 +1,22 @@
import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useContext} from 'react';
-import {Image, StyleSheet, Text, Vibration, View} from 'react-native';
+import {Image, StyleSheet, Text, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {useStore} from 'react-redux';
-import {RootState} from '../../store/rootReducer';
import {
Channel,
Chat,
- MessageActions,
MessageInput,
MessageList,
+ OverlayProvider,
useMessageContext,
} from 'stream-chat-react-native';
import {ChatContext} from '../../App';
import ChatHeader from '../../components/messages/ChatHeader';
+import {TAGG_LIGHT_BLUE} from '../../constants';
import {MainStackParams} from '../../routes';
+import {RootState} from '../../store/rootReducer';
import {ScreenType} from '../../types';
import {isIPhoneX, SCREEN_WIDTH} from '../../utils';
@@ -32,6 +33,14 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
const loggedInUserId = state.user.user.userId;
const tabbarHeight = useBottomTabBarHeight();
+ const chatTheme = {
+ messageList: {
+ container: {
+ backgroundColor: 'white',
+ },
+ },
+ };
+
const isOwnMessage = (message) => {
if (message.user.id === loggedInUserId) {
return true;
@@ -85,16 +94,21 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
{paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
]}>
<ChatHeader screenType={ScreenType.Chat} />
- <Chat client={chatClient}>
- <Channel
- channel={channel}
- keyboardVerticalOffset={0}
- MessageSimple={CustomMessageUIComponent}
- messageActions={[]}
- OverlayReactionList={() => null}>
- <MessageList onThreadSelect={() => {}} />
- <MessageInput />
- </Channel>
+ <Chat client={chatClient} style={chatTheme}>
+ <OverlayProvider topInset={0} bottomInset={0}>
+ <Channel
+ channel={channel}
+ keyboardVerticalOffset={0}
+ OverlayReactionList={() => null}
+ MessageSimple={CustomMessageUIComponent}
+ messageActions={({copyMessage, deleteMessage}) => [
+ copyMessage,
+ deleteMessage,
+ ]}>
+ <MessageList onThreadSelect={() => {}} />
+ <MessageInput />
+ </Channel>
+ </OverlayProvider>
</Chat>
</SafeAreaView>
);
@@ -105,6 +119,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',
+ },
messageText: {
width: 196,
paddingHorizontal: 23,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 18:37:27 +0000