Android header height consistent across screens (#1324)

* Android header height consistent across screens

* Feedback review

app/components/channel_drawer/channel_drawer.js

@@ -11,9 +11,13 @@ import {
     StyleSheet,
     View
 } from 'react-native';
-import SafeAreaView from 'app/components/safe_area_view';
+
+import {General, WebsocketEvents} from 'mattermost-redux/constants';
+import EventEmitter from 'mattermost-redux/utils/event_emitter';
 
 import Drawer from 'app/components/drawer';
+import SafeAreaView from 'app/components/safe_area_view';
+import {ViewTypes} from 'app/contants';
 import {alertErrorWithFallback} from 'app/utils/general';
 import tracker from 'app/utils/time_tracker';
 
@@ -21,9 +25,12 @@ import ChannelsList from './channels_list';
 import DrawerSwiper from './drawer_swipper';
 import TeamsList from './teams_list';
 
-import {General, WebsocketEvents} from 'mattermost-redux/constants';
-import EventEmitter from 'mattermost-redux/utils/event_emitter';
-
+const {
+    ANDROID_TOP_LANDSCAPE,
+    ANDROID_TOP_PORTRAIT,
+    IOS_TOP_LANDSCAPE,
+    IOS_TOP_PORTRAIT
+} = ViewTypes;
 const DRAWER_INITIAL_OFFSET = 40;
 const DRAWER_LANDSCAPE_OFFSET = 150;
 
@@ -381,9 +388,12 @@ export default class ChannelDrawer extends Component {
     };
 
     render() {
-        const {children} = this.props;
+        const {children, isLandscape} = this.props;
         const {openDrawerOffset} = this.state;
 
+        const androidTop = isLandscape ? ANDROID_TOP_LANDSCAPE : ANDROID_TOP_PORTRAIT;
+        const iosTop = isLandscape ? IOS_TOP_LANDSCAPE : IOS_TOP_PORTRAIT;
+
         return (
             <Drawer
                 ref='drawer'
@@ -409,8 +419,8 @@ export default class ChannelDrawer extends Component {
                 tweenDuration={100}
                 tweenHandler={this.handleDrawerTween}
                 elevation={-5}
-                bottomPanOffset={Platform.OS === 'ios' ? 46 : 64}
-                topPanOffset={Platform.OS === 'ios' ? 64 : 46}
+                bottomPanOffset={Platform.OS === 'ios' ? ANDROID_TOP_LANDSCAPE : IOS_TOP_PORTRAIT}
+                topPanOffset={Platform.OS === 'ios' ? iosTop : androidTop}
                 styles={{
                     main: {
                         shadowColor: '#000000',

app/components/channel_drawer/channels_list/channels_list.js

@@ -11,12 +11,15 @@ import {injectIntl, intlShape} from 'react-intl';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 
 import SearchBar from 'app/components/search_bar';
+import {ViewTypes} from 'app/contants';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
 import FilteredList from './filtered_list';
 import List from './list';
 import SwitchTeamsButton from './switch_teams_button';
 
+const {ANDROID_TOP_PORTRAIT} = ViewTypes;
+
 class ChannelsList extends React.PureComponent {
     static propTypes = {
         intl: intlShape.isRequired,
@@ -168,7 +171,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             borderBottomColor: changeOpacity(theme.sidebarHeaderTextColor, 0.10),
             ...Platform.select({
                 android: {
-                    height: 46
+                    height: ANDROID_TOP_PORTRAIT
                 },
                 ios: {
                     height: 44

app/components/channel_drawer/teams_list/teams_list.js

@@ -15,13 +15,14 @@ import {injectIntl, intlShape} from 'react-intl';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 
 import FormattedText from 'app/components/formatted_text';
-import {ListTypes} from 'app/constants';
+import {ListTypes, ViewTypes} from 'app/constants';
 import {wrapWithPreventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 import tracker from 'app/utils/time_tracker';
 
 import TeamsListItem from './teams_list_item';
 
+const {ANDROID_TOP_PORTRAIT} = ViewTypes;
 const VIEWABILITY_CONFIG = {
     ...ListTypes.VISIBILITY_CONFIG_DEFAULTS,
     waitForInteraction: true
@@ -165,7 +166,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             borderBottomColor: changeOpacity(theme.sidebarHeaderTextColor, 0.10),
             ...Platform.select({
                 android: {
-                    height: 46
+                    height: ANDROID_TOP_PORTRAIT
                 },
                 ios: {
                     height: 44
@@ -185,7 +186,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             width: 50,
             ...Platform.select({
                 android: {
-                    height: 46
+                    height: ANDROID_TOP_PORTRAIT
                 },
                 ios: {
                     height: 44

app/constants/view.js

@@ -68,5 +68,10 @@ export default {
     FEATURE_TOGGLE_PREFIX: 'feature_enabled_',
     EMBED_PREVIEW: 'embed_preview',
     MIN_CHANNELNAME_LENGTH: 2,
-    MAX_CHANNELNAME_LENGTH: 22
+    MAX_CHANNELNAME_LENGTH: 22,
+    ANDROID_TOP_LANDSCAPE: 46,
+    ANDROID_TOP_PORTRAIT: 56,
+    IOS_TOP_LANDSCAPE: 32,
+    IOS_TOP_PORTRAIT: 64,
+    STATUS_BAR_HEIGHT: 20
 };

app/screens/channel/channel_nav_bar/channel_nav_bar.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import {Platform, View} from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 
+import {ViewTypes} from 'app/contants';
 import {makeStyleSheetFromTheme} from 'app/utils/theme';
 
 import ChannelDrawerButton from './channel_drawer_button';
@@ -13,6 +14,14 @@ import ChannelSearchButton from './channel_search_button';
 import ChannelTitle from './channel_title';
 import SettingDrawerButton from './settings_drawer_button';
 
+const {
+    ANDROID_TOP_LANDSCAPE,
+    ANDROID_TOP_PORTRAIT,
+    IOS_TOP_LANDSCAPE,
+    IOS_TOP_PORTRAIT,
+    STATUS_BAR_HEIGHT
+} = ViewTypes;
+
 export default class ChannelNavBar extends PureComponent {
     static propTypes = {
         isLandscape: PropTypes.bool.isRequired,
@@ -35,16 +44,24 @@ export default class ChannelNavBar extends PureComponent {
         const style = getStyleFromTheme(theme);
         const padding = {paddingHorizontal: 0};
 
-        let height = 46;
-        if (Platform.OS === 'ios') {
-            height = 44;
+        let height;
+        switch (Platform.OS) {
+        case 'android':
+            height = ANDROID_TOP_PORTRAIT;
             if (isLandscape) {
-                height = 32;
+                height = ANDROID_TOP_LANDSCAPE;
+            }
+            break;
+        case 'ios':
+            height = IOS_TOP_PORTRAIT - STATUS_BAR_HEIGHT;
+            if (isLandscape) {
+                height = IOS_TOP_LANDSCAPE;
             }
 
             if (this.isX && isLandscape) {
                 padding.paddingHorizontal = 10;
             }
+            break;
         }
 
         return (

app/screens/settings/general/settings.js

@@ -152,8 +152,6 @@ class Settings extends PureComponent {
             backButtonTitle: '',
             navigatorStyle: {
                 navBarHidden: false,
-                statusBarHidden: true,
-                statusBarHideWithNavBar: true,
                 navBarTextColor: theme.sidebarHeaderTextColor,
                 navBarBackgroundColor: theme.sidebarHeaderBg,
                 navBarButtonColor: theme.sidebarHeaderTextColor