Place Material Top Tab Navigator at custom location

Question

Using createMaterialTopTabNavigator in react navigation, I have achieved the following:

However, I want to move the tabs below the page title bar and above the job item slider carousel. How do I achieve this? Here is my code:

export const MaterialTabNavigation = createMaterialTopTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: "Home"
      }
    },
    PopularJobs: {
      screen: PopularJobs,
      navigationOptions: {
        tabBarLabel: "Popular"
      }
    },
    Wishlist: {
      screen: Wishlist,
      navigationOptions: {
        tabBarLabel: "Wishlist"
      }
    }
  },
  {
    initialRouteName: 'Home',    
    tabBarOptions: {
      activeTintColor: primaryColor,
      inactiveTintColor: '#000000',
      upperCaseLabel: false,
      pressColor: '#efefef',
      tabBarPosition: 'top',
      indicatorStyle: {
        backgroundColor: primaryColor,
        height: 2,
      },
      labelStyle: {
        fontSize: 15,
      },
      tabStyle: {
        height: 32,
        marginHorizontal: 15,
      },
      style: {
        backgroundColor: '#ffffff',
        borderBottomWidth: 0,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 0,
        },
        shadowOpacity: 0,
        shadowRadius: 0,
        elevation: 0,
        }
    }
  },
);

Answer 1

You shouldn't export createAppContainer(TabNavigator) like what Docs says, instead you should put createAppContainer(TabNavigator) in a const and use it like a React Component like code below:

export default class HomeScreen extends Component<{}> {
render () {
        return (
            <View>
                  // your other views
                  <TabLayout />
            </View>
        );
    }
}

class OneScreen extends Component<{}> {
  render () {
      return (
        <View>
          <Text>One</Text>
        </View>
      );
  }
}

class TwoScreen extends Component<{}> {
  render () {
      return (
        <View>
          <Text>Two</Text>
        </View>
      );
  }
}

class ThreeScreen extends Component<{}> {
  render () {
      return (
        <View>
          <Text>Three</Text>
        </View>
      );
  }
}

const TabNavigator = createMaterialTopTabNavigator({
  One: {
    screen: OneScreen,
    navigationOptions: {
      tabBarLabel: "One"
    }
  },
  Two: {
    screen: TwoScreen,
    navigationOptions: {
      tabBarLabel: "Two"
    }
  },
  Three: {
    screen: ThreeScreen,
    navigationOptions: {
      tabBarLabel: "Three"
    }
  }
},
);

const TabLayout = createAppContainer(TabNavigator);