diff --git a/src/components/icon/view/iconStyles.js b/src/components/icon/view/iconStyles.js
index e69de29bb..f6df7d697 100644
--- a/src/components/icon/view/iconStyles.js
+++ b/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,
+ },
+});
diff --git a/src/components/icon/view/iconView.js b/src/components/icon/view/iconView.js
index 8c2653ab3..de480c87a 100644
--- a/src/components/icon/view/iconView.js
+++ b/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 (
+
+ {this._getIcon()}
+ {notification}
+
+ );
+ }
return this._getIcon();
}
}
diff --git a/src/components/notificationButton/container/notificationButtonContainer.js b/src/components/notificationButton/container/notificationButtonContainer.js
new file mode 100644
index 000000000..f0b0557b6
--- /dev/null
+++ b/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 (
+
+ );
+ }
+}
+
+const mapStateToProps = state => ({
+ unreadActivityCount: state.account.currentAccount.unread_activity_count || 0,
+});
+
+export default connect(mapStateToProps)(NotificationButtonContainer);
diff --git a/src/components/notificationButton/index.js b/src/components/notificationButton/index.js
new file mode 100644
index 000000000..bd8b82985
--- /dev/null
+++ b/src/components/notificationButton/index.js
@@ -0,0 +1,3 @@
+import NotificationButtonContainer from './container/notificationButtonContainer';
+
+export default NotificationButtonContainer;
diff --git a/src/navigation/baseNavigator.js b/src/navigation/baseNavigator.js
index 05ced6fca..555ea2cec 100644
--- a/src/navigation/baseNavigator.js
+++ b/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 }) => ,
+ tabBarIcon: ({ tintColor }) => ,
}),
},
PostButton: {