CODEWITHSUNDEEP
react-nativetabsreact-navigation
Muhammad Ashfaq
Muhammad Ashfaq

Reputation: 2511

createMaterialTopTabNavigator not rendring properly in one screen in react native

I am implementing createMaterialTopTabNavigator in one screen but nothing is rendering in my app. i am returning MainNavigator which is app container of this screen. am i making mistake to use to app containers or not ? if it is mistake then please guide me how to work with proper flow in react navigation like in app using drawer navigator ,bottom navigator and top navigator at same time.

App Flow :

MainScreenNavigation > MainJobScreen >

MainScreenNavigation code:

import React from "react";
import {createStackNavigator, createAppContainer} from "react-navigation";
import {Signin} from "../screens/Signin";
import {Splash} from '../screens/Splash';
import {HomeScreen} from '../screens/Home/HomeScreen'
import {Profile} from '../screens/Profile/Profile'
import {Notifications} from '../screens/Notifications/Notifications'
import {MainJobScreen} from '../screens/JobFeed/MainJobScreen'

export const MainScreenNavigation = createAppContainer(createStackNavigator({
    Home: {
        screen: Splash
    },
    Signin: {
        screen: Signin
    },
    HomeScreen: {
        screen: HomeScreen
    },
    Profile: {
        screen: Profile
    },
    Notifications: {
        screen: Notifications
    },
    JobFeed: {
        screen: MainJobScreen
    }


}));
;

MainJobScreen code: acutaly where i am using createMaterialTopNavigator

import React from 'react'
import {createMaterialTopTabNavigator,createAppContainer,createStackNavigator } from 'react-navigation'

import { AllTab } from './AllTab'
import { ActiveTab} from './ActiveTab'
import { CompletedTab } from './CompletedTab'
import { JobScreen} from './JobScreen'


const TabNavigator = createMaterialTopTabNavigator({
    TabOne: AllTab,
    TabTwo: ActiveTab,
    TabThree: CompletedTab,
},
{
    initialRouteName: 'TabOne',
    tabBarOptions: {
        style: {
            backgroundColor: 'red'
        }
    },
    tabBarPosition: 'top',
    swipeEnabled: true,
    animationEnabled: true,

})


TabNavigator.navigationOptions={
    headerTitle: 'JobFeed'
}
const MainNavigator= createAppContainer(createStackNavigator({
    Tabs: TabNavigator,
    MainScreen: JobScreen, 
},{
    initialRouteName: 'MainScreen'
}))


export class MainJobScreen extends React.Component{

    static navigationOptions = {
        headerTitle: 'JobFeed'
    }
    render(){
        return(
            <MainNavigator />
        )
    }
}

Help will be highly appreciated

Thanks in advance

Upvotes: 3

Views: 3192

Answers (1)

Rizwan Atta
Rizwan Atta

Reputation: 3295

Mixing the Nav Stacks is your solution here brother.

You have to put the tab navigator inside of your main navigator!

and when the navigation stack hits the TabScreen it will show up the first default screen of the tab navigator you have created.

//....your imports
export const MainScreenNavigation = createAppContainer(createStackNavigator({
    Home: {
        screen: Splash
    },
    Signin: {
        screen: Signin
    },
    HomeScreen: {
        screen: HomeScreen
    },
    Profile: {
        screen: Profile
    },
    Notifications: {
        screen: Notifications
    },
    JobFeed: {
        screen: MainJobScreen
    },
    JobFeed: {
        screen: MainJobScreen
    },
    TabScreen: {
        screen: TabNavigator  //------> add this in your main navigator
    }


}));
;

now the stack should go like this!

a file exporting your main navigatior which should be used in your App.js

and in that navigation stack your Tabnavigation stack should be added like you add any other screen or so as shown in code

NOTE ! you should be separately exporting the TabScreen Navigator from a file! and if you are using the navigator in your code file MainScreen then that main Screen should be in the Tab navigation stack's first screens!

Upvotes: 6

Related Questions