Redesigned chat input

client/package.json

@@ -22,6 +22,7 @@
     "expo-linear-gradient": "~12.3.0",
     "expo-linking": "~5.0.2",
     "expo-location": "~16.1.0",
+    "expo-network": "~5.4.0",
     "expo-router": "^2.0.0",
     "expo-secure-store": "~12.3.1",
     "expo-status-bar": "~1.6.0",
@@ -30,13 +31,14 @@
     "react": "18.2.0",
     "react-native": "0.72.6",
     "react-native-dotenv": "^3.4.9",
+    "react-native-feather": "^1.1.2",
     "react-native-fs": "^2.20.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-uuid": "^2.0.1",
     "react-native-web": "~0.19.6",
     "socket.io-client": "^4.7.4",
-    "expo-network": "~5.4.0"
+    "react-native-svg": "13.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

client/src/components/Chat/ChatScreen.tsx

@@ -24,6 +24,7 @@ import { LocationProvider } from "../../contexts/LocationContext";
 import { useSocket } from "../../contexts/SocketContext";
 import { useLocation } from "../../contexts/LocationContext";
 import { AuthStore } from "../../services/store";
+import { ChatScreenFooter } from "../Common/ChatScreenFooter"
 
 const ChatScreen = () => {
   const settings = useSettings();
@@ -104,13 +105,13 @@ const ChatScreen = () => {
             <MessageChannel messages={messages} />
           </View>
           <View style={styles.footerContainer}>
-            <ChatInput
+            <ChatScreenFooter
               value={messageContent}
               onChangeText={(text: string) => {
                 setMessageContent(text);
               }}
+              onSend={onHandleSubmit}
             />
-            <ChatSendButton onPress={onHandleSubmit} />
           </View>
         </View>
       </KeyboardAvoidingView>
@@ -143,16 +144,17 @@ const styles = StyleSheet.create({
 
   footerContainer: {
     width: "95%",
-    minHeight: Dimensions.get("window").height * 0.1,
+
     maxHeight: Dimensions.get("window").height * 0.15,
     display: "flex",
     flexDirection: "row",
     alignItems: "flex-end",
     justifyContent: "space-evenly",
-    paddingBottom: Dimensions.get("window").height * 0.02,
-    paddingTop: Dimensions.get("window").height * 0.02,
-    marginTop: 10,
-    borderTopWidth: 1,
+    paddingBottom: Dimensions.get("window").height * 0.003,
+    paddingTop: Dimensions.get("window").height * 0.004,
+    marginTop: 0,
+    borderTopWidth: 0,
+    borderColor: "#8E8E8E",
   },
 });
 

client/src/components/Common/ChatScreenFooter.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { TextInput, View, StyleSheet, Dimensions, Platform, TouchableOpacity } from 'react-native'
+import { ChatSendButton } from './CustomButtons'
+import { Smile, Image } from "react-native-feather";
+
+interface ChatInputProps {
+    value?: string,
+    onChangeText?: (text: string) => void
+    invalid?: boolean,
+    onSend?: () => void,
+}
+
+export const ChatScreenFooter: React.FC<ChatInputProps> = ({ value, onChangeText, onSend }) => {
+
+
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.iconContainer}>
+                <TouchableOpacity>
+                    <Image color={"black"} strokeWidth={1.8} style={styles.icons}/>
+                </TouchableOpacity>
+                <TouchableOpacity>
+                    <Smile color={"black"} strokeWidth={1.8} style={styles.icons}/>
+                </TouchableOpacity>
+            </View>
+            <TextInput
+            placeholder='Say Something...'
+            multiline={true}
+            value={value}
+            onChangeText={onChangeText}
+            maxLength={500}
+            style={styles.messageInput}/>
+            <View style={styles.sendButtonContainer}>
+                <ChatSendButton onPress={(onSend)} />
+            </View>
+        </View>
+    )
+};
+
+const styles = StyleSheet.create({
+
+    container: {
+        flexDirection: 'row',
+        flex: 1,
+        alignItems: 'center',
+        borderColor: "#8E8E8E",
+        borderWidth: 1,
+        borderRadius: Dimensions.get('window').width * 0.058,
+        marginHorizontal: Dimensions.get('window').width * 0.005,
+        marginBottom: Platform.OS === 'ios' ? 0 : 5,
+        minHeight: Dimensions.get('window').width * 0.113,
+        maxHeight: Dimensions.get('window').width * 0.3,
+    },
+    messageInput: {
+        fontSize: 16,
+        flex: 1,
+        marginBottom: Platform.OS === 'ios' ? 5 : 4,
+        marginTop: Platform.OS === 'ios' ? 2 : 4,
+        marginHorizontal: Dimensions.get('window').width * 0.018,
+
+
+    },
+    icons: {
+        marginHorizontal: Dimensions.get('window').width * 0.008,
+    },
+    iconContainer: {
+        marginLeft: Dimensions.get('window').width * 0.02,
+        marginBottom: Dimensions.get('window').width * 0.025,
+        marginTop: Dimensions.get('window').width * 0.025,
+        flexDirection: 'row',
+        alignItems: "flex-end",
+        justifyContent: "flex-end",
+        alignSelf: "stretch",
+
+
+    },
+    sendButtonContainer: {
+        alignItems: "flex-end",
+        justifyContent: "flex-end",
+        flexDirection: "row",
+        alignSelf: "stretch",
+        marginRight: Dimensions.get('window').width * 0.01,
+        marginBottom: Dimensions.get('window').width * 0.01,
+        marginTop: Dimensions.get('window').width * 0.01,
+    }
+
+});

