StackNavigation and TabNavigation in the Same time

Question

I wanted to know how I can add tab navigation and stack navigation with react navigation in react native.

 import React, { Component } from 'react';
    import { Platform, StyleSheet, Text, View, Image, TouchableHighlight, ScrollView, Dimensions } from 'react-native';
    import {StackNavigator,TabNavigator} from 'react-navigation';
    import Scores from './src/scores.js';
    import Profile from './src/profile.js';
    import Favourite from './src/favourite.js'

   const MyApp = TabNavigator({
      Scores: {
        screen: Scores,
      },
      Favs: {
        screen:Favourite ,
      },
      Profile: {
        screen:Profile,
      },
    }, {
      tabBarPosition: 'bottom',
      animationEnabled: false,
      tabBarOptions: {
        activeTintColor: '#F7C01C',
      },
    });

    export default MyApp;

Here I have TabNavigation only working but I still need to add the stacknavigatio and maybe later I need to add Drawer Navigation.

Answer 1

You can nest Navigators. Just create a StackNavigator exactly as you created your TabNavigator and add it instead of a screen.

const MyFavs =  StackNavigator({
  FavouriteList: {
    screen: FavouriteList,
  },
  ViewFavourite: {
    screen: ViewFavourite,
  },
}, {
  initialRouteName: 'FavouriteList'
});


const MyApp = TabNavigator({
  Scores: {
    screen: Scores,
  },
  Favs: {
    screen: MyFavs,
  },
  Profile: {
    screen: Profile,
  },
}, {
  tabBarPosition: 'bottom',
  animationEnabled: false,
  tabBarOptions: {
    activeTintColor: '#F7C01C',
  },
});

export default MyApp;