Add headerBackImage, closes react-navigation#1999

sourcecode911 · Mar 9, 2020 · a7f11c9 · a7f11c9
1 parent cd0cc63
commit a7f11c9
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 9 deletions.
diff --git a/examples/NavigationPlayground/js/SimpleStack.js b/examples/NavigationPlayground/js/SimpleStack.js
@@ -28,6 +28,15 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
           onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
           title="Go to a photos screen"
         />
+        <Button
+          onPress={() =>
+            navigation.navigate('Profile', {
+              name: 'Dog',
+              headerBackImage: require('./assets/dog-back.png'),
+            })
+          }
+          title="Custom back button"
+        />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
         <StatusBar barStyle="default" />
       </SafeAreaView>
@@ -129,9 +138,9 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
 
 const MyProfileScreen = ({ navigation }) => (
   <MyNavScreen
-    banner={`${navigation.state.params.mode === 'edit'
-      ? 'Now Editing '
-      : ''}${navigation.state.params.name}'s Profile`}
+    banner={`${navigation.state.params.mode === 'edit' ? 'Now Editing ' : ''}${
+      navigation.state.params.name
+    }'s Profile`}
     navigation={navigation}
   />
 );
@@ -141,14 +150,16 @@ MyProfileScreen.navigationOptions = props => {
   const { state, setParams } = navigation;
   const { params } = state;
   return {
+    headerBackImage: params.headerBackImage,
     headerTitle: `${params.name}'s Profile!`,
     // Render a button on the right side of the header.
     // When pressed switches the screen to edit mode.
     headerRight: (
       <Button
         title={params.mode === 'edit' ? 'Done' : 'Edit'}
         onPress={() =>
-          setParams({ mode: params.mode === 'edit' ? '' : 'edit' })}
+          setParams({ mode: params.mode === 'edit' ? '' : 'edit' })
+        }
       />
     ),
   };

diff --git a/examples/NavigationPlayground/js/assets/dog-back.png b/examples/NavigationPlayground/js/assets/dog-back.png
diff --git a/src/TypeDefinition.js b/src/TypeDefinition.js
@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import type { StyleObj } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 
-import { Animated } from 'react-native';
+import { Animated, Image } from 'react-native';
 
 export type ViewStyleProp = StyleObj;
 export type TextStyleProp = StyleObj;
@@ -315,6 +315,7 @@ export type NavigationStackScreenOptions = NavigationScreenOptions & {
   headerTintColor?: string,
   headerLeft?: React.Node | React.ComponentType<any>,
   headerBackTitle?: string,
+  headerBackImage?: Image.propTypes.source,
   headerTruncatedBackTitle?: string,
   headerBackTitleStyle?: TextStyleProp,
   headerPressColorAndroid?: string,

diff --git a/src/views/Header/Header.js b/src/views/Header/Header.js
@@ -141,6 +141,7 @@ class Header extends React.PureComponent {
         onPress={this._navigateBack}
         pressColorAndroid={options.headerPressColorAndroid}
         tintColor={options.headerTintColor}
+        buttonImage={options.headerBackImage}
         title={backButtonTitle}
         truncatedTitle={truncatedBackButtonTitle}
         titleStyle={options.headerBackTitleStyle}

diff --git a/src/views/Header/HeaderBackButton.js b/src/views/Header/HeaderBackButton.js
@@ -17,6 +17,8 @@ class HeaderBackButton extends React.PureComponent {
       ios: '#037aff',
     }),
     truncatedTitle: 'Back',
+    // eslint-disable-next-line global-require
+    buttonImage: require('../assets/back-icon.png'),
   };
 
   state = {};
@@ -32,6 +34,7 @@ class HeaderBackButton extends React.PureComponent {
 
   render() {
     const {
+      buttonImage,
       onPress,
       pressColorAndroid,
       width,
@@ -48,9 +51,6 @@ class HeaderBackButton extends React.PureComponent {
 
     const backButtonTitle = renderTruncated ? truncatedTitle : title;
 
-    // eslint-disable-next-line global-require
-    const asset = require('../assets/back-icon.png');
-
     return (
       <TouchableItem
         accessibilityComponentType="button"
@@ -70,7 +70,7 @@ class HeaderBackButton extends React.PureComponent {
               !!title && styles.iconWithTitle,
               !!tintColor && { tintColor },
             ]}
-            source={asset}
+            source={buttonImage}
           />
           {Platform.OS === 'ios' &&
             typeof backButtonTitle === 'string' && (