Add headerLayoutPreset option to stack #4588

brentvatne · 2018-06-28T00:04:57Z

Motivation

#4092

headerLayoutPreset: 'center' | 'left' to provide an easy solution for questions like this.
headerBackTitleEnabled - this configuration option for stack navigator allows you to force back button titles to either be rendered or not (if you disagree with defaults for your platform and layout preset).
Also fixes Ripple back button Android is too wide #3955

react-navigation-ci · 2018-06-28T00:07:10Z

NavigationPlayground for 383cc11 has been deployed.

https://expo.io/@react-navigation-ci/NavigationPlayground?release-channel=383cc11d2842e123ce3bcbf56d9e51f3eff60c3d

react-navigation-ci · 2018-07-18T23:08:06Z

NavigationPlayground for cef4b55 has been deployed.

https://expo.io/@react-navigation-ci/NavigationPlayground?release-channel=cef4b5551932ee095a926a3eb34b3a637c7d77e3

codecov-io · 2018-07-18T23:08:14Z

Codecov Report

Merging #4588 into master will decrease coverage by 0.16%.
The diff coverage is 62.74%.

@@            Coverage Diff             @@
##           master    #4588      +/-   ##
==========================================
- Coverage   67.92%   67.75%   -0.17%     
==========================================
  Files          57       57              
  Lines        1799     1833      +34     
==========================================
+ Hits         1222     1242      +20     
- Misses        577      591      +14

Impacted Files	Coverage Δ
src/views/Header/HeaderTitle.js	`100% <ø> (ø)`	⬆️
src/views/StackView/StackViewLayout.js	`36.04% <47.82%> (+1.01%)`	⬆️
src/views/Header/Header.js	`70.34% <70%> (+0.46%)`	⬆️
src/views/Header/HeaderBackButton.js	`69.23% <87.5%> (+2.56%)`	⬆️

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 3c36db4...6b11f93. Read the comment docs.

react-navigation-ci · 2018-07-19T23:52:04Z

NavigationPlayground for 7e8fa9c has been deployed.

https://expo.io/@react-navigation-ci/NavigationPlayground?release-channel=7e8fa9caad6dc9261f5d3effd179f9234355bd37

react-navigation-ci · 2018-07-20T20:35:29Z

NavigationPlayground for 6b11f93 has been deployed.

https://expo.io/@react-navigation-ci/NavigationPlayground?release-channel=6b11f93aa7c5e0ae0d58699c2ccea882b9247672

…nd make it have reasonable defaults, better back button ripple on Android

react-navigation-ci · 2018-07-20T21:11:52Z

NavigationPlayground for 5f7cfc1 has been deployed.

https://expo.io/@react-navigation-ci/NavigationPlayground?release-channel=5f7cfc14cd7da5abc7ea1e7779ecea5f11a2e82f

react-navigation-ci · 2018-07-20T21:16:25Z

NavigationPlayground for 5f7cfc1 has been deployed.

https://expo.io/@react-navigation-ci/NavigationPlayground?release-channel=5f7cfc14cd7da5abc7ea1e7779ecea5f11a2e82f

ahmetabdi · 2018-07-25T13:14:38Z

@brentvatne Is this in 2.9.1? I have it in my stack navigator but it is not positioned to the left.

navigationOptions: () => ({
      headerTransparent: false,
      title: 'Settings',
      headerLeft: SettingsIcon,
      headerLayoutPreset: 'left',
}),

brentvatne · 2018-07-25T19:47:47Z

it is not part of navigationOptions, you need to use it in the stack config

ahmetabdi · 2018-07-26T07:14:24Z

Oh thanks

giantss · 2018-12-01T07:52:15Z

@brentvatne I always feel that the headerLayoutPreset configuration item should belong to navigationOptions.

brentvatne · 2018-12-01T07:57:52Z

feel free to open a rfc to explain why you think that is the case: https://github.com/react-navigation/rfcs

arsenalol69 · 2018-12-09T16:00:10Z

Can you updata Typescript definition ? Because TSLint can't find your new param :/

brentvatne · 2018-12-09T19:53:45Z

@arsenalol69 #5276

jcbertolucci · 2019-02-14T03:30:23Z

it is not part of navigationOptions, you need to use it in the stack config

that saved my life

danielsotopino · 2019-04-25T15:34:06Z

@brentvatne I always feel that the headerLayoutPreset configuration item should belong to navigationOptions.

I feel the same

react-navigation-ci · 2019-04-25T15:54:30Z

