Merge pull request #359 from IvanIFChen/tma784-style-message-input

[TMA-784] Style message input

1 files changed, 115 insertions, 0 deletions

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;