React-native-navigation: topBar title component alignment ignored after pushing and popping off of stack

[donovanhiland]

Issue Description

I'm rendering a custom topBar title component with these options:

  static get options() {
    return {
      topBar: {
        drawBehind: false,
        title: {
          component: {
            name: 'navigation.Logo',
            alignment: 'center',
          },
        },
      },
    }
  }

Which is correctly centering the custom component. However, when I push a view onto the stack and navigate back the custom component is no longer centered.

Steps to Reproduce / Code Snippets / Screenshots

I can repro this in the playground app. Start playground app, tap Options on the bottom, tap Set React Title View, tap Push, tap Pop or Pop to Root. The custom component is no longer centered.

---

Environment

• React Native Navigation version: 2.11.0
• React Native version: 0.58.5
• Platform(s) (iOS, Android, or both?): iOS, haven't tested android
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator

^ These are the versions I'm seeing this issue with. It's also happening with the playground versions.

[brenwell]

Having the same issue. The following is not working either

    Navigation.setDefaultOptions({
      topBar: {
        background: {
          color: backgroundColor,
        },
        title: {
          alignment: `center`
        },
        backButton: {
          color: titleStyle.color,
        },

      },

    })

[gustavomts]

Same thing for me.
Navigation.setDefaultOptions({ statusBar: { visible: true, style: 'light' }, topBar: { visible: true, title: { component: { name: LOGO_ICON }, alignment: 'center' }, background: { color: '#1d1d1d' }, backButton: { visible: false, }, noBorder: true, }, layout: { orientation: ['portrait'], }, });

[yfuks]

I commented the following line
https://github.com/wix/react-native-navigation/blob/c6b6f731f4f0288da9c01dec3088dc4b903f8baf/lib/ios/RNNViewControllerPresenter.m#L183

And it fix the issue in my case

[brenwell]

That also worked for me

[eyes2design]

IOS fix works for me as well.
Using
React Native: 0.58.4
ios 12.1 emulation

[ddinggu]

RN: ^0.58.4
RNN : ^2.11.0

also works for me

[eyes2design]

I hope they will get this into a update patch soon or something like it.

[hahtml]

This fix works for me.

[brenwell]

I am doing this temporarily in postInstall. For anyone looking for a hack ;)

find . -name 'RNNViewControllerPresenter.m' -exec sed -i -e '/\[\_customTitleView setFrame\:frame];/s/^/\/\//g' {} \;

which will comment the line

[Pungsnigel]

Fix worked for me as well.

[yfuks]

Looks like it was fixed with this commit: https://github.com/wix/react-native-navigation/commit/ac60d2fe6ad036528c31954a2997109b06f0c947#diff-8e71e0bc0406a74d2ee34eb8926fc021

So it should be ok with 2.17.0 can someone confirm?
I can't try right now

[hahtml]

@yfuks It was fixed in 2.17.0
This fix should be added to Changelog as well

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.