Search code examples
react-nativereact-native-iosreact-native-0.46stack-navigator

TabBar inSide the StackNavigation in React Native


I will take StackNavigation for Push and Pop with its parameter. Its Working fine. But Now I want to implement after some screen TabBar after StackNavigation, Have any Idea How to Take TabBar after StackNavigation.

Note : I want to implement Custom TabBar.

enter image description here

Please help me.


Solution

  • You can do something like

    let StackWithTabs1 = StackNavigator({ // stackNavigator inside the tabNavigator
      Screen3:{
        screen: Screen3
      }
      ,Screen4:{
        screen: Screen4
      }
    });
    
    let StackWithTabs2 = StackNavigator({ // stackNavigator inside the tabNavigator
          Screen5:{
            screen: Screen5
          }
          ,Screen6:{
            screen: Screen6
          }
        });
    
    let tab_bar = TabNavigator({
          StackWithTabs1 : {
            screen: StackWithTabs1 // Calling the stackNavigators that going to go inside the tabNavigator
          },
          StackWithTabs2 : {
            screen: StackWithTabs2 
          }
        });
    
    let InitialStackNavigator = StackNavigator({
      Screen1: {
        screen: Screen1
      },
      Screen2: {
        screen: Screen2
      },
      tabBar: {
        screen: tab_bar // Calling the tabNavigator, wich contains the other stackNavigators
      }
    });
    

    Just declare your tabNavigator and its stackNavigators apart and then call them on the main stackNavigator.