fix: support function for headerBackground

react-navigation · Oct 20, 2019 · 5a839e0 · 5a839e0
1 parent a6af39a
commit 5a839e0
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
     );
   };