Show unread count in room's back button

app/views/RoomView/Header/Header.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, Text, StyleSheet, ScrollView
+	View, Text, StyleSheet, ScrollView, Dimensions
 } from 'react-native';
 import { emojify } from 'react-emojione';
 import removeMarkdown from 'remove-markdown';

app/views/RoomView/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	Text, View, LayoutAnimation, InteractionManager
+	Text, View, LayoutAnimation, InteractionManager, Platform
 } from 'react-native';
 import { connect } from 'react-redux';
 import { RectButton } from 'react-native-gesture-handler';
-import { SafeAreaView } from 'react-navigation';
+import { SafeAreaView, HeaderBackButton } from 'react-navigation';
 import equal from 'deep-equal';
 import moment from 'moment';
 import EJSON from 'ejson';
@@ -34,7 +34,7 @@ import I18n from '../../i18n';
 import RoomHeaderView, { RightButtons } from './Header';
 import StatusBar from '../../containers/StatusBar';
 import Separator from './Separator';
-import { COLOR_WHITE } from '../../constants/colors';
+import { COLOR_WHITE, HEADER_BACK } from '../../constants/colors';
 import debounce from '../../utils/debounce';
 import buildMessage from '../../lib/methods/helpers/buildMessage';
 
@@ -67,8 +67,12 @@ export default class RoomView extends LoggedView {
 		const t = navigation.getParam('t');
 		const tmid = navigation.getParam('tmid');
 		const isFetching = navigation.getParam('isFetching', false);
+		const unreadsCount = navigation.getParam('unreadsCount') > 0 ? navigation.getParam('unreadsCount') : null;
 		return {
-			headerTitleContainerStyle: styles.headerTitleContainerStyle,
+			headerLeftContainerStyle: {
+				position: 'relative',
+				backgroundColor: 'red'
+			},
 			headerTitle: (
 				<RoomHeaderView
 					rid={rid}
@@ -80,6 +84,19 @@ export default class RoomView extends LoggedView {
 					isFetching={isFetching}
 				/>
 			),
+			headerLeft: (
+				<View onLayout={(event) => {
+					console.warn(event.nativeEvent.layout);
+				}}
+				>
+					<HeaderBackButton
+						title={unreadsCount > 999 ? '+999' : unreadsCount}
+						backTitleVisible
+						onPress={() => navigation.goBack()}
+						tintColor={HEADER_BACK}
+					/>
+				</View>
+			),
 			headerRight: <RightButtons rid={rid} tmid={tmid} t={t} navigation={navigation} />
 		};
 	}
@@ -113,6 +130,7 @@ export default class RoomView extends LoggedView {
 		this.t = props.navigation.getParam('t');
 		this.tmid = props.navigation.getParam('tmid');
 		this.rooms = database.objects('subscriptions').filtered('rid = $0', this.rid);
+		this.chats = database.objects('subscriptions').filtered('rid != $0', this.rid);
 		this.state = {
 			joined: this.rooms.length > 0,
 			room: this.rooms[0] || { rid: this.rid, t: this.t },
@@ -122,6 +140,7 @@ export default class RoomView extends LoggedView {
 		this.beginAnimatingTimeout = setTimeout(() => this.beginAnimating = true, 300);
 		this.messagebox = React.createRef();
 		safeAddListener(this.rooms, this.updateRoom);
+		safeAddListener(this.chats, this.updateUnreadCount);
 		this.willBlurListener = props.navigation.addListener('willBlur', () => this.mounted = false);
 		this.mounted = false;
 		console.timeEnd(`${ this.constructor.name } init`);
@@ -208,6 +227,7 @@ export default class RoomView extends LoggedView {
 			}
 		}
 		this.rooms.removeAllListeners();
+		this.chats.removeAllListeners();
 		if (this.sub && this.sub.stop) {
 			this.sub.stop();
 		}
@@ -294,6 +314,17 @@ export default class RoomView extends LoggedView {
 		});
 	}, 1000, true)
 
+	// eslint-disable-next-line react/sort-comp
+	updateUnreadCount = debounce(() => {
+		const { navigation } = this.props;
+		const unreadsCount = this.chats.filtered('archived != true && open == true && unread > 0').reduce((a, b) => a + (b.unread || 0), 0);
+		if (unreadsCount !== navigation.getParam('unreadsCount')) {
+			navigation.setParams({
+				unreadsCount
+			});
+		}
+	}, 300, false)
+
 	handleConnected = () => {
 		this.init();
 		EventEmitter.removeListener('connected', this.handleConnected);

app/views/RoomView/styles.js

@@ -1,9 +1,9 @@
 import { StyleSheet } from 'react-native';
+// import { isIOS } from '../../utils/deviceInfo';
 
 import {
 	COLOR_SEPARATOR, COLOR_PRIMARY, COLOR_WHITE, COLOR_TEXT_DESCRIPTION
 } from '../../constants/colors';
-import { isIOS } from '../../utils/deviceInfo';
 import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
@@ -65,9 +65,5 @@ export default StyleSheet.create({
 		fontSize: 16,
 		...sharedStyles.textMedium,
 		...sharedStyles.textColorNormal
-	},
-	headerTitleContainerStyle: {
-		justifyContent: 'flex-start',
-		left: isIOS ? 40 : 50
 	}
 });