react-navigation / react-navigation/react-navigation
Custom component in headerTitle has wrong position
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
Current behavior
I have following config in navigation (basically I want the title to wrap to two lines if it does not fit)
<Stack.Screen
name={"ScreenName}
component={ScreenComponent}
options={() => ({
headerTitle: () => (
<Text
numberOfLines={2}
ellipsizeMode="tail"
adjustsFontSizeToFit
style={{ marginRight: 64, flex: 1, textAlign: 'center'}}
>
Custom header title component
</Text>
),
})}
/>
leads to correct position on iPhone 11 pro max, but wrong on iPhone 14 pro. It's also good on iPhone 13 pro. Don't mind the horizontal alignment, I upgraded to current versions and something works different, works fine on versions I actually use in project.
Replacing the Text component with simple <Text>Custom header title component</Text>
In the linked repro, the behavior is different, I will try to identify why, but there's still some issue:
- after rendering the first screen, the title is at the bottom
- after navigating, the title on the next screen is in correct centered position
- after navigation back to the first screen, the title on the first screen is moved to correct centered position
Expected behavior
custom component in headerTitle is rendered same on iPhone 11 and iPhone 14
Reproduction
https://github.com/CptFabulouso/react-navigation-header-issue
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-bottom-tabs
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
Environment
- I've removed the packages that I don't use
| package | version |
|---|---|
| @react-navigation/native | ^6.0.12 |
| @react-navigation/bottom-tabs | ^6.3.3 |
| @react-navigation/material-top-tabs | ^6.2.3 |
| @react-navigation/native-stack | ^6.8.0 |
| react-native-safe-area-context | ^4.3.3 |
| react-native-screens | ^3.17.0 |
| react-native-gesture-handler | ^1.10.3 |
| react-native-reanimated | 1.13.3 |
| react-native-tab-view | ^3.1.1 |
| react-native-pager-view | ^5.4.25 |
| react-native | 0.66.1 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction repository and reproduce the native-stack headerTitle layout on the listed iOS devices, focusing on the initial render and navigation transitions. The issue is done when the custom two-line header title remains consistently centered and positioned across the iPhone 11 Pro Max, iPhone 13 Pro, and iPhone 14 Pro cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100