created messages screen added coming soon image also notificaiton changed for alpha

src/components/basicUIElements/view/noPostView.js

@@ -3,9 +3,11 @@ import { View, Text, Image } from 'react-native';
 import NO_POST from '../../../assets/no_post.png';
 import styles from './noPostStyles';
 
-const NoPost = ({ text, name, defaultText }) => (
-  <View style={styles.wrapper}>
-    <Image style={styles.image} source={NO_POST} />
+const NoPost = ({
+  text, name, defaultText, source, imageStyle, style,
+}) => (
+  <View style={[styles.wrapper, style]}>
+    <Image style={[styles.image, imageStyle]} source={source || NO_POST} />
     {name ? (
       <Text style={styles.text}>{`@${name} ${text}`}</Text>
     ) : (

src/components/notification/view/notificationView.js

@@ -22,44 +22,35 @@ class NotificationView extends Component {
       notification: [
         {
           name: 'esteemapp',
-          title: '25% likes your post:',
+          title: 'eSteem Mobile!',
           avatar: 'https://steemitimages.com/u/feruz/avatar/small',
-          description: 'My own Top 5 eSteem Surfer Featuressasasaasasas',
+          description: 'eSteem app with new ui!',
           image: 'https://steemitimages.com/u/feruz/avatar/small',
-          date: 'yesterday',
+          // date: 'today',
           isNew: true,
         },
-        {
-          name: 'esteemapp',
-          title: '25% likes your post:',
-          avatar: 'https://steemitimages.com/u/feruz/avatar/small',
-          description: 'My own Top 5 eSteem Surfer Features',
-          image: 'https://steemitimages.com/u/feruz/avatar/small',
-          date: 'yesterday',
-          isNew: true,
-        },
-        {
-          name: 'esteemapp',
-          title: '25% likes your post:',
-          description: 'My own Top 5 eSteem Surfer Features',
-          image: 'https://steemitimages.com/u/feruz/avatar/small',
-          date: 'yesterday',
-        },
-        {
-          name: 'esteemapp',
-          title: '25% likes your post:',
-          avatar: 'https://steemitimages.com/u/feruz/avatar/small',
-          description: 'My own Top 5 eSteem Surfer Featuresasassasasaasas',
-          date: 'yesterday',
-        },
-        {
-          name: 'esteemapp',
-          title: '25% likes your post:',
-          avatar: 'https://steemitimages.com/u/feruz/avatar/small',
-          description: 'My own Top 5 eSteem Surfer Features',
-          image: 'https://steemitimages.com/u/feruz/avatar/small',
-          date: 'yesterday',
-        },
+        // {
+        //   name: 'esteemapp',
+        //   title: '25% likes your post:',
+        //   description: 'My own Top 5 eSteem Surfer Features',
+        //   image: 'https://steemitimages.com/u/feruz/avatar/small',
+        //   date: 'yesterday',
+        // },
+        // {
+        //   name: 'esteemapp',
+        //   title: '25% likes your post:',
+        //   avatar: 'https://steemitimages.com/u/feruz/avatar/small',
+        //   description: 'My own Top 5 eSteem Surfer Featuresasassasasaasas',
+        //   date: 'yesterday',
+        // },
+        // {
+        //   name: 'esteemapp',
+        //   title: '25% likes your post:',
+        //   avatar: 'https://steemitimages.com/u/feruz/avatar/small',
+        //   description: 'My own Top 5 eSteem Surfer Features',
+        //   image: 'https://steemitimages.com/u/feruz/avatar/small',
+        //   date: 'yesterday',
+        // },
       ],
     };
   }
@@ -75,10 +66,7 @@ class NotificationView extends Component {
   _getRenderItem = item => (
     <View
       key={Math.random()}
-      style={[
-        styles.notificationWrapper,
-        item.isNew && styles.isNewNotification,
-      ]}
+      style={[styles.notificationWrapper, item.isNew && styles.isNewNotification]}
     >
       <Image
         style={[styles.avatar, !item.avatar && styles.hasNoAvatar]}
@@ -99,11 +87,11 @@ class NotificationView extends Component {
         </Text>
       </View>
       {item.image && (
-      <Image
-        style={styles.image}
-        source={{ uri: item.image }}
-        defaultSource={require('../../../assets/no_image.png')}
-      />
+        <Image
+          style={styles.image}
+          source={{ uri: item.image }}
+          defaultSource={require('../../../assets/no_image.png')}
+        />
       )}
     </View>
   );
@@ -115,14 +103,7 @@ class NotificationView extends Component {
       <View style={styles.container}>
         <FilterBar
           dropdownIconName="md-arrow-dropdown"
-          options={[
-            'ALL ACTIVITIES',
-            'VOTES',
-            'REPLIES',
-            'MENTIONS',
-            'FOLLOWS',
-            'REBLOGS',
-          ]}
+          options={['ALL ACTIVITIES', 'VOTES', 'REPLIES', 'MENTIONS', 'FOLLOWS', 'REBLOGS']}
           defaultText="ALL NOTIFICATION"
           onDropdownSelect={this._handleOnDropdownSelect}
           rightIconName="ios-checkmark"
@@ -135,12 +116,12 @@ class NotificationView extends Component {
             keyExtractor={item => item.email}
           />
           {/* Will remove follow lines */}
-          <ContainerHeader hasSeperator isBoldTitle title="Yesterday" />
+          {/* <ContainerHeader hasSeperator isBoldTitle title="Yesterday" />
           <FlatList
             data={notification}
             renderItem={({ item }) => this._getRenderItem(item)}
             keyExtractor={item => item.email}
-          />
+          /> */}
         </ScrollView>
       </View>
     );

src/navigation/baseNavigator.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createBottomTabNavigator } from 'react-navigation';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import {
-  Home, Notification, Profile, RootComponent,
+  Home, Notification, Profile, RootComponent, Messages,
 } from '../screens';
 
 import { PostButton } from '../components/postButton';
@@ -27,8 +27,8 @@ const BaseNavigator = createBottomTabNavigator(
         tabBarIcon: <PostButton />,
       }),
     },
-    AuthorProfile: {
-      screen: RootComponent()(Profile),
+    Messages: {
+      screen: RootComponent()(Messages),
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => <Icon name="envelope-o" color={tintColor} size={18} />,
       }),

src/screens/index.js

@@ -9,6 +9,7 @@ import { Notification } from './notification';
 import { Post } from './post';
 import { Profile } from './profile';
 import { Voters } from './voters';
+import { Messages } from './messages';
 
 // import Author from './authorProfile';
 // import SideMenu from './sideMenuScreen';
@@ -34,6 +35,7 @@ export {
   Splash,
   SteemConnect,
   Voters,
+  Messages,
   // Author,
   // SideMenu,
   // Hot,

src/screens/messages/container/messagesContainer.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+// import { connect } from 'react-redux';
+
+// Services and Actions
+
+// Middleware
+
+// Constants
+
+// Utilities
+
+// Component
+import { MessagesScreen } from '..';
+
+/*
+  *            Props Name        Description                                     Value
+  *@props -->  props name here   description here                                Value Type Here
+  *
+  */
+
+class MessagesContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycle Functions
+
+  // Component Functions
+
+  render() {
+    // eslint-disable-next-line
+    //const {} = this.props;
+
+    return <MessagesScreen {...this.props} />;
+  }
+}
+
+export default MessagesContainer;

src/screens/messages/index.js

@@ -0,0 +1,5 @@
+import MessagesScreen from './screen/messagesScreen';
+import Messages from './container/messagesContainer';
+
+export { MessagesScreen, Messages };
+export default Messages;

src/screens/messages/screen/messagesScreen.js

@@ -0,0 +1,43 @@
+import React, { Component, Fragment } from 'react';
+
+// Constants
+
+// Components
+import { Header } from '../../../components/header';
+import { NoPost } from '../../../components/basicUIElements';
+
+// Styles
+import styles from './messagesStyle';
+import MESSAGES_IMAGE from '../../../assets/keep_calm.png';
+
+class MessagesScreen extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { type }    name                - Description....
+    */
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+
+  render() {
+    return (
+      <Fragment>
+        <Header />
+        <NoPost
+          style={{ marginTop: 118 }}
+          imageStyle={styles.image}
+          source={MESSAGES_IMAGE}
+          defaultText="Messages feature is coming soon!"
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default MessagesScreen;

src/screens/messages/screen/messagesStyle.js

@@ -0,0 +1,19 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    // flexDirection: 'center',
+    //  width: 50,
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    width: 193,
+    height: 189,
+  },
+  text: {
+    color: '#788187',
+    fontWeight: 'bold',
+  },
+});

src/screens/notification/screen/notificationScreen.js

@@ -6,6 +6,11 @@ import { Notification } from '../../../components/notification';
 import { Header } from '../../../components/header';
 // Styles
 import styles from './notificationStyles';
+// Components
+import { NoPost } from '../../../components/basicUIElements';
+
+// Styles
+import MESSAGES_IMAGE from '../../../assets/keep_calm.png';
 
 class NotificationScreen extends PureComponent {
   constructor(props) {
@@ -33,7 +38,15 @@ class NotificationScreen extends PureComponent {
             <Notification />
           </View>
           <View tabLabel="Leaderboard" style={styles.leaderboardTab}>
-            <Text>Leaderboard</Text>
+            <NoPost
+              style={{ marginTop: 118 }}
+              imageStyle={{
+                width: 193,
+                height: 189,
+              }}
+              source={MESSAGES_IMAGE}
+              defaultText="Leaderboard feature is coming soon!"
+            />
           </View>
         </ScrollableTabView>
       </Fragment>