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

Issue with custom header in nested Stack navigator #29009

Open
MHB2011 opened this issue May 21, 2024 · 0 comments
Open

Issue with custom header in nested Stack navigator #29009

MHB2011 opened this issue May 21, 2024 · 0 comments
Labels
needs review Issue is ready to be reviewed by a maintainer Router expo-router

Comments

@MHB2011
Copy link

MHB2011 commented May 21, 2024

Minimal reproducible example

https://github.com/MHB2011/expo-router-custom-header-issue

Which package manager are you using? (Yarn is recommended)

yarn

If the issue is web-related, please select the bundler (web.bundler in the app.json)

metro

Summary

In my expo project that works on all 3 platforms (web, ios, android) i have a custom header that is defined in the Root layout.
The header is a custom component that is passed to the Stack navigator as a screen option.
The issue is that when i navigate to a screen that is wrapped in another layout the headerTitle is not being displayed.

I have a folder strusture like this:

src/
  app/
    _layout.tsx
    (app)/
      _layout.tsx
      index.tsx

In the Root layout i return the Stack navigator with a custom header like this:

<Stack
  initialRouteName="(app)/index"
  screenOptions={{
    header: (props) => <Header {...props} />,
  }}
/>

In the App layout i return the Slot component like this:

return <Slot />;

In the (app)/index.tsx i modify the Screen options like this:

<Stack.Screen
  options={{
    headerTitle: () => <Logo size={85} />,
  }}
/>

The issue is that the headerTitle is not being displayed when i navigate to the (app)/index screen.
The headerTitle becomes undefined. Its probably overriden by the Slot component ?
If i remove (app)/_layout.tsx everything works fine.

I have tried defining Screen options inside the _layout.tsx but it doesn't work.

Environment

expo-env-info 1.2.0 environment info:
System:
OS: macOS 14.3.1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
Watchman: 2023.11.13.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.14.3 - /var/folders/z9/tj28s4293mq7l0bwfbz_b68w0000gn/T/frum_24429_1716277080576/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.5, iOS 17.5, macOS 14.5, tvOS 17.5, visionOS 1.2, watchOS 10.5
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10811636
Xcode: 15.4/15F31d - /usr/bin/xcodebuild
npmPackages:
expo: ~51.0.8 => 51.0.8
expo-router: ~3.5.14 => 3.5.14
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.74.1 => 0.74.1
react-native-web: ~0.19.10 => 0.19.11
npmGlobalPackages:
eas-cli: 9.0.7
Expo Workflow: managed

@MHB2011 MHB2011 added needs validation Issue needs to be validated Router expo-router labels May 21, 2024
@expo-bot expo-bot added needs review Issue is ready to be reviewed by a maintainer and removed needs validation Issue needs to be validated labels May 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs review Issue is ready to be reviewed by a maintainer Router expo-router
Projects
None yet
Development

No branches or pull requests

2 participants