Route Config

/**
 * Author: Rahul
 * Date: 25 Feb 2018
 *
 * Routes
 * @flow
 */
import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
import LoginScreen from 'src/containers/login';
import HomeScreen from 'src/containers/home';
import FeedsScreen from 'src/containers/feeds';
import { AppLogo } from 'src/components';
import { background } from 'src/styles/';
import { SIGNED_IN, SIGNED_OUT, HOME, LOGIN, FEEDS } from './constants';

const navigationOptions = {
  navigationOptions: {
    headerLeft: (
      <View>
        <Text>Hamburger</Text>
      </View>
    ),
    headerRight: (
      <AppLogo />
    ),
    headerStyle: {
      paddingHorizontal: 16,
      backgroundColor: background.color2,
    },
    gesturesEnabled: false,
  },
};

const SignedOutRouteConfig = {
  [LOGIN]: { screen: LoginScreen },
};

const SignedInRouteConfig = {
  [HOME]: { screen: HomeScreen },
  [FEEDS]: { screen: FeedsScreen },
};

const SignedOut = StackNavigator(SignedOutRouteConfig, navigationOptions);
const SignedIn = StackNavigator(SignedInRouteConfig, navigationOptions);

const createRootNavigator = (signedIn: boolean = false) => StackNavigator(
  {
    [SIGNED_IN]: {
      screen: SignedIn,
      navigationOptions: {
        gesturesEnabled: false,
        header: null,
      },
    },
    [SIGNED_OUT]: {
      screen: SignedOut,
      navigationOptions: {
        gesturesEnabled: false,
        header: null,
      },
    },
  },
  {
    initialRouteName: signedIn ? SIGNED_IN : SIGNED_OUT,
  }
);

export default createRootNavigator;

Adding screenshots for clarity:

How can I center the header content and get rid of the unnecessary space from the top?

P.S I have already tried setting the height to headerStyle

Route Config

/**
 * Author: Rahul
 * Date: 25 Feb 2018
 *
 * Routes
 * @flow
 */
import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
import LoginScreen from 'src/containers/login';
import HomeScreen from 'src/containers/home';
import FeedsScreen from 'src/containers/feeds';
import { AppLogo } from 'src/components';
import { background } from 'src/styles/';
import { SIGNED_IN, SIGNED_OUT, HOME, LOGIN, FEEDS } from './constants';

const navigationOptions = {
  navigationOptions: {
    headerLeft: (
      <View>
        <Text>Hamburger</Text>
      </View>
    ),
    headerRight: (
      <AppLogo />
    ),
    headerStyle: {
      paddingHorizontal: 16,
      backgroundColor: background.color2,
    },
    gesturesEnabled: false,
  },
};

const SignedOutRouteConfig = {
  [LOGIN]: { screen: LoginScreen },
};

const SignedInRouteConfig = {
  [HOME]: { screen: HomeScreen },
  [FEEDS]: { screen: FeedsScreen },
};

const SignedOut = StackNavigator(SignedOutRouteConfig, navigationOptions);
const SignedIn = StackNavigator(SignedInRouteConfig, navigationOptions);

const createRootNavigator = (signedIn: boolean = false) => StackNavigator(
  {
    [SIGNED_IN]: {
      screen: SignedIn,
      navigationOptions: {
        gesturesEnabled: false,
        header: null,
      },
    },
    [SIGNED_OUT]: {
      screen: SignedOut,
      navigationOptions: {
        gesturesEnabled: false,
        header: null,
      },
    },
  },
  {
    initialRouteName: signedIn ? SIGNED_IN : SIGNED_OUT,
  }
);

export default createRootNavigator;

Adding screenshots for clarity:

How can I center the header content and get rid of the unnecessary space from the top?

P.S I have already tried setting the height to headerStyle

• javascript
• ios
• reactjs
• react-native
• react-navigation

4 Answers 4

Try placing this code in your App.js file:

import { SafeAreaView } from "react-navigation";

if (Platform.OS === "android") {
  // removes extra space at top of header on android
  SafeAreaView.setStatusBarHeight(0);
}

You can set headerForceInset: { top: 'never', bottom: 'never' } in the navigationOptions and that will remove the paddingTop.

For more details; https://github.com/react-navigation/react-navigation/issues/3184

In my case headerMode: 'none' solved the issue. May be helpful

const Routes = createStackNavigator(
    {
      Login: { screen: Login,  },

      // Profile: { screen: ProfileScreen },
    },
    {
        // initialRouteName: 'Login',
        headerMode: 'none'
    }
);

If you use StatusBar with translucent options, you need to use in your screenOptions on Stack.Navigator, the option headerStatusBarHeight: 0

<Stack.Navigator
  screenOptions={{
    headerStatusBarHeight: 0,
  }}
>