CODEWITHSUNDEEP
react-nativereact-native-navigation
HungrySoul
HungrySoul

Reputation: 1231

How to use a tab navigator inside a tab navigator?

I am new to React-Native and trying to create a app in which i want to use 2 tab navigator ; outer tab and inner tab.

outer tab for tanks, alerts and settings... inner tab inside tanks for mapview and listview...

export default class Home extends Component {
static navigationOptions = {
    header:null
};

constructor(props) {
    super(props);
    this.state = {
    }
}

render() {
    return (
        <MyApp/>
    );
}
}
export const MyApp = TabNavigator({

tanks: {
screen: TanksScreen
},
alerts: {
screen: AlertScreen
},
 Settings: {
    screen: SettingScreen
 },
},

And this following code in TanksScreen

export default class TanksScreen extends Component {
static navigationOptions = {
header:null
};

constructor(props) {
  super(props);
  this.state = {
  }
}
render() {
  return (
      <MapsView/>
  );
}
}
export const MapsView = TabNavigator({

Map: {
 screen: MapsScreen,
},
List: {
 screen: ListScreen,
},
},

By using the above code, i am able to get full functionality of outer tab navigator but when it comes to inner tab, the tab is neither not navigating to listview screen nor rendering any text or ui components in mapsview.

Am i doing anything wrong? or is there any way to accomplish this requirement. thanks in advance

Upvotes: 1

Views: 568

Answers (1)

Kraylog
Kraylog

Reputation: 7553

Since your TanksScreen component only returns the inner tabs, you can just plug them into the outer tab directly, which should solve the problem.

export const MyApp = TabNavigator({
  tanks: {
    screen: MapsView
  },
  alerts: {
    screen: AlertScreen
  },
  Settings: {
    screen: SettingScreen
  },
}

Upvotes: 1

Related Questions