From 785af36335777ec0b82daea7d01eeed70f59e1ec Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Mon, 9 Apr 2018 15:31:43 -0400
Subject: [PATCH] Use Header.HEIGHT instead of measuring to avoid flicker
 (#3940)

---
 .../__snapshots__/StackNavigator-test.js.snap         |  2 --
 packages/react-navigation/src/views/Header/Header.js  | 11 +----------
 .../src/views/StackView/StackViewLayout.js            | 10 +++-------
 3 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap b/packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
index 7e3387ea..b0badb14 100644
--- a/packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
+++ b/packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
@@ -77,7 +77,6 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
     </View>
     <View
       collapsable={undefined}
-      onLayout={[Function]}
       style={
         Object {
           "transform": Array [
@@ -278,7 +277,6 @@ exports[`StackNavigator renders successfully 1`] = `
     </View>
     <View
       collapsable={undefined}
-      onLayout={[Function]}
       style={
         Object {
           "transform": Array [
diff --git a/packages/react-navigation/src/views/Header/Header.js b/packages/react-navigation/src/views/Header/Header.js
index 1156afeb..a29d42db 100644
--- a/packages/react-navigation/src/views/Header/Header.js
+++ b/packages/react-navigation/src/views/Header/Header.js
@@ -47,12 +47,6 @@ class Header extends React.PureComponent {
     widths: {},
   };
 
-  _handleOnLayout = e => {
-    if (typeof this.props.onLayout === 'function') {
-      this.props.onLayout(e.nativeEvent.layout);
-    }
-  };
-
   _getHeaderTitleString(scene) {
     const options = scene.descriptor.options;
     if (typeof options.headerTitle === 'string') {
@@ -494,10 +488,7 @@ class Header extends React.PureComponent {
     const forceInset = headerForceInset || { top: 'always', bottom: 'never' };
 
     return (
-      <Animated.View
-        style={this.props.layoutInterpolator(this.props)}
-        onLayout={this._handleOnLayout}
-      >
+      <Animated.View style={this.props.layoutInterpolator(this.props)}>
         <SafeAreaView forceInset={forceInset} style={containerStyles}>
           <View style={StyleSheet.absoluteFill}>
             {options.headerBackground}
diff --git a/packages/react-navigation/src/views/StackView/StackViewLayout.js b/packages/react-navigation/src/views/StackView/StackViewLayout.js
index 7b2ffb11..fd583bed 100644
--- a/packages/react-navigation/src/views/StackView/StackViewLayout.js
+++ b/packages/react-navigation/src/views/StackView/StackViewLayout.js
@@ -94,11 +94,7 @@ class StackViewLayout extends React.Component {
     }
 
     // Handle the case where the header option is a function, and provide the default
-    const renderHeader =
-      header ||
-      (props => (
-        <Header onLayout={layout => (this._headerLayout = layout)} {...props} />
-      ));
+    const renderHeader = header || (props => <Header {...props} />);
 
     const {
       headerLeftInterpolator,
@@ -453,8 +449,8 @@ class StackViewLayout extends React.Component {
     const hasHeader = options.header !== null;
     const headerMode = this._getHeaderMode();
     let marginTop = 0;
-    if (!hasHeader && headerMode === 'float' && this._headerLayout) {
-      marginTop = -this._headerLayout.height;
+    if (!hasHeader && headerMode === 'float') {
+      marginTop = -Header.HEIGHT;
     }
 
     return (