rn: add HeaderWithNavigation component

react/features/base/react/components/native/HeaderWithNavigation.js

+// @flow
+
+import React, { Component } from 'react';
+
+import { translate } from '../../../i18n';
+
+import BackButton from './BackButton';
+import ForwardButton from './ForwardButton';
+import Header from './Header';
+import HeaderLabel from './HeaderLabel';
+
+
+type Props = {
+
+    /**
+     * Boolean to set the forward button disabled.
+     */
+    forwardDisabled: boolean,
+
+    /**
+     * The i18n key of the the forward button label.
+     */
+    forwardLabelKey: ?string,
+
+    /**
+     * The i18n key of the header label (title)
+     */
+    headerLabelKey: ?string,
+
+    /**
+     * Callback to be invoked on pressing the back button.
+     */
+    onPressBack: ?Function,
+
+    /**
+     * Callback to be invoked on pressing the forward button.
+     */
+    onPressForward: ?Function,
+}
+
+/**
+ * Implements a header with the standard navigation content.
+ */
+class HeaderWithNavigation extends Component<Props> {
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { onPressBack, onPressForward } = this.props;
+
+        return (
+            <Header>
+                { onPressBack && <BackButton onPress = { onPressBack } /> }
+                <HeaderLabel labelKey = { this.props.headerLabelKey } />
+                { onPressForward && <ForwardButton
+                    disabled = { this.props.forwardDisabled }
+                    labelKey = { this.props.forwardLabelKey }
+                    onPress = { onPressForward } /> }
+            </Header>
+        );
+    }
+}
+
+export default translate(HeaderWithNavigation);

react/features/base/react/components/native/index.js

 export { default as ForwardButton } from './ForwardButton';
 export { default as Header } from './Header';
 export { default as HeaderLabel } from './HeaderLabel';
+export { default as HeaderWithNavigation } from './HeaderWithNavigation';
 export { default as Image } from './Image';
 export { default as Link } from './Link';
 export { default as LoadingIndicator } from './LoadingIndicator';

react/features/chat/components/native/Chat.js

 
 import { translate } from '../../../base/i18n';
 
-import {
-    BackButton,
-    Header,
-    HeaderLabel,
-    SlidingView
-} from '../../../base/react';
+import { HeaderWithNavigation, SlidingView } from '../../../base/react';
 import { connect } from '../../../base/redux';
 
 import AbstractChat, {
                 <KeyboardAvoidingView
                     behavior = 'padding'
                     style = { styles.chatContainer }>
-                    <Header>
-                        <BackButton onPress = { this.props._onToggleChat } />
-                        <HeaderLabel labelKey = 'chat.title' />
-                    </Header>
+                    <HeaderWithNavigation
+                        headerLabelKey = 'chat.title'
+                        onPressBack = { this.props._onToggleChat } />
                     <SafeAreaView style = { styles.backdrop }>
                         <MessageContainer messages = { this.props._messages } />
                         <ChatInputBar onSend = { this.props._onSendMessage } />

react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js

 import { translate } from '../../../../base/i18n';
 import {
     AvatarListItem,
-    BackButton,
-    ForwardButton,
-    Header,
-    HeaderLabel,
+    HeaderWithNavigation,
     Modal,
     type Item
 } from '../../../../base/react';
             <Modal
                 onRequestClose = { this._onCloseAddPeopleDialog }
                 visible = { this.props._isVisible }>
-                <Header>
-                    <BackButton onPress = { this._onCloseAddPeopleDialog } />
-                    <HeaderLabel labelKey = 'inviteDialog.header' />
-                    <ForwardButton
-                        disabled = { this._isAddDisabled() }
-                        labelKey = 'inviteDialog.send'
-                        onPress = { this._onInvite } />
-                </Header>
+                <HeaderWithNavigation
+                    forwardDisabled = { this._isAddDisabled() }
+                    forwardLabelKey = 'inviteDialog.send'
+                    headerLabelKey = 'inviteDialog.header'
+                    onPressBack = { this._onCloseAddPeopleDialog }
+                    onPressForward = { this._onInvite } />
                 <SafeAreaView style = { styles.dialogWrapper }>
                     <View
                         style = { styles.searchFieldWrapper }>

react/features/settings/components/native/SettingsView.js

 
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { translate } from '../../../base/i18n';
-import { BackButton, Header, Modal } from '../../../base/react';
+import { HeaderWithNavigation, Modal } from '../../../base/react';
 import { connect } from '../../../base/redux';
 
 import {
 import FormSectionHeader from './FormSectionHeader';
 import { normalizeUserInputURL } from '../../functions';
 import styles from './styles';
-import { HeaderLabel } from '../../../base/react/components/native';
 
 /**
  * Application information module.
      */
     _renderHeader() {
         return (
-            <Header>
-                <BackButton onPress = { this._onRequestClose } />
-                <HeaderLabel labelKey = 'settingsView.header' />
-            </Header>
+            <HeaderWithNavigation
+                headerLabelKey = 'settingsView.header'
+                onPressBack = { this._onRequestClose } />
         );
     }