working on notification screen

src/components/basicUIElements/view/lineBreakView.js

@@ -2,6 +2,10 @@ import React from "react";
 import { View } from "react-native";
 import styles from "./lineBreakStyles";
 
-const LineBreak = ({ color }) => <View style={[styles.lineBreak]} />;
+const LineBreak = ({ color, children, height }) => (
+  <View style={[styles.lineBreak, { height: height, color: color }]}>
+    {children}
+  </View>
+);
 
 export default LineBreak;

src/components/leaderBoard/index.js

@@ -0,0 +1,4 @@
+import LeaderBoard from "./view/leaderBoardView";
+
+export { LeaderBoard };
+export default LeaderBoard;

src/components/leaderBoard/view/leaderBoardStyles.js

@@ -0,0 +1,7 @@
+import EStyleSheet from "react-native-extended-stylesheet";
+
+export default EStyleSheet.create({
+  styleName: {
+    // TODO: If we need default style. We can put there.
+  },
+});

src/components/leaderBoard/view/leaderBoardView.js

@@ -0,0 +1,37 @@
+import React, { Component } from "react";
+import { View } from "react-native";
+
+// Constants
+
+// Components
+
+// Styles
+// eslint-disable-next-line
+import styles from "./leaderBoardStyles";
+
+/*
+*            Props Name        Description                                     Value
+*@props -->  props name here   description here                                Value Type Here
+*
+*/
+
+class LeaderBoardView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+
+  render() {
+    // eslint-disable-next-line
+    const {} = this.props;
+
+    // eslint-disable-next-line
+    return <ElementName />;
+  }
+}
+
+export default LeaderBoardView;

src/components/notification/index.js

@@ -0,0 +1,4 @@
+import Notification from "./view/notificationView";
+
+export { Notification };
+export default Notification;

src/components/notification/view/notificationStyles.js

@@ -0,0 +1,30 @@
+import EStyleSheet from "react-native-extended-stylesheet";
+
+export default EStyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 50,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#F5FCFF",
+  },
+  h2text: {
+    marginTop: 10,
+    fontFamily: "Helvetica",
+    fontSize: 36,
+    fontWeight: "bold",
+  },
+  flatview: {
+    justifyContent: "center",
+    paddingTop: 30,
+    borderRadius: 2,
+  },
+  name: {
+    fontFamily: "Verdana",
+    fontSize: 18,
+    color: "red",
+  },
+  email: {
+    color: "red",
+  },
+});

src/components/notification/view/notificationView.js

@@ -0,0 +1,118 @@
+import React, { Component } from "react";
+import { View, Text, FlatList } from "react-native";
+import { LineBreak } from "../../basicUIElements";
+
+// Constants
+
+// Components
+
+// Styles
+// eslint-disable-next-line
+import styles from "./notificationStyles";
+
+/*
+*            Props Name        Description                                     Value
+*@props -->  props name here   description here                                Value Type Here
+*
+*/
+
+class NotificationView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      users: [
+        {
+          name: "Proxima Midnight",
+          email: "proxima@appdividend.com",
+        },
+        {
+          name: "Ebony Maw",
+          email: "ebony@appdividend.com",
+        },
+        {
+          name: "Black Dwarf",
+          email: "dwarf@appdividend.com",
+        },
+        {
+          name: "Mad Titan",
+          email: "thanos@appdividend.com",
+        },
+        {
+          name: "Supergiant",
+          email: "supergiant@appdividend.com",
+        },
+        {
+          name: "Loki",
+          email: "loki@appdividend.com",
+        },
+        {
+          name: "corvus",
+          email: "corvus@appdividend.com",
+        },
+        {
+          name: "Proxima Midnight",
+          email: "proxima1@appdividend.com",
+        },
+        {
+          name: "Ebony Maw",
+          email: "ebony1@appdividend.com",
+        },
+        {
+          name: "Black Dwarf",
+          email: "dwarf1@appdividend.com",
+        },
+        {
+          name: "Mad Titan",
+          email: "thanos1@appdividend.com",
+        },
+        {
+          name: "Supergiant",
+          email: "supergiant1@appdividend.com",
+        },
+        {
+          name: "Loki",
+          email: "loki1@appdividend.com",
+        },
+        {
+          name: "corvus",
+          email: "corvus1@appdividend.com",
+        },
+      ],
+    };
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+
+  render() {
+    // eslint-disable-next-line
+    // const {} = this.props;
+    // eslint-disable-next-line
+    console.log(this.state.users);
+    console.log("asdasd");
+    return (
+      <View>
+        <LineBreak color="#f6f6f6" height={35}>
+          <Text>ugur</Text>
+        </LineBreak>
+        <View style={styles.container}>
+          <Text style={styles.h2text}>Black Order</Text>
+          <FlatList
+            data={this.state.users}
+            showsVerticalScrollIndicator={false}
+            renderItem={({ item }) => (
+              <View style={styles.flatview}>
+                <Text style={styles.name}>{item.name}</Text>
+                <Text style={styles.email}>{item.email}</Text>
+              </View>
+            )}
+            keyExtractor={item => item.email}
+          />
+        </View>
+      </View>
+    );
+  }
+}
+
+export default NotificationView;

src/screens/notification/screen/notificationScreen.js

@@ -1,19 +1,35 @@
-import React from "react";
+import React, { Fragment } from "react";
-import { Container, Text } from "native-base";
+import { Text, View } from "react-native";
-
+import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
+import { TabBar } from "../../../components/tabBar";
+import { Notification } from "../../../components/notification";
 // Styles
-//import styles from "./notificationStyles";
+import styles from "./notificationStyles";
 
 class NotificationScreen extends React.Component {
-    static navigationOptions = {
-        title: "Notifications",
-    };
-
   render() {
     return (
-            <Container>
+      <Fragment>
-                <Text>Notifications</Text>
+        <ScrollableTabView
-            </Container>
+          style={styles.tabView}
+          renderTabBar={() => (
+            <TabBar
+              style={styles.tabbar}
+              tabUnderlineDefaultWidth={100}
+              tabUnderlineScaleX={2}
+              activeColor={"#357ce6"}
+              inactiveColor={"#222"}
+            />
+          )}
+        >
+          <View tabLabel="Notification" style={styles.notificationTab}>
+            <Notification />
+          </View>
+          <View tabLabel="Leaderboard" style={styles.leaderboardTab}>
+            <Text>Leaderboard</Text>
+          </View>
+        </ScrollableTabView>
+      </Fragment>
     );
   }
 }

src/screens/notification/screen/notificationStyles.js

@@ -1,3 +1,23 @@
 import EStyleSheet from "react-native-extended-stylesheet";
 
-export default EStyleSheet.create({});
+export default EStyleSheet.create({
+  tabbar: {
+    alignSelf: "center",
+    height: 55,
+    backgroundColor: "white",
+    borderBottomColor: "#f1f1f1",
+  },
+  tabView: {
+    alignSelf: "center",
+    backgroundColor: "transparent",
+  },
+  notificationTab: {
+    backgroundColor: "#fff",
+    minWidth: "$deviceWidth",
+  },
+  leaderboardTab: {
+    flex: 1,
+    backgroundColor: "#ffffff",
+    minWidth: "$deviceWidth",
+  },
+});