[NavigatorIOS] Add ability to set custom component as title

[Alexxzz]

UIKit's UINavigationItem has a UIView property 'titleView' which allows to set custom view as a navigation bar title. Would be nice to have that in react-native.
Two ways as I see it:

1. Child component of the NavigatorIOS:

<NavigatorIOS
  itemWrapperStyle={styles.nav}
  initialRoute={{
    component: NewsView
  }}>
{someFancyCustomTitleComponent}
</NavigatorIOS>

1. Parameter of the NavigatorIOS:

<NavigatorIOS
  itemWrapperStyle={styles.nav}
  initialRoute={{
    component: NewsView
  }}
  titleComponent={someFancyCustomTitleComponent}
/>

So probably child component or parameter(or other way of ding it?) should be set to the instance of RCTNavItem and then RCTWrapperViewController should set it to corresponding UINavigationItem's titleView, but I don't have any idea how to convert react component to UIView.

[ericvicenti]

We don't need this internally, but we would be happy to accept a pull request for this.

What do you think about this API:

<NavigatorIOS
  itemWrapperStyle={styles.nav}
  initialRoute={{
    component: NewsView
  }}
  renderTitle={(route) => <MyFancyTitleComponent title={route.title} />}
/>

[Alexxzz]

Nice, will look in this direction.

[sophiebits]

What's the advantage of making it a function here? I'd default to making it a normal element-typed prop.

[AllanChen]

how about hidden the navigation bar ?

[ericvicenti]

@spicyj If not a function, then how would you change the title for each new scene? Maybe we could put a title element on the new route object, but I'd like to make the API start to resemble the Navigator API

[sophiebits]

Right, that makes sense. Having title as a property of the route or similar seems to make the most sense though, akin to UINavigationItem on iOS? I'm not familiar with the Navigator API, so I'll let you figure it out. :)

[chirag04]

@ericvicenti Is it possible to set an image/logo instead of title in the navigation bar?

[chirag04]

I feel like spicyj's suggestion of having a route property makes sense. I can try to explore this area if you agree @ericvicenti regarding this api.

[meric426]

+1 would love this feature

[ericvicenti]

For Navigator, the reason we don't put the title or scene components directly on the route is because it takes extra computation and memory to load and render them before they need to be displayed.

I think it would be nice if we could start making the API for NavigatorIOS more closely resemble Navigator. However, this is a community-maintained component, so I will let you all decide on the API. We are happy to accept additional features however you'd like to implement them.

[jessepollak]

+1 this would be rad.

[chenbrian]

Was looking for a feature like OP and came across this project: https://github.com/t4t5/react-native-router
Just thought I'd share...

[ghost]

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[ghost]

Agreed, this would be very useful. Has anybody looked at implementing this feature?

[The0racle]

Just started using react native and not being able to do that is a super bummer for me since my app customizes the navigation title. Is anybody implementing this feature?

[lprhodes]

I'm looking to implement this as a PR but I'm struggling to find the right code in react native that takes the component JSON sent over the bridge and transforms it into usable Obj C views (to be used in a new method inside RCTConvert) - any pointers?

[lprhodes]

In the interim I'll be developing it as such:

<NavigatorIOS
  initialRoute={{
    component: MyComponent,
    titleView: {
      class: 'MyCustomView',
      title: 'View Title',
      textSize: 15,
      someOtherSetter: true
  }}
/>

You can then do any customisations you need in native code.

If you need to pass data back to RN (e.g. on selection of a segmented control) then normal event emitters can be used.

[omeid]

@lprhodes Have you got any updates on this?

[singno]

Any plans for this feature? It would be so nice to have such a feature.

[omeid]

For anyone else who has this issue, I ended up using Navigator Experimental (plays really nice with Flux, Redux in our case) and implemented the Nav in React.

[lprhodes]

Sorry for leaving this so long - I've ended up using https://github.com/wix/react-native-navigation and https://github.com/wix/react-native-controllers.

I'm sure this is heavily debated elsewhere but for me the idea of React Native was to use native components (as per above)...not a non-native feeling replacement (Navigator Experimental)

[charpeni]

@facebook-github-bot label Icebox

[charpeni]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/navigatorios-add-ability-to-set-custom-component-as-title

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[charpeni]

@facebook-github-bot close

[facebook-github-bot]

@charpeni tells me to close this issue. If you think it should still be opened let us know why.

[Alexxzz]

Easily achievable with https://reactnavigation.org now.