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: {