CODEWITHSUNDEEP
reactjsreact-native
Vincent Dave Te
Vincent Dave Te

Reputation: 238

React navigation Header

Im using react-native 0.62.0 with react-navigation version ^4.3.7 and createMaterialBottomTabNavigator. I have tried searching and implementing their solutions but none of it seems to work. I want to center the text in my header. This is what I tried.

static navigationOptions = ({ navigation }) => ({
    title: 'Profile',
    headerTitleStyle: { flex: 1, textAlign: 'center', color: 'white', fontSize: 20, alignSelf: 'center' , },
    headerTintColor: 'white',
    headerStyle: {
        backgroundColor: '#4169E1',
    },
})

Upvotes: 2

Views: 865

Answers (2)

Carlos Saiz Orteu
Carlos Saiz Orteu

Reputation: 1805

Try with this:

static navigationOptions = ({ navigation }) => ({
    title: 'Profile',
    headerTitleStyle: { flex: 1, textAlign: 'center', color: 'white', fontSize: 20, alignSelf: 'center' , },
    headerTintColor: 'white',
    headerStyle: {
        backgroundColor: '#4169E1',
    },
    headerTitleAlign: 'center',
})

Upvotes: 1

Alok Mali
Alok Mali

Reputation: 2881

Try after removing alignSelf: 'center' ,. The below code is working for me.

  defaultNavigationOptions: ({ navigation }) => {
        return {
          headerStyle: {
            backgroundColor: '#1e89f4'
          },
          headerTitle: 'Statistics',
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
            textAlign: 'center',
            flex: 1
          },
          headerLeft: (
            <View style={{ paddingLeft: 13 }}>
              <FontAwesomeIcon
                size={25}
                color='#fff'
                icon={faBars}
                onPress={() => navigation.openDrawer()}
              />
            </View>
          ),
          headerRight: <View />
        };
      }

Upvotes: 0

Related Questions