From 8e052c2a55834b141bb3fc75b996769bf9b0542a Mon Sep 17 00:00:00 2001 From: enahum Date: Mon, 4 Dec 2017 11:59:14 -0300 Subject: [PATCH] Fix navbar when status bar is not visible (#1248) --- .../safe_area_view/safe_area_view.ios.js | 74 +++++++++++++------ 1 file changed, 52 insertions(+), 22 deletions(-) diff --git a/app/components/safe_area_view/safe_area_view.ios.js b/app/components/safe_area_view/safe_area_view.ios.js index b9a523e3d..b27ba6caf 100644 --- a/app/components/safe_area_view/safe_area_view.ios.js +++ b/app/components/safe_area_view/safe_area_view.ios.js @@ -3,11 +3,13 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {Keyboard, View} from 'react-native'; +import {Keyboard, NativeModules, View} from 'react-native'; import DeviceInfo from 'react-native-device-info'; import SafeArea from 'react-native-safe-area'; import Orientation from 'react-native-orientation'; +const {StatusBarManager} = NativeModules; + export default class SafeAreaIos extends PureComponent { static propTypes = { backgroundColor: PropTypes.string, @@ -37,7 +39,8 @@ export default class SafeAreaIos extends PureComponent { keyboard: false, safeAreaInsets: { top: 20, left: 0, bottom: 15, right: 0 - } + }, + statusBarHeight: 20 }; } @@ -49,6 +52,7 @@ export default class SafeAreaIos extends PureComponent { Orientation.addOrientationListener(this.getSafeAreaInsets); this.keyboardDidShowListener = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); this.keyboardDidHideListener = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); + this.getStatusBarHeight(); } componentWillUnmount() { @@ -57,7 +61,21 @@ export default class SafeAreaIos extends PureComponent { this.keyboardDidHideListener.remove(); } + getStatusBarHeight = () => { + try { + StatusBarManager.getHeight( + (statusBarFrameData) => { + this.setState({statusBarHeight: statusBarFrameData.height}); + } + ); + } catch (e) { + // not needed + } + }; + getSafeAreaInsets = () => { + this.getStatusBarHeight(); + if (this.isX) { SafeArea.getSafeAreaInsetsForRootView().then((result) => { const {safeAreaInsets} = result; @@ -83,13 +101,13 @@ export default class SafeAreaIos extends PureComponent { } }; - render() { - const {backgroundColor, children, excludeHeader, forceTop, keyboardOffset, navBarBackgroundColor, theme} = this.props; - const {keyboard, safeAreaInsets} = this.state; + renderTopBar = () => { + const {safeAreaInsets, statusBarHeight} = this.state; + const {excludeHeader, forceTop, navBarBackgroundColor, theme} = this.props; + const hideTopBar = excludeHeader || !statusBarHeight; - let bgColor = theme.centerChannelBg; - if (backgroundColor) { - bgColor = backgroundColor; + if (hideTopBar) { + return null; } let topColor = theme.sidebarHeaderBg; @@ -97,16 +115,36 @@ export default class SafeAreaIos extends PureComponent { topColor = navBarBackgroundColor; } + let top = safeAreaInsets.top; + if (forceTop && this.isX && !hideTopBar) { + top = forceTop; + } + + return ( + + ); + }; + + render() { + const {backgroundColor, children, keyboardOffset, theme} = this.props; + const {keyboard, safeAreaInsets} = this.state; + + let bgColor = theme.centerChannelBg; + if (backgroundColor) { + bgColor = backgroundColor; + } + let offset = 0; if (keyboardOffset && this.isX) { offset = keyboardOffset; } - let top = safeAreaInsets.top; - if (forceTop && this.isX && !excludeHeader) { - top = forceTop; - } - return ( - {!excludeHeader && - - } + {this.renderTopBar()} {children} );