Left Portion Completed Of ChatScreen

Sidm9 · Apr 9, 2020 · df78583 · df78583
1 parent 904c4d4
commit df78583
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 34 deletions.
diff --git a/Frontend/Components/SettingsComponents/List.js b/Frontend/Components/SettingsComponents/List.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, View, StyleSheet, Image } from 'react-native';
+import {Text, View, StyleSheet, Image} from 'react-native';
 import {
   TouchableOpacity,
   TouchableNativeFeedback,
@@ -15,14 +15,14 @@ const styles = StyleSheet.create({
   textDescription: {
     fontFamily: 'Montserrat-Medium',
     fontSize: 11,
-    height :null,
+    height: null,
   },
   listText: {
     height: '100%',
     flex: 1,
     //  borderWidth: 1,
     flexWrap: 'nowrap',
-    justifyContent: "flex-start",
+    justifyContent: 'flex-start',
     flexDirection: 'column',
   },
   iconContainer: {
@@ -33,13 +33,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   listItemsContainer: {
-    width : '100%',
+    width: '100%',
     // borderWidth :3 ,
-    height : 50,
+    height: 50,
     flexDirection: 'row',
     justifyContent: 'flex-end',
-    marginBottom : '2%',
-    marginTop : '2%',
+    marginBottom: '2%',
+    marginTop: '2%',
     alignSelf: 'baseline',
     paddingRight: 10,
     borderBottomWidth: 0.8,
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
     width: 30,
     height: '63%',
     marginRight: 5,
-    borderRadius : 4,
+    borderRadius: 4,
     // borderWidth: 4,
   },
   iconLeftContainer: {
@@ -69,28 +69,28 @@ const styles = StyleSheet.create({
 export default function List(props) {
   return (
     <>
-      <TouchableOpacity style={styles.listItemsContainer} onPress = {props.click}>
+      <TouchableOpacity style={styles.listItemsContainer} onPress={props.click}>
         <View style={styles.iconLeftContainer}>
           <Image source={props.img} style={styles.iconLeft} />
         </View>
         <View style={styles.listText}>
           <Text style={styles.textStyle}>{props.title}</Text>
-          <Text numberOfLines = {1} style={styles.textDescription}>{props.brief}</Text>
+          <Text numberOfLines={1} style={styles.textDescription}>
+            {props.brief}
+          </Text>
         </View>
         <View style={styles.iconContainer}>
           <TouchableNativeFeedback
             useForeground={true}
             background={TouchableNativeFeedback.Ripple('white', true)}
-              onPress={props.click}>
-              <Image
-                source={require('../../assets/icons/arrowWhite.png')}
-                style={styles.icon}
-              />
-            </TouchableNativeFeedback>
-          </View>
-
-        </TouchableOpacity>
-
+            onPress={props.click}>
+            <Image
+              source={require('../../assets/icons/arrowWhite.png')}
+              style={styles.icon}
+            />
+          </TouchableNativeFeedback>
+        </View>
+      </TouchableOpacity>
     </>
   );
 }
diff --git a/Frontend/Screens/Chat/ChatScreen.js b/Frontend/Screens/Chat/ChatScreen.js
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {Text, View, FlatList, StyleSheet} from 'react-native';
+import {Text, View, FlatList, StyleSheet, Image} from 'react-native';
 import List from '../../Components/SettingsComponents/List';
 import Header from '../../Components/Navbar';
 import Heading from '../../Components/Heading';
@@ -13,25 +13,56 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     flex: 1,
     padding: 10,
-    marginVertical: 5,
+    marginVertical: 1,
     marginHorizontal: 5,
     borderRadius: 10,
-    borderWidth: 3,
+    // borderBottomWidth: 1,
+    borderColor: 'black',
   },
   person_name: {
     color: 'black',
     fontFamily: 'Montserrat-Bold',
-    fontSize: 17,
-    borderWidth: 1,
+    //fontSize: 17,
+    marginVertical: 1,
+    //borderWidth: 1,
   },
   recent_chat: {
     color: 'black',
     fontFamily: 'Montserrat-Regular',
     fontSize: 14,
-    borderWidth: 1,
+    padding: 1,
+    //borderWidth: 1,
   },
   right_and_left_container: {
+    //borderWidth: 1,
+    flex: 1,
+    flexDirection: 'row',
+    borderColor: 'red',
+    flexWrap: 'wrap',
+  },
+  left_container: {
+    //borderWidth: 1,
+    flex: 4,
+  },
+  right_container: {
     borderWidth: 1,
+    flex: 1,
+    backgroundColor: 'yellow',
+  },
+  image_container: {
+    width: 50,
+    height: '100%',
+    justifyContent: 'center',
+    marginRight: 1,
+    // borderWidth :4,
+  },
+  image: {
+    alignSelf: 'center',
+    width: '83%',
+    height: '83%',
+    borderRadius: 50,
+    // marginRight: 5,
+    // borderWidth: 4,
   },
 });
 export default function ChatScreen({navigation}, props) {
@@ -68,17 +99,33 @@ export default function ChatScreen({navigation}, props) {
     },
   ]);
 
-  function Item({person_name, recent_chat}) {
+  function ChatsList({person_name, recent_chat}) {
     return (
       <View style={styles.item}>
         <View style={styles.right_and_left_container}>
-          <View style={styles.person_name}>
-            <Text style={styles.person_name}>{person_name}</Text>
+          <View style={styles.image_container}>
+            <Image
+              source={require('../../assets/images/tyler.jpg')}
+              style={styles.image}
+            />
+          </View>
+          <View style={styles.left_container}>
+            <View style={styles.person_name}>
+              <Text style={styles.person_name}>{person_name}</Text>
+            </View>
+            <View style={styles.recent_chat}>
+              <Text style={styles.recent_chat} numberOfLines={1}>
+                {recent_chat}
+              </Text>
+            </View>
           </View>
-          <View style={styles.recent_chat}>
-            <Text style={styles.recent_chat} numberOfLines={1}>
-              {recent_chat}
-            </Text>
+          <View style={styles.right_container}>
+            <View>
+              <Text> ONLINE</Text>
+            </View>
+            <View>
+              <Text> TIMESPAMP </Text>
+            </View>
           </View>
         </View>
       </View>
@@ -92,7 +139,7 @@ export default function ChatScreen({navigation}, props) {
         <FlatList
           data={array}
           renderItem={({item}) => (
-            <Item
+            <ChatsList
               person_name={item.person_name}
               recent_chat={item.recent_chat}
             />