From 5a839e0174a782b858cec358279cc81b91ad5650 Mon Sep 17 00:00:00 2001
From: "satyajit.happy" <satyajit.happy@gmail.com>
Date: Sun, 20 Oct 2019 05:16:02 +0200
Subject: [PATCH] fix: support function for headerBackground

---
 example/src/HeaderBackgrounds.js                 | 4 ++--
 src/navigators/__tests__/StackNavigator.test.tsx | 4 ++--
 src/types.tsx                                    | 2 +-
 src/views/Header/Header.tsx                      | 5 ++++-
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/example/src/HeaderBackgrounds.js b/example/src/HeaderBackgrounds.js
index 571960620..3fca94f99 100644
--- a/example/src/HeaderBackgrounds.js
+++ b/example/src/HeaderBackgrounds.js
@@ -21,7 +21,7 @@ function createHeaderBackgroundExample(options = {}) {
         navigationOptions: {
           headerTitle: 'Login Screen',
           headerTintColor: '#fff',
-          headerBackground: (
+          headerBackground: () => (
             <View style={{ flex: 1, backgroundColor: '#FF0066' }} />
           ),
         },
@@ -41,7 +41,7 @@ function createHeaderBackgroundExample(options = {}) {
         navigationOptions: {
           headerTitle: 'Games Screen',
           headerTintColor: '#fff',
-          headerBackground: (
+          headerBackground: () => (
             <View style={{ flex: 1, backgroundColor: '#3388FF' }} />
           ),
         },
diff --git a/src/navigators/__tests__/StackNavigator.test.tsx b/src/navigators/__tests__/StackNavigator.test.tsx
index 7a1fbe52e..93be1e9de 100644
--- a/src/navigators/__tests__/StackNavigator.test.tsx
+++ b/src/navigators/__tests__/StackNavigator.test.tsx
@@ -64,7 +64,7 @@ describe('StackNavigator', () => {
       Home: {
         screen: HomeScreen,
         navigationOptions: {
-          headerRight: <View />,
+          headerRight: () => <View />,
         },
       },
     });
@@ -90,7 +90,7 @@ describe('StackNavigator', () => {
 
     class A extends React.Component {
       static navigationOptions = {
-        headerRight: <TestComponentWithNavigation onPress={spy} />,
+        headerRight: () => <TestComponentWithNavigation onPress={spy} />,
       };
 
       render() {
diff --git a/src/types.tsx b/src/types.tsx
index e3d3b714d..db5dd0e9e 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -122,7 +122,7 @@ export type NavigationStackOptions = {
     title?: string | null;
   }) => React.ReactNode;
   headerPressColorAndroid?: string;
-  headerBackground?: React.ReactNode;
+  headerBackground?: (() => React.ReactNode) | React.ReactNode;
   headerTransparent?: boolean;
   headerStyle?: StyleProp<ViewStyle>;
   headerForceInset?: React.ComponentProps<typeof SafeAreaView>['forceInset'];
diff --git a/src/views/Header/Header.tsx b/src/views/Header/Header.tsx
index 8233180bf..bfb0f7d91 100644
--- a/src/views/Header/Header.tsx
+++ b/src/views/Header/Header.tsx
@@ -440,7 +440,10 @@ class Header extends React.PureComponent<Props, State> {
     return this.renderSubView(
       { ...props, style: StyleSheet.absoluteFill },
       'background',
-      () => options.headerBackground,
+      () =>
+        typeof options.headerBackground === 'function'
+          ? options.headerBackground()
+          : options.headerBackground,
       this.props.backgroundInterpolator
     );
   };