client/src/components/Common/CustomButtons.tsx

@@ -8,25 +8,26 @@ interface ChatSendButtonProps {
 export const ChatSendButton: React.FC<ChatSendButtonProps> = ({ onPress }) => {
   return (
     <TouchableOpacity style={styles.sendButton} onPress={onPress}>
-        <Image style={styles.sendButtonImage} source={require('../../../assets/send.png')}/>
+        <Image style={styles.sendButtonImage} source={require('../../../assets/transparentSend.png')}/>
     </TouchableOpacity>
   )
 }
 
 const styles = StyleSheet.create({
     sendButton: {
-        height: Dimensions.get('window').height * 0.055,
-        width: Dimensions.get('window').height * 0.055,
-        borderRadius: 30,
-        backgroundColor: 'blue',
+        height: Dimensions.get('window').width * 0.09,
+        width: Dimensions.get('window').width * 0.09,
+        borderRadius: 100,
+        backgroundColor: '#34D1BF',
         justifyContent: 'center',
         alignItems: 'center',
     },
 
     sendButtonImage:{
-        height: Dimensions.get('window').height * 0.033,
-        width: Dimensions.get('window').height * 0.033,
-        marginLeft: Dimensions.get('window').width * 0.01,
+        height: "64%",
+        width: "64%",
+        marginLeft: "13%",
+        tintColor: 'white',
     },
 })
 

client/src/components/Common/CustomInputs.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import { TextInput, View, StyleSheet, Dimensions, Platform } from 'react-native'
+import { ChatSendButton } from './CustomButtons'
 
 interface ChatInputProps {
     value?: string,
     onChangeText?: (text: string) => void
     invalid?: boolean,
+    onSend?: () => void,
 }
 
 export const WelcomeEmailInput: React.FC<ChatInputProps> = ({ value, onChangeText }) => {
@@ -80,17 +82,23 @@ export const SignUpConfirmPasswordInput: React.FC<ChatInputProps> = ({ value, on
     )
 }
 
-export const ChatInput: React.FC<ChatInputProps> = ({ value, onChangeText }) => {
+export const ChatInput: React.FC<ChatInputProps> = ({ value, onChangeText, onSend }) => {
 
 
 
     return (
-        <TextInput style={styles.loginInput} 
-        placeholder='Say Something...'
-        multiline={true}
-        value={value}
-        onChangeText={onChangeText}
-        maxLength={500} />
+        <View style={styles.messsageContainer}>
+
+            <TextInput 
+            placeholder='Say Something...'
+            multiline={true}
+            value={value}
+            onChangeText={onChangeText}
+            maxLength={500}
+            style={styles.messageInput}/>
+
+            <ChatSendButton onPress={(onSend)} />
+        </View>
     )
 };
 
@@ -115,7 +123,24 @@ const styles = StyleSheet.create({
         paddingLeft: 15,
         paddingRight: 15,
     },
-
+    messsageContainer: {
+        width: Dimensions.get('window').width * 0.75,
+        borderWidth: 1,
+        borderRadius: 30,
+        paddingTop: Dimensions.get('window').height * 0.006,
+        paddingBottom: Dimensions.get('window').height * 0.006,
+        paddingLeft: 15,
+        paddingRight: Dimensions.get('window').height * 0.006,
+        flexDirection: 'row',
+        flex: 1,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderColor: "#8E8E8E"
+    },
+    messageInput: {
+        width: Dimensions.get('window').height * 0.35,
+        fontSize: 16,
+    },
     invalidLoginInput: {
         borderColor: 'red',
     },