Added unread norification count to tabbar

src/components/icon/view/iconStyles.js

@@ -0,0 +1,18 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  notification: {
+    backgroundColor: '$primaryRed',
+    color: '$white',
+    textAlign: 'center',
+    borderRadius: 25,
+    borderWidth: 1,
+    borderColor: '$white',
+    alignSelf: 'center',
+    paddingHorizontal: 4,
+    fontSize: 10,
+    position: 'absolute',
+    right: -5,
+    top: -7,
+  },
+});

src/components/icon/view/iconView.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Platform } from 'react-native';
+import { Platform, View, Text } from 'react-native';
 
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -9,6 +9,8 @@ import Feather from 'react-native-vector-icons/Feather';
 import AntDesign from 'react-native-vector-icons/AntDesign';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
+import styles from './iconStyles';
+
 class IconView extends Component {
   constructor(props) {
     super(props);
@@ -59,6 +61,15 @@ class IconView extends Component {
   };
 
   render() {
+    const { notification } = this.props;
+    if (notification) {
+      return (
+        <View>
+          {this._getIcon()}
+          <Text style={styles.notification}>{notification}</Text>
+        </View>
+      );
+    }
     return this._getIcon();
   }
 }

src/components/notificationButton/container/notificationButtonContainer.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+// Components
+import { Icon } from '../..';
+
+class NotificationButtonContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const { color, unreadActivityCount } = this.props;
+    return (
+      <Icon
+        iconType="FontAwesome"
+        notification={unreadActivityCount}
+        name="bell-o"
+        color={color}
+        size={18}
+      />
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  unreadActivityCount: state.account.currentAccount.unread_activity_count || 0,
+});
+
+export default connect(mapStateToProps)(NotificationButtonContainer);

src/components/notificationButton/index.js

@@ -0,0 +1,3 @@
+import NotificationButtonContainer from './container/notificationButtonContainer';
+
+export default NotificationButtonContainer;

src/navigation/baseNavigator.js

@@ -6,6 +6,7 @@ import {
 } from '../screens';
 
 import { PostButton } from '../components/postButton';
+import NotificationButton from '../components/notificationButton';
 
 const BaseNavigator = createBottomTabNavigator(
   {
@@ -18,7 +19,7 @@ const BaseNavigator = createBottomTabNavigator(
     Notification: {
       screen: RootComponent()(Notification),
       navigationOptions: () => ({
-        tabBarIcon: ({ tintColor }) => <Icon name="bell-o" color={tintColor} size={18} />,
+        tabBarIcon: ({ tintColor }) => <NotificationButton color={tintColor} />,
       }),
     },
     PostButton: {