Clever Geek Handbook

How can we center the react-navigation title title?

The docs for interactive navigation are still young and reading the questions doesn't work a lot for me (changes in each version), does anyone have a working method for a title center in Android using react-navigation

in React Native?

+14


source to share


15 replies


Use headerTitleStyle :

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
}

enter image description here



Changed on 2019/03/12:

In 2018, after the release of react-navigation v2 (April 7, 2018), for some reason alignSelf

no longer worked. Here's a new working way using headerLayoutPreset . from @HasanSH:

const HomeActivity_StackNavigator = createStackNavigator({
    Home: {screen: Main},
}, {headerLayoutPreset: 'center'});
+28


source


To center the heading of the heading, we need to have the flex heading by adding the flex property.



navigationOptions: {
    title: "Title center",
    headerTitleStyle: { 
        textAlign:"center", 
        flex:1 
    },
}
+39


source


The accepted answer only works for me if there is no Back button on the left. In this case, you need to set the empty view to the right in order to center it correctly.

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
    headerRight: (<View />)
}
+20


source


The best way to do this is to implement what the documentation says: internally, StackNavigatorConfig

assign an optional property like this:

createStackNavigator({
   { ... // your screens},
   { ...,
     headerLayoutPreset: 'center' // default is 'left'
   })

headerLayoutPreset

- Determines how to arrange the header components.

By doing this, you don't have to spoil the style at all. And this will apply to all nested screens in that stack.

Check the source

+16


source


This worked for me :)

static navigationOptions = {
title: "SAMPLE",
headerTitleStyle: { flex: 1, textAlign: 'center'},

};

+3


source 


headerTitleStyle: {
    color: 'white',
    textAlign: 'center',
               flex: 1
}
+2


source


Set your react-navigation heading title in the center. Using the CSS title titleTitleStyle.

static navigationOptions = {
        title: 'Home',
        headerTintColor: '#fff',
        headerTitleStyle: {
            width: '90%',
            textAlign: 'center',
        },
    };
+1


source


Use headerTitleContainerStyle

static navigationOptions = {
  headerTitleStyle: { justifyContent: 'center' },
}
+1


source 


navigationOptions:({navigation}) =>({
                    gesturesEnabled :false,

                    headerTitleStyle : {
                            color:"white",
                            fontFamily:"OpenSans",
                            alignSelf: 'center' ,
                            textAlign: 'center',
                            flex:1
                    },
                  }),

Here. => {flex:1 ,textAlign: 'center' and alignSelf: 'center'}

works for me!

+1


source


You should add headerLayoutPreset: 'center' to your createeStackNavigator function.

This is the only sure way:

const someStack = createStackNavigator({
ConfigurationScreen: ConfigurationScreen,
PreferencesScreen: PreferencesScreen},
{ headerLayoutPreset: 'center' });

Link: https://github.com/react-navigation/react-navigation/pull/4588

+1


source


This works for me on Android & IOS:

static navigationOptions = {
    headerTitleStyle: {
        textAlign: 'center',
        flexGrow: 1,
    },
    headerRight: (<View/>)
};
+1


source


headerTitleStyle: {white color ', textAlign:' center ', flex: 1}

+1


source


This will definitely work for Android

      headerTitleStyle:{
         flex: 1, textAlign: 'center'
      },
0


source


Make sure you check for problems before a stack overflow occurs, usually more useful. question about your problem But as himanshu said in the comments, you need to access the title's style property to customize the title the way you want.

static navigationOptions = {
    header: (navigation) => ({
      title: <Text style={{ 
            color: 'rgba(0, 0, 0, .9)', 
            fontWeight: Platform.OS === 'ios' ? '600' : '500',  
            fontSize: Platform.OS === 'ios' ? 17 : 18, 
            alignSelf: 'center' 
         }}>Filters</Text>,
      right: <SearchButton />,
      left: <CancelButton />,
    })
  };

As shown in this release, I am assuming that you have already managed to find a solution, as you did recently. But for those facing this problem, it might be helpful.

-1


source


You can set the center of the title title for android in the stack navigator to change the navigation with this file:

node_modules\react-navigation\src\views\Header.js

Change this code in your Header.js file: -

title: {
bottom: 0,
left: TITLE_OFFSET,
right: TITLE_OFFSET,
top: 0,
position: 'absolute',
alignItems: Platform.OS === 'ios' ? 'center' : 'center',
},
-2


source






More articles:


All Articles