notification item style land layout done

src/components/notification/view/notificationStyles.js

@@ -2,34 +2,49 @@ import EStyleSheet from "react-native-extended-stylesheet";
 
 export default EStyleSheet.create({
   container: {
+    backgroundColor: "#fff",
+  },
+  notificationWrapper: {
     flex: 1,
-    marginTop: 50,
-    justifyContent: "center",
+    flexDirection: "row",
+    width: "$deviceWidth",
+    justifyContent: "space-between",
     alignItems: "center",
-    backgroundColor: "#F5FCFF",
+    height: 64,
   },
-  h2text: {
-    marginTop: 10,
-
-    color: "black",
-    fontSize: 36,
-    fontWeight: "bold",
+  avatar: {
+    width: 32,
+    height: 32,
+    borderRadius: 32 / 2,
+    marginLeft: 24,
   },
-  flatview: {
-    justifyContent: "center",
-    paddingTop: 30,
-    borderRadius: 2,
+  image: {
+    width: 32,
+    height: 32,
+    borderRadius: 32 / 4,
+    marginRight: 24,
+  },
+  body: {
+    flexDirection: "column",
+    flexGrow: 1,
+    fontSize: 12,
+    marginRight: 28,
+    marginLeft: 16,
+    alignSelf: "center",
+    width: "$deviceWidth / 1.76",
+  },
+  titleWrapper: {
+    flexDirection: "row",
   },
   name: {
-    fontFamily: "Verdana",
-    fontSize: 18,
-    color: "red",
+    fontWeight: "bold",
   },
-  email: {
-    color: "red",
+  title: {
+    color: "#788187",
   },
-  flatListWrapper: {
-    flex: 1,
-    flexDirection: "column",
+  description: {
+    color: "#3c4449",
+    fontSize: 12,
+    fontWeight: "600",
   },
 });

src/components/notification/view/notificationView.js

@@ -25,7 +25,7 @@ class NotificationView extends Component {
           name: "esteemapp",
           title: "25% likes your post:",
           avatar: "https://steemitimages.com/u/feruz/avatar/small",
-          description: "My own Top 5 eSteem Surfer Features",
+          description: "My own Top 5 eSteem Surfer Featuressasasaasasas",
           image: "https://steemitimages.com/u/feruz/avatar/small",
           date: "yesterday",
         },
@@ -49,7 +49,7 @@ class NotificationView extends Component {
           name: "esteemapp",
           title: "25% likes your post:",
           avatar: "https://steemitimages.com/u/feruz/avatar/small",
-          description: "My own Top 5 eSteem Surfer Features",
+          description: "My own Top 5 eSteem Surfer Featuresasassasasaasas",
           image: "https://steemitimages.com/u/feruz/avatar/small",
           date: "yesterday",
         },
@@ -71,18 +71,25 @@ class NotificationView extends Component {
 
   _getRenderItem = item => {
     return (
-      <View style={styles.flatview}>
+      <View style={styles.notificationWrapper}>
         <Image
+          style={styles.avatar}
           source={{
             uri: item.avatar,
           }}
           defaultSource={require("../../../assets/no_image.png")}
         />
-        <Text style={styles.name}>{item.name}</Text>
-        <Text style={styles.name}>{item.title}</Text>
-        <Text style={styles.name}>{item.description}</Text>
-        <Text style={styles.email}>{item.email}</Text>
+        <View style={styles.body}>
+          <View style={styles.titleWrapper}>
+            <Text style={styles.name}>{item.name} </Text>
+            <Text style={styles.title}>{item.title}</Text>
+          </View>
+          <Text numberOfLines={1} style={styles.description}>
+            {item.description}
+          </Text>
+        </View>
         <Image
+          style={styles.image}
           source={{ uri: item.image }}
           defaultSource={require("../../../assets/no_image.png")}
         />
@@ -94,7 +101,7 @@ class NotificationView extends Component {
     const { notification } = this.state;
 
     return (
-      <View>
+      <View style={styles.container}>
         <LineBreak color="#f6f6f6" height={35}>
           <Text>ugur</Text>
         </LineBreak>
@@ -103,7 +110,7 @@ class NotificationView extends Component {
             <Text>Notification Header</Text>
           </View>
           <FlatList
-            data={this.state.notification}
+            data={notification}
             renderItem={({ item }) => this._getRenderItem(item)}
             keyExtractor={item => item.email}
           />