React-native-navigation: TopBar alignment

[mauricioscotton]

Issue Description

TopBar default properties does not change text alignment.
I've pushed into stack a screen with a title, and by default the title is centralized, which is a behaviour that I'm not expecting.

I've tried to set one of the default properties as described here:
https://wix.github.io/react-native-navigation/#/docs/styling?id=common-options
It has accepted color:'red', but alignment:(center/left/right) it hasn't...

After this, I've tried to add a subtitle to check how are things over there...

This was the surprise:

It does works for subtitle!

Am I missing something?

Steps to Reproduce / Code Snippets / Screenshots

export default class ForgotPasswordScreen extends React.Component {
    static get options() {
        return {
            topBar: {
                title: {
                    text: I18n.t('screens.forgotPassword'),
                    alignment: 'right',
                    color: 'red',
                },
            },
        };
    }
........

---

Environment

• React Native Navigation version: 2.5.2
• React Native version: 0.57.8
• Platform(s) (iOS, Android, or both?): Android by now.
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator(8.1)+Real Device(7.0) - Debug

[retyui]

I this prop support only 2 value center and fill on Android

https://github.com/wix/react-native-navigation/blob/b0c8113243de2043b98442dd485c04b0422aa213/lib/android/app/src/main/java/com/reactnativenavigation/parse/Alignment.java#L6-L15

[mauricioscotton]

Well, neither Fill or removing the property had make it go to left.
Any suggestion?

[pushpanjalip]

I thick there is no default option to align Navbar Title left or right. It is by default centered. But I have used
options: { topBar: { title: { component:{ name: 'NavHeader' } }, }
I have created NavHeader.js component and also registered it as
Navigation.registerComponent('NavHeader', () => NavHeader);

NavHeader.js

import React from 'react';
import {  View, Text } from 'react-native';

export default navHeader = props => {
    return(
        <View style={styles.container}><Text>Institiute</Text></View>      
    );
}

You can customize header title as you want by using title component option.

[mauricioscotton]

I thick there is no default option to align Navbar Title left or right. It is by default centered. But I have used
options: { topBar: { title: { component:{ name: 'NavHeader' } }, }
I have created NavHeader.js component and also registered it as
Navigation.registerComponent('NavHeader', () => NavHeader);

NavHeader.js

import React from 'react';
import {  View, Text } from 'react-native';

export default navHeader = props => {
    return(
        <View style={styles.container}><Text>Institiute</Text></View>      
    );
}

You can customize header title as you want by using title component option.

Thanks for replying mate!
I was thinking about it, but I want to avoid this type of customizations as I would like to keep it as a standard and focus on developing the other parts which are more important... =D
Although, There is a funny thing...
Is just that screen that have this problem..
The others are okay!

Have a look:

What do you think!

[mauricioscotton]

No one?

[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.

[JamieBort]

This is still an issue. Any solution yet? Any docs you can share with me before I reinvent the wheel by hunting the internet? Much thanks if so!

[guibas741]

I am facing the same problem with iOS

[dylanjongbloed]

same

[AudereSemper]

I'm in the same position too.

[rodrigodiasf1984]

Inside the Stack.Screen options use headerTitleAlign: 'center',!

OBS: I've used the react-navigation 5

Ex:

`import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './pages/Home/index';

const Stack = createStackNavigator();

function Routes() {
return (


name="Home"
component={Home}
options={{
title: 'Loja',
headerStyle: {
backgroundColor: '#7159c1',
},
headerTitleAlign: 'center',
headerTintColor: '#fff',
headerBackTitleVisible: false,
}}
/>


);
}

export default Routes;`

Before:

After:

I hope this might be helpful!