rn: add HeaderWithNavigation component

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

@@ -0,0 +1,66 @@
+// @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

@@ -8,6 +8,7 @@ export { default as Container } from './Container';
 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

@@ -5,12 +5,7 @@ import { KeyboardAvoidingView, SafeAreaView } from 'react-native';
 
 import { translate } from '../../../base/i18n';
 
-import {
+import { HeaderWithNavigation, SlidingView } from '../../../base/react';
-    BackButton,
-    Header,
-    HeaderLabel,
-    SlidingView
-} from '../../../base/react';
 import { connect } from '../../../base/redux';
 
 import AbstractChat, {
@@ -41,10 +36,9 @@ class Chat extends AbstractChat<Props> {
                 <KeyboardAvoidingView
                     behavior = 'padding'
                     style = { styles.chatContainer }>
-                    <Header>
+                    <HeaderWithNavigation
-                        <BackButton onPress = { this.props._onToggleChat } />
+                        headerLabelKey = 'chat.title'
-                        <HeaderLabel labelKey = 'chat.title' />
+                        onPressBack = { this.props._onToggleChat } />
-                    </Header>
                     <SafeAreaView style = { styles.backdrop }>
                         <MessageContainer messages = { this.props._messages } />
                         <ChatInputBar onSend = { this.props._onSendMessage } />

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

@@ -16,10 +16,7 @@ import { Icon } from '../../../../base/font-icons';
 import { translate } from '../../../../base/i18n';
 import {
     AvatarListItem,
-    BackButton,
+    HeaderWithNavigation,
-    ForwardButton,
-    Header,
-    HeaderLabel,
     Modal,
     type Item
 } from '../../../../base/react';
@@ -146,14 +143,12 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
             <Modal
                 onRequestClose = { this._onCloseAddPeopleDialog }
                 visible = { this.props._isVisible }>
-                <Header>
+                <HeaderWithNavigation
-                    <BackButton onPress = { this._onCloseAddPeopleDialog } />
+                    forwardDisabled = { this._isAddDisabled() }
-                    <HeaderLabel labelKey = 'inviteDialog.header' />
+                    forwardLabelKey = 'inviteDialog.send'
-                    <ForwardButton
+                    headerLabelKey = 'inviteDialog.header'
-                        disabled = { this._isAddDisabled() }
+                    onPressBack = { this._onCloseAddPeopleDialog }
-                        labelKey = 'inviteDialog.send'
+                    onPressForward = { this._onInvite } />
-                        onPress = { this._onInvite } />
-                </Header>
                 <SafeAreaView style = { styles.dialogWrapper }>
                     <View
                         style = { styles.searchFieldWrapper }>

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

@@ -5,7 +5,7 @@ import { Alert, NativeModules, SafeAreaView, ScrollView, Switch, Text, TextInput
 
 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 {
@@ -18,7 +18,6 @@ import FormRow from './FormRow';
 import FormSectionHeader from './FormSectionHeader';
 import { normalizeUserInputURL } from '../../functions';
 import styles from './styles';
-import { HeaderLabel } from '../../../base/react/components/native';
 
 /**
  * Application information module.
@@ -213,10 +212,9 @@ class SettingsView extends AbstractSettingsView<Props> {
      */
     _renderHeader() {
         return (
-            <Header>
+            <HeaderWithNavigation
-                <BackButton onPress = { this._onRequestClose } />
+                headerLabelKey = 'settingsView.header'
-                <HeaderLabel labelKey = 'settingsView.header' />
+                onPressBack = { this._onRequestClose } />
-            </Header>
         );
     }