can you describe how that would work and why? seems pretty hard to implement and the behavior is unclear. open a rfc and we can look into it!

…

On Thu, Apr 25, 2019 at 08:34 Daniel Soto ***@***.***> wrote: @brentvatne <https://github.com/brentvatne> I always feel that the headerLayoutPreset configuration item should belong to navigationOptions. I feel the same — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4588 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIYL7TUHATTRBEAZQL2C6BLPSHFQFANCNFSM4FHKHRYQ> .

danielsotopino · 2019-04-25T19:10:03Z

I wouldn't be able to tell you how because i haven't read the code of react-navigation but the why is quite simple since many of the header styling can be done on navigationOptions.

I'll check the code later if i can, would be interesting to help on this.

eleallegue · 2019-04-25T21:00:07Z

I am dealing with the same problem and I feel same way. I think that in my case for example, I just want to have one header in the whole app and I want to center the name and so I have no header configuration anywhere. The only config of stack I have is the bottom navigation, so now I just cannot center the title unless I use a dirt solution that is leaving blank the headerLeft with a View component.

esr360 · 2019-05-01T14:39:49Z

Don't know what an rfc is, but from a Developer Experience point of view, at least to me (as an inexperienced newbie), I agree it seems to make more sense for headerLayoutPreset to be part of navigationOptions.

react-navigation-ci · 2019-05-01T15:46:40Z

can you explain why it makes sense for you and what you'd expect to see when transitioning when one screen in a stack has a certain header preset and the next screen has a different one?

…

On Wed, May 1, 2019 at 7:40 AM Edmund ***@***.***> wrote: Don't know what an rfc is, but from a Developer Experience point of view, at least to me (as an inexperienced newbie), I agree it seems to make more sense for headerLayoutPreset to be part of navigationOptions. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4588 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIYL7TT4X4QEX4SJPNHUJNLPTGTUJANCNFSM4FHKHRYQ> .

esr360 · 2019-05-01T18:28:19Z

For me it makes sense because I am calling navigationOptions on each screen, and have control of the navigation options wherever I am including the navigation. Setting the alignment of the navigation title seems like an option of the navigation rather than an option of the stack. I think it's feasible that different screens could potentially have different layout requirements.

As I'm a newbie, the only transitioning I've actually seen of screens is slide/fade animations so in that scenario at least it wouldn't have an impact.

can you explain why it makes sense for you and what you'd expect to see when transitioning when one screen in a stack has a certain header preset and the next screen has a different one?
…
On Wed, May 1, 2019 at 7:40 AM Edmund @.***> wrote: Don't know what an rfc is, but from a Developer Experience point of view, at least to me (as an inexperienced newbie), I agree it seems to make more sense for headerLayoutPreset to be part of navigationOptions. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4588 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AIYL7TT4X4QEX4SJPNHUJNLPTGTUJANCNFSM4FHKHRYQ .

enderandpeter · 2019-07-25T17:40:30Z

Would someone mind taking a look at this again? From what I am seeing the headerLayoutPreset: 'center' stackConfig setting is not centering the header title on Android. I'm having to use a workaround instead.

andywu0408 · 2019-12-07T18:31:22Z

const StackNavigator = createStackNavigator({
    screen: MyScreen,
    navigationOptions: {
        title: 'MyTitle'
    }
},
{
    headerLayoutPreset: 'center'
});

Adding it into stackConfig like this works for me, on both iOS and Android. Hope this helps!

elie222 · 2019-12-29T20:44:02Z

Thanks @andywu0408. I ran into this issue myself recently. The issue is that it's not part of navigationOptions or defaultNavigationOptions. It works as in the Andy's example.

radupm · 2020-05-21T07:14:16Z

Since React navigation 5 use headerTitleAlign:

defaultNavigationOptions: { title: 'Centered', headerTitleAlign: 'center' }

Defaults to center on iOS and left on Android.

hadpro24 · 2020-06-06T19:53:38Z

You can go this link : https://reactnavigation.org/docs/stack-navigator/#headertitlealign

marcvangend · 2022-09-29T07:39:36Z

Documentation for version 6: https://reactnavigation.org/docs/elements/#headertitlealign

github-actions · 2022-09-29T07:39:48Z

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

This was referenced Jun 28, 2018

Cannot Properly Center Title on Android #1728

Closed

How to center headerTitle on Android? #4615

Closed

brentvatne mentioned this pull request Jul 18, 2018

added header container styles to be customized #4331

Merged

brentvatne force-pushed the @brent/header-layout-preset branch from 383cc11 to cef4b55 Compare July 18, 2018 23:03

brentvatne mentioned this pull request Jul 19, 2018

how override header style justifyContent #4716

Closed

brentvatne force-pushed the @brent/header-layout-preset branch from cef4b55 to 7e8fa9c Compare July 19, 2018 23:47

brentvatne force-pushed the @brent/header-layout-preset branch from 7e8fa9c to 6b11f93 Compare July 20, 2018 20:30

Add headerLayoutPreset, add config for back button title visibility a…

5f7cfc1

…nd make it have reasonable defaults, better back button ripple on Android

brentvatne force-pushed the @brent/header-layout-preset branch from e493590 to 5f7cfc1 Compare July 20, 2018 21:11

brentvatne merged commit cd3707d into master Jul 20, 2018

brentvatne mentioned this pull request Jul 24, 2018

Option to force the header view in iOS to be rendered like Android (left-aligned) and vice versa #4092

Closed

daviscabral mentioned this pull request Aug 24, 2018

Custom title not centered on Android after upgrade to 4.0.1 aksonov/react-native-router-flux#3207

Closed

brentvatne deleted the @brent/header-layout-preset branch October 11, 2018 20:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add headerLayoutPreset option to stack #4588

Add headerLayoutPreset option to stack #4588

brentvatne commented Jun 28, 2018 •

edited

Loading

react-navigation-ci commented Jun 28, 2018

react-navigation-ci commented Jul 18, 2018

codecov-io commented Jul 18, 2018 •

edited

Loading

react-navigation-ci commented Jul 19, 2018

react-navigation-ci commented Jul 20, 2018

react-navigation-ci commented Jul 20, 2018

react-navigation-ci commented Jul 20, 2018

ahmetabdi commented Jul 25, 2018

brentvatne commented Jul 25, 2018

ahmetabdi commented Jul 26, 2018

giantss commented Dec 1, 2018

brentvatne commented Dec 1, 2018

arsenalol69 commented Dec 9, 2018

brentvatne commented Dec 9, 2018

jcbertolucci commented Feb 14, 2019

danielsotopino commented Apr 25, 2019

react-navigation-ci commented Apr 25, 2019 via email

danielsotopino commented Apr 25, 2019

eleallegue commented Apr 25, 2019

esr360 commented May 1, 2019

react-navigation-ci commented May 1, 2019 via email

esr360 commented May 1, 2019 •

edited

Loading

enderandpeter commented Jul 25, 2019

andywu0408 commented Dec 7, 2019 •

edited

Loading

elie222 commented Dec 29, 2019

radupm commented May 21, 2020

hadpro24 commented Jun 6, 2020

marcvangend commented Sep 29, 2022

github-actions bot commented Sep 29, 2022

Add headerLayoutPreset option to stack #4588

Add headerLayoutPreset option to stack #4588

Conversation

brentvatne commented Jun 28, 2018 • edited Loading

Motivation

react-navigation-ci commented Jun 28, 2018

react-navigation-ci commented Jul 18, 2018

codecov-io commented Jul 18, 2018 • edited Loading

Codecov Report

react-navigation-ci commented Jul 19, 2018

react-navigation-ci commented Jul 20, 2018

react-navigation-ci commented Jul 20, 2018

react-navigation-ci commented Jul 20, 2018

ahmetabdi commented Jul 25, 2018

brentvatne commented Jul 25, 2018

ahmetabdi commented Jul 26, 2018

giantss commented Dec 1, 2018

brentvatne commented Dec 1, 2018

arsenalol69 commented Dec 9, 2018

brentvatne commented Dec 9, 2018

jcbertolucci commented Feb 14, 2019

danielsotopino commented Apr 25, 2019

react-navigation-ci commented Apr 25, 2019 via email

danielsotopino commented Apr 25, 2019

eleallegue commented Apr 25, 2019

esr360 commented May 1, 2019

react-navigation-ci commented May 1, 2019 via email

esr360 commented May 1, 2019 • edited Loading

enderandpeter commented Jul 25, 2019

andywu0408 commented Dec 7, 2019 • edited Loading

elie222 commented Dec 29, 2019

radupm commented May 21, 2020

hadpro24 commented Jun 6, 2020

marcvangend commented Sep 29, 2022

github-actions bot commented Sep 29, 2022

brentvatne commented Jun 28, 2018 •

edited

Loading

codecov-io commented Jul 18, 2018 •

edited

Loading

esr360 commented May 1, 2019 •

edited

Loading

andywu0408 commented Dec 7, 2019 •

edited

Loading