CODEWITHSUNDEEP
iosreact-native
JamesDeveloper
JamesDeveloper

Reputation: 113

How to left align title in navigation header in react native?

tThis is my code in the navigator:

<Tab.Screen
    name="Profile"
    component={Profile}
    options={{
      title: username,
      headerStyle: {
        backgroundColor: '#fff',
        headerTitleAlign: 'left',
      },
      headerTintColor: 'black',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
  />

We want to mimic instagram's header on iOS where the username is on the top left corner of the header.

We currently getting a console warning message stating headertitleAlign was given a value of left, this has no effect on headerstyle.

Thank you in advance!

Upvotes: 5

Views: 10208

Answers (2)

Philip Su
Philip Su

Reputation: 113

You do indeed want headerTitleAlign: 'left' in the main body of the options object, as @nithinpp mentioned. Note, however, that this setting won't do anything on iOS, as the documentation disappointingly notes.

If you'd like it to work on iOS as well, you'll need to provide your own headerTitle component:

<Tab.Screen
  name="Profile"
  component={Profile}
  options={{
    title: username,
    headerStyle: {
      backgroundColor: '#fff',
    },
    headerTintColor: 'black',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerTitle: props => (
      <View style={{ flex: 1, flexDirection: "row" }}>
        <Text>
          {props.children}
        </Text>
      </View>
    ),
  }}
/>

Note in this case that I'm just proposing you use a flexDirection: "row" on a View in order to left-justify. You can alternatively do whatever you want within headerTitle to get the effect you want.

Upvotes: 3

nithinpp
nithinpp

Reputation: 2025

headerTitleAlign is not a valid style property. That shouldn't be given inside the headerStyle. Simply move headerTitleAlign:'left' outside of the headerStyle property and it should work.

<Tab.Screen
    name="Profile"
    component={Profile}
    options={{
      title: username,
      headerTitleAlign: 'left', //moved this from headerStyle property
      headerStyle: {
        backgroundColor: '#fff',
      },
      headerTintColor: 'black',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
/>

Upvotes: 13

Related Questions