[RN] Extract header components for reuse

react/features/settings/components/native/BackButton.js → react/features/base/react/components/native/BackButton.js

@@ -3,8 +3,9 @@
 import React, { Component } from 'react';
 import { TouchableOpacity } from 'react-native';
 
-import { Icon } from '../../../base/font-icons';
-import { Header } from '../../../base/react';
+import { Icon } from '../../../font-icons';
+
+import styles from './styles';
 
 /**
  * The type of the React {@code Component} props of {@link BackButton}
@@ -40,7 +41,7 @@ export default class BackButton extends Component<Props> {
                 <Icon
                     name = { 'arrow_back' }
                     style = { [
-                        Header.buttonStyle,
+                        styles.headerButton,
                         this.props.style
                     ] } />
             </TouchableOpacity>

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

@@ -0,0 +1,48 @@
+// @flow
+
+import React, { Component } from 'react';
+import { Text } from 'react-native';
+
+import { translate } from '../../../i18n';
+
+import styles from './styles';
+
+/**
+ * The type of the React {@code Component} props of {@link HeaderLabel}
+ */
+type Props = {
+
+    /**
+     * The i18n key of the label to be rendered.
+     */
+    labelKey: string,
+
+    /**
+     * The i18n translate function.
+     */
+    t: Function
+};
+
+/**
+ * A component rendering a standard label in the header.
+ */
+class HeaderLabel extends Component<Props> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <Text
+                style = { [
+                    styles.headerText
+                ] }>
+                { this.props.t(this.props.labelKey) }
+            </Text>
+        );
+    }
+}
+
+export default translate(HeaderLabel);

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

@@ -1,5 +1,7 @@
+export { default as BackButton } from './BackButton';
 export { default as Container } from './Container';
 export { default as Header } from './Header';
+export { default as HeaderLabel } from './HeaderLabel';
 export { default as Link } from './Link';
 export { default as LoadingIndicator } from './LoadingIndicator';
 export { default as NavigateSectionListEmptyComponent } from

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

@@ -7,25 +7,24 @@ import {
     SafeAreaView,
     ScrollView,
     Switch,
-    Text,
     TextInput,
     View
 } from 'react-native';
 import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
-import { Header } from '../../../base/react';
+import { BackButton, Header } from '../../../base/react';
 
 import {
     AbstractSettingsView,
     _mapStateToProps
 } from '../AbstractSettingsView';
 import { setSettingsViewVisible } from '../../actions';
-import BackButton from './BackButton';
 import FormRow from './FormRow';
 import FormSectionHeader from './FormSectionHeader';
 import { normalizeUserInputURL } from '../../functions';
 import styles from './styles';
+import { HeaderLabel } from '../../../base/react/components/native';
 
 /**
  * The native container rendering the app settings page.
@@ -205,13 +204,7 @@ class SettingsView extends AbstractSettingsView {
         return (
             <Header>
                 <BackButton onPress = { this._onRequestClose } />
-                <Text
-                    style = { [
-                        styles.text,
-                        Header.textStyle
-                    ] }>
-                    { this.props.t('settingsView.header') }
-                </Text>
+                <HeaderLabel labelKey = 'settingsView.header' />
             </Header>
         );
     }