3 files changed, 124 insertions, 11 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..fe24b271
--- /dev/null
+++ b/src/components/messages/ChatInput.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import {
+  Image,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {useStore} from 'react-redux';
+import {MessageInputProps} 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 {channel} = useContext(ChatContext);
+  const avatar = state.user.avatar;
+  // const member = getMember(channel, state);
+
+  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}
+        />
+        <View style={styles.submitButton}>
+          <TouchableOpacity style={styles.submitButton} onPress={() => {}}>
+            <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';