Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: pass all props to custom headerLeft #9806

Merged
merged 1 commit into from Aug 9, 2021
Merged

Conversation

vonovak
Copy link
Member

@vonovak vonovak commented Aug 9, 2021

I'm having an issue with a custom back button in v6: I'm passing a react component as headerLeft and I'm expecting it to receive some props such as onPress (see v5.

) but in v6, these props are no longer passed, they are only passed to the default back button ( ).
This PR fixes it.

test plan: use the following diff in the example app. Currently, the button does not react to presses. With the fix, it works as expected (takes user to previous screen).

diff --git a/example/src/Screens/SimpleStack.tsx b/example/src/Screens/SimpleStack.tsx
index d0f98122..ea858796 100644
--- a/example/src/Screens/SimpleStack.tsx
+++ b/example/src/Screens/SimpleStack.tsx
@@ -1,3 +1,4 @@
+import { HeaderBackButton } from '@react-navigation/elements';
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
@@ -118,7 +119,12 @@ export default function SimpleStackScreen({
   }, [navigation]);

   return (
-    <SimpleStack.Navigator screenOptions={screenOptions}>
+    <SimpleStack.Navigator
+      screenOptions={{
+        ...screenOptions,
+        headerLeft: (props) => <HeaderBackButton {...props} />,
+      }}
+    >
       <SimpleStack.Screen
         name="Article"
         component={ArticleScreen}

@netlify
Copy link

netlify bot commented Aug 9, 2021

✔️ Deploy Preview for react-navigation-example ready!

🔨 Explore the source changes: 042efe0

🔍 Inspect the deploy log: https://app.netlify.com/sites/react-navigation-example/deploys/61114d5dc200f2000717ef87

😎 Browse the preview: https://deploy-preview-9806--react-navigation-example.netlify.app/

@github-actions
Copy link

github-actions bot commented Aug 9, 2021

The Expo app for the example from this branch is ready!

expo.dev/@react-navigation/react-navigation-example?release-channel=pr-9806

@codecov-commenter
Copy link

Codecov Report

Merging #9806 (042efe0) into main (d17bf14) will increase coverage by 0.01%.
The diff coverage is 71.42%.

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #9806      +/-   ##
==========================================
+ Coverage   74.72%   74.74%   +0.01%     
==========================================
  Files         159      159              
  Lines        4701     4704       +3     
  Branches     1768     1770       +2     
==========================================
+ Hits         3513     3516       +3     
  Misses       1157     1157              
  Partials       31       31              
Impacted Files Coverage Δ
...ackages/stack/src/views/Header/HeaderContainer.tsx 67.27% <55.55%> (-0.66%) ⬇️
packages/stack/src/views/Header/HeaderSegment.tsx 60.46% <100.00%> (+3.32%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4d8a7ee...042efe0. Read the comment docs.

@satya164 satya164 merged commit 22799fc into main Aug 9, 2021
@satya164 satya164 deleted the fix/header-props-not-passed branch August 9, 2021 22:25
satya164 pushed a commit that referenced this pull request Aug 9, 2021
similar to #9806 but for headerTitle's onlayout prop
YAfullStack pushed a commit to YAfullStack/React-navigation that referenced this pull request Dec 4, 2021
darkhorse-coder pushed a commit to darkhorse-coder/react-navigation that referenced this pull request Apr 7, 2022
nenad0212 pushed a commit to nenad0212/temp1 that referenced this pull request Sep 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants