add headerBackTitleStyle screen option #1083

koenpunt · 2017-04-17T19:10:01Z

I'm currently migrating an existing iOS app to React Native, where I use customized titles and back buttons.

The titles currently can be styled using headerTitleStyle, but for the back button there was no such option.

So this change adds a headerBackTitleStyle screen option, which makes it possible to set the style for the back button title ~~, and when not set it inherits the headerTitleStyle~~.

TODO

Add documentation

grabbou

Overall it looks good. I am not in favour of allowing custom headerBackTitleStyle as the default implementation is specifically made for iOS and optimised to look native. Inheriting things like fontFamily from headerTitleStyle makes sense.

src/views/Header.js

+      headerTitleStyle,
+    } = this.props.getScreenDetails(lastScene).options;
+
+    if (headerBackTitle === null) {


src/views/Header.js

+      return null;
+    }
+    const {
+      headerBackTitleStyle,


src/views/Header.js

+    }
+    const { headerTitleStyle } = this.props.getScreenDetails(lastScene).options;
+
+    return [headerTitleStyle, headerBackTitleStyle];


since the title is customizable, the back title should too.

If there's no last scene, return the `headerBackTitleStyle` from the current scene. Otherwise return the `headerTitleStyle` from the last scene, and the `headerBackTitleStyle` from the current scene, with the latter having precedence.

also the title style of the last scene is no longer taken into account

koenpunt · 2017-04-27T15:27:52Z

@grabbou @satya164 I came to the conclusion that inheriting or merging the styles isn't that logical, since the title and the backbutton already have different styles by default. I overlooked that fact because in the application I'm working on I have the title and the button title styled the same.

That being said, I've reverted it to taking headerBackTitleStyle from the current scene, and accept that I have to explicitly set those styles on the backbutton when necessary.

* add headerBackTitleStyle screen option since the title is customizable, the back title should too. * add documentation for `headerBackTitleStyle` * make absence of headerBackTitle not affect return value * merge styles so current scene can override If there's no last scene, return the `headerBackTitleStyle` from the current scene. Otherwise return the `headerTitleStyle` from the last scene, and the `headerBackTitleStyle` from the current scene, with the latter having precedence. * take headerBackTitleStyle from current scene also the title style of the last scene is no longer taken into account

koenpunt mentioned this pull request Apr 17, 2017

Add headerBackTitleStyle option #1075

Closed

grabbou suggested changes Apr 18, 2017

View reviewed changes

koenpunt mentioned this pull request Apr 18, 2017

Use the title text style for the back button text. #1096

Closed

satya164 requested changes Apr 26, 2017

View reviewed changes

koenpunt mentioned this pull request Apr 27, 2017

WIP: make title-to-back transition look more native on iOS #1282

Closed

4 tasks

koenpunt added 5 commits April 27, 2017 17:13

add headerBackTitleStyle screen option

f7b2a02

since the title is customizable, the back title should too.

add documentation for headerBackTitleStyle

4face99

make absence of headerBackTitle not affect return value

93bdca4

merge styles so current scene can override

ec0e1db

If there's no last scene, return the `headerBackTitleStyle` from the current scene. Otherwise return the `headerTitleStyle` from the last scene, and the `headerBackTitleStyle` from the current scene, with the latter having precedence.

take headerBackTitleStyle from current scene

cd3d601

also the title style of the last scene is no longer taken into account

satya164 approved these changes Apr 27, 2017

View reviewed changes

grabbou approved these changes Apr 28, 2017

View reviewed changes

grabbou merged commit c04ea5b into react-navigation:master Apr 28, 2017

koenpunt deleted the back-title-style branch August 29, 2017 15:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add headerBackTitleStyle screen option #1083

add headerBackTitleStyle screen option #1083

koenpunt commented Apr 17, 2017 •

edited

Loading

grabbou left a comment

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

koenpunt commented Apr 27, 2017 •

edited

Loading

add headerBackTitleStyle screen option #1083

add headerBackTitleStyle screen option #1083

Conversation

koenpunt commented Apr 17, 2017 • edited Loading

grabbou left a comment

Choose a reason for hiding this comment

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

koenpunt commented Apr 27, 2017 • edited Loading

koenpunt commented Apr 17, 2017 •

edited

Loading

koenpunt commented Apr 27, 2017 •

edited

Loading