status-im/react-navigation
2
0
Fork 0
mirror of https://github.com/status-im/react-navigation.git synced 2025-02-24 09:08:15 +00:00
Code Issues Projects Releases Wiki Activity

Fix header hardcoded height to accound for iPhone X and orientation changes (#4017)

Browse Source
This commit is contained in:
Janic Duplessis 2018-04-20 09:34:33 -04:00 committed by Brent Vatne
parent abd5200739
commit e5d8d2c216
1 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/StackView/StackViewLayout.js
View File

@ -9,6 +9,7 @@ import {
View,
I18nManager,
Easing,
Dimensions,
} from 'react-native';
import Card from './StackViewCard';
@ -16,6 +17,7 @@ import Header from '../Header/Header';
import NavigationActions from '../../NavigationActions';
import StackActions from '../../routers/StackActions';
import SceneView from '../SceneView';
import withOrientation from '../withOrientation';
import { NavigationProvider } from '../NavigationContext';
import TransitionConfigs from './StackViewTransitionConfigs';
@ -23,6 +25,13 @@ import * as ReactNativeFeatures from '../../utils/ReactNativeFeatures';
const emptyFunction = () => {};
const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window');
const IS_IPHONE_X =
Platform.OS === 'ios' &&
!Platform.isPad &&
!Platform.isTVOS &&
(WINDOW_HEIGHT === 812 || WINDOW_WIDTH === 812);
const EaseInOut = Easing.inOut(Easing.ease);
/**
@ -450,7 +459,19 @@ class StackViewLayout extends React.Component {
const headerMode = this._getHeaderMode();
let marginTop = 0;
if (!hasHeader && headerMode === 'float') {
marginTop = -Header.HEIGHT;
const { isLandscape } = this.props;
let headerHeight;
if (Platform.OS === 'android') {
// TODO: Need to handle translucent status bar.
headerHeight = 56;
} else if (isLandscape && !Platform.isPad) {
headerHeight = 52;
} else if (IS_IPHONE_X) {
headerHeight = 88;
} else {
headerHeight = 64;
}
marginTop = -headerHeight;
}
return (
@ -480,4 +501,4 @@ const styles = StyleSheet.create({
},
});
export default StackViewLayout;
export default withOrientation(StackViewLayout);