Rover
Rover

Reputation: 768

Use multiple screens on the single tab

Hello I am using this code in the react native for creating tabs. but i want to use multiple screens on the single according to the user pressed buttons. so how can i do this in react native

const TabNavigator = createBottomTabNavigator(  
    {  
      Home:{  
        screen:Screen1,  
        navigationOptions:{  
          tabBarLabel:'firsttab',  
          tabBarIcon:({tintColor})=>(  
              <Image source = {require("../../Images/react-logo.png")} style={{width : 25 , height:25}}/> 
          )  
        }  
      },

i am getting screen1 but i want that on click firsttab i want to switch tab screens. how can i do this.

Upvotes: 0

Views: 1730

Answers (2)

Gaurav Roy
Gaurav Roy

Reputation: 12225

It's something like you have to create a stackNavigator and use it in the bbottomTabNavigator . see the below code :

const AppStack = createStackNavigator(
  {
    HomeScreen: {
      screen: Home
    },
    AirportMeeting:{
      screen:AirportMeeting
    },
    MeetingPoint:{
      screen:MeetingPoint
    },
    DriverDetails:{
      screen:DriverDetails
    },
    },
  {

    initialRouteName:"HomeCard",

  }
);

and now in your bottomtab navigator , you just include AppStack and other screens ,

const TabNavigator = createBottomTabNavigator({
  Home: AppStack,
  Notification:Notifications,
  Account: SettingsScreen,

});

here Home has appstack and app stack has multiple screens inside it. Im using react-navigation for it . check the link react navigation . .

and also im using createStackNavigator and createBottomTabNavigator , check in there docs.

Hope it helps. feel free for doubts/

Upvotes: 1

Cain&#227; Frei
Cain&#227; Frei

Reputation: 1

const Screen1 = createStackNavigator({
  //...path your screen1,
});

const Screen2 = createStackNavigator({
  //...path your screen2,
});

const TabNavigator = createBottomTabNavigator({
  Screen1,
  Screen2
});

Upvotes: 0

Related Questions