React Native: Header needs to be on top of createMaterialTopTabNavigator

Question

I am having some trouble related to createMaterialTopTabNavigator (react-navigation). I want to have my tabs navigator below the header, yet this is how it's currently shown:

I don't have much knowledge about how I could bring the header down, as I need the header to be above the tabs navigator. Here is the main code for that part:

const EmptyLegsNavigator = createStackNavigator(
  {
    MainEmptyLegsScreen: {
      screen: MainEmptyLegScreen,
    },
    SecondaryScreen: {
      screen: SecondaryScreen,
    },
  },
  {
    defaultNavigationOptions: {
      title: 'Empty Legs',
      headerStyle: {
        backgroundColor: '#eee',
      },
    },
  },
);

const QuotesNavigator = createStackNavigator(
  {
    MainQuotesScreen: {
      screen: MainQuoteScreen,
    },
  },
  {
    defaultNavigationOptions: {
      title: 'Quotes',
      headerStyle: {
        backgroundColor: '#eee',
      },
    },
  },
);

const FlightsNavigator = createStackNavigator(
  {
    MainFlightsScreen: {
      screen: MainFlightScreen,
    },
  },
  {
    defaultNavigationOptions: {
      title: 'Flights',
      headerStyle: {
        backgroundColor: '#eee',
      },
    },
  },
);

const RegisterNavigator = createStackNavigator(
  {
    Register: RegisterScreen,
  },
  {
    defaultNavigationOptions: {
      title: 'Register',
      headerStyle: {
        backgroundColor: '#eee',
      },
    },
  },
);

const LoginNavigator = createStackNavigator(
  {
    Login: LoginScreen,
  },
  {
    defaultNavigationOptions: {
      title: 'Login',
      headerStyle: {
        backgroundColor: '#eee',
      },
    },
  },
);

const tabScreenConfig = {
  EmptyLegs: {
    screen: EmptyLegsNavigator,
    navigationOptions: {
      title: 'Empty Legs',
      tabBarIcon: tabInfo => {
        return <Icon name="airport" size={25} color="black" />;
      },
      tabBarColor: '#eee',
    },
  },
  Quotes: {
    screen: QuotesNavigator,
    navigationOptions: {
      title: 'Quotes',
      tabBarIcon: tabInfo => {
        return <Icon name="airplane" size={25} color="black" />;
      },
      tabBarColor: '#ddd',
    },
  },
  Flights: {
    screen: FlightsNavigator,
    navigationOptions: {
      title: 'Flights',
      tabBarIcon: tabInfo => {
        return <Icon name="airplane-takeoff" size={25} color="black" />;
      },
      tabBarColor: '#ccc',
    },
  },
};

const MainTabNavigator =
  createMaterialTopTabNavigator(tabScreenConfig, {
    tabBarOptions: {},
  });

const MainNavigator = createDrawerNavigator(
  {
    Main: MainTabNavigator,
    Register: RegisterNavigator,
    Login: LoginNavigator,
  },
  {
    contentOptions: {
      activeTintColor: 'red',
    },
  },
);

export default createAppContainer(MainNavigator);

Thanks for the help!

Answer 1

You have to add padding on top of your root component. You certainly have a App.js file where you import your MainNavigator.

...
import MainNavigator from 'yourMainNavigatorfile'

class App extends React.Component {
  ...
  render(){
    return (
      <View style={paddingTop:20}> {/* You can use another paddingTop value depending of your screen size or Constants.statusBarHeight if you use Expo*/}
        <MainNavigator/>
      </View>
    )
  }
}

Answer 2

You can use SafeAreaView instead of paddingTop.

import React, { Component } from 'react';
import {
  SafeAreaView, View,
} from 'react-native';
import MainNavigator from './yourMainNavigatorfilePath'

class App extends Component {
  ...
  render() {
    return (
        <SafeAreaView>
            <MainNavigator />
        </SafeAreaView>

        OR

        <View>
            <SafeAreaView>
                <MainNavigator />
            </SafeAreaView>
        </View>
    );
  }
}
export default App;

Answer 3

You can use Fragments and can return both (customer header and Top tab bar).

import React, {Fragment} from 'react';
const TopTabNavigator = () => {
return (
  <Fragment>
  <YourCustomHeaderBar />
   <TopTab.Navigator>
    <TopTab.Screen name="Empty Legs" component={Screen1} />
    <TopTab.Screen name="Quotes" component={Screen2} />
    <TopTab.Screen name="Flights" component={Screen3} />
   </TopTab.Navigator>
  </Fragment>
 );
};