PLT-5611 Add Channel Name to thread view title (#294)

app/navigation/routes.js

@@ -133,10 +133,7 @@ export const Routes = {
     Thread: {
         key: 'Thread',
         transition: RouteTransitions.Horizontal,
-        component: Thread,
-        navigationProps: {
-            title: {id: 'mobile.routes.thread', defaultMessage: 'Thread'}
-        }
+        component: Thread
     },
     UserProfile: {
         key: 'UserProfile',

app/scenes/thread/thread.js

@@ -4,6 +4,7 @@
 import React, {PropTypes, PureComponent} from 'react';
 import {StatusBar, StyleSheet} from 'react-native';
 
+import ThreadTitle from './thread_title';
 import KeyboardLayout from 'app/components/layout/keyboard_layout';
 import PostList from 'app/components/post_list';
 import PostTextbox from 'app/components/post_textbox';
@@ -32,6 +33,12 @@ export default class Thread extends PureComponent {
         posts: PropTypes.array.isRequired
     };
 
+    static navigationProps = {
+        renderTitleComponent: () => {
+            return <ThreadTitle/>;
+        }
+    };
+
     componentWillUnmount() {
         this.props.actions.selectPost('');
     }

app/scenes/thread/thread_title.js

@@ -0,0 +1,47 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React, {PropTypes} from 'react';
+import {connect} from 'react-redux';
+import {
+    View
+} from 'react-native';
+
+import {getCurrentChannel} from 'service/selectors/entities/channels';
+import {getTheme} from 'service/selectors/entities/preferences';
+
+import FormattedText from 'app/components/formatted_text';
+
+function ThreadTitle(props) {
+    const {currentChannel, theme} = props;
+    const channelName = currentChannel.display_name;
+
+    return (
+        <View style={{alignItems: 'center', justifyContent: 'center', flex: 1, marginHorizontal: 50}}>
+            <FormattedText
+                id='mobile.routes.thread'
+                defaultMessage='{channelName} Thread'
+                values={{channelName}}
+                style={{color: theme.sidebarHeaderTextColor, fontSize: 15, fontWeight: 'bold', textAlign: 'center'}}
+            />
+        </View>
+    );
+}
+
+ThreadTitle.propTypes = {
+    currentChannel: PropTypes.object.isRequired,
+    theme: PropTypes.object
+};
+
+ThreadTitle.defaultProps = {
+    theme: {}
+};
+
+function mapStateToProps(state) {
+    return {
+        currentChannel: getCurrentChannel(state),
+        theme: getTheme(state)
+    };
+}
+
+export default connect(mapStateToProps)(ThreadTitle);

assets/base/i18n/en.json

@@ -1518,7 +1518,7 @@
   "mobile.routes.channel_members.action": "{term} Members",
   "mobile.routes.channel_members.action_message": "You must select at least one member to {term} {prep} the channel.",
   "mobile.routes.channel_members.action_message_confirm": "Are you sure you want to {term} the selected members {prep} the channel?",
-  "mobile.routes.thread": "Thread",
+  "mobile.routes.thread": "{channelName} Thread",
   "mobile.routes.user_profile": "Profile",
   "mobile.routes.user_profile.send_message": "Send Message",
   "more_channels.close": "Close",