I'm trying to center the top bar text of one (out of three) of my tabs. I can do this with the following:
Navigation.mergeOptions(this.props.componentId, {
topBar: {
title: {
alignment: 'center',
text: <varies in length per render>,
},
subtitle: {
alignment: 'center',
text: 'Subtitle',
},
},
});
But, there are two problems with this:
Firstly, on the initial boot, the text is still left-aligned.

Changing tabs, then coming back, recenters the text:

Secondly, when the title changes, it sometimes becomes offset from the actual center, and only fixes when tabs are changed:

Before switching tabs:

After:

Is there any way to have the text centered from the start (I am calling Navigation.mergeOptions in componentDidMount), and also have it recenter itself if the length changes?
This worked in v1, so I'm surprised it's so difficult in v2.
See above
Have you tried to put the code in static options() instead of Navigation.mergeOptions()?
I have tried there, too. Exact same problem.
Let me confirm that that is the case, tho.
Edit: Yup, same behavior.
I'm using setDefaultOptions and it works fine. Every screen has a title in the center.
Navigation.setDefaultOptions({
topBar: {
title: {
alignment: "center"
}
}
})
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.
The issue has been closed for inactivity.
This is still an issue!
@samiede Which version of RNN are you observing this on?
Most helpful comment
I'm using setDefaultOptions and it works fine. Every screen has a title in the center.