title: React native - React Navigation for multiple routes
body: <p>I am wondering is there any way to make StackNavigator inside TabNavigator with react-navigation, Right now I have TabNavigator like that in <strong>Router.js</strong>. I want app inside <strong>Add.js</strong> (Add screen) to make StackNavigator inside ListItem. Every element of ListItem Should get user to other screen. So If I press first option it should get me to "AddCalendarEvent" etc. Like you see in <strong>Add.js</strong> file on <strong>addList</strong> constant</p>
  
  <p><strong>Router.js</strong></p>
  
  <pre><code>import React from 'react';
      import {
          AppRegistry,
          Text,
          View,
          Button
      } from 'react-native';
      import {StackNavigator, TabNavigator} from 'react-navigation';
  
      import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
      import EntypoIcon from 'react-native-vector-icons/Entypo';
  
      import Login from './Login';
      import Menu from './Menu';
      import Desktop from './Desktop';
      import Notifications from './Notifications';
      import Today from './Today';
      import Add from './Add';
  
      const onClickNavigation = StackNavigator({
          Login: {screen: Login}
      });
  
      const estimobileapplication = TabNavigator({
          Add: {
              screen: Add, navigationOptions: {
                  title: 'Dodaj',
                  label: 'Dodaj',
                  tabBarIcon: ({tintColor}) =&gt; (&lt;FontAwesomeIcon name="plus-circle" size={24} color="#666"/&gt;)
              }
          },
          Desktop: {
              screen: Desktop, navigationOptions: {
                  title: 'Pulpit',
                  label: 'Pulpit',
                  tabBarIcon: ({tintColor}) =&gt; (&lt;FontAwesomeIcon name="th-large" size={24} color="#666"/&gt;)
              }
          },
          Notifications: {
              screen: Notifications, navigationOptions: {
                  title: 'Powiadomienia',
                  label: 'Powiadomienia',
                  tabBarIcon: ({tintColor}) =&gt; (&lt;FontAwesomeIcon name="envelope" size={24} color="#666"/&gt;)
              }
          },
          Today: {
              screen: Today, navigationOptions: {
                  title: 'Na dziś',
                  label: 'Na dziś',
                  tabBarIcon: ({tintColor}) =&gt; (&lt;FontAwesomeIcon name="check-square" size={24} color="#666"/&gt;)
              }
          },
          Menu: {
              screen: Menu, navigationOptions: {
                  title: 'Menu',
                  label: 'Menu',
                  tabBarIcon: ({tintColor}) =&gt; (&lt;EntypoIcon name="menu" size={24} color="#666"/&gt;),
              }
          }
      }, {
          tabBarOptions: {
              activeTintColor: '#26b7ff',
              inactiveTintColor: '#ffffff',
              activeBackgroundColor: '#2E3035',
              style: {
                  backgroundColor: '#14191f',
              }
          }
      });
  
  
      AppRegistry.registerComponent('estimobileapplication', () =&gt; estimobileapplication);
  </code></pre>
  
  <p><strong>Add.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import {
      ScrollView,
      Text,
      View,
      NavigatorIOS
  } from 'react-native';
  
  import {List, ListItem} from 'react-native-elements';
  
  import AddCalendarEvent from './add_offer_components/AddCalendarEvent';
  import AddOfferFull from './add_offer_components/AddOfferFull';
  import AddOfferQuick from './add_offer_components/AddOfferQuick';
  import AddQuestion from './add_offer_components/AddQuestion';
  import AddUser from './add_offer_components/AddUser';
  import GetInvoice from './add_offer_components/GetInvoice';
  import SellBuyTransaction from './add_offer_components/SellBuyTransaction';
  import SendEmailToClient from './add_offer_components/SendEmailToClient';
  import SendNotification from './add_offer_components/SendNotification';
  
  import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
  
  class Add extends Component {
  
      onShowMore() {
          this.props.navigation.navigate('AddCalendarEvent');
      };
  
      render() {
  
          const addList = [
              {
                  title: 'Nowa oferta lub zlecenie - szybkie dodanie',
                  component: AddOfferQuick
              },
              {
                  title: 'Nowa oferta lub zlecenie - pełne dodanie',
                  component: AddOfferFull
              },
              {
                  title: 'Nowe zapytanie',
                  component: AddQuestion
              },
              {
                  title: 'Nowy termin w kalendarzu',
                  component: AddCalendarEvent
              },
              {
                  title: 'Wyślij e-mail do klienta',
                  component: SendEmailToClient
              },
              {
                  title: 'Transakcja kupna/najmu',
                  component: SellBuyTransaction
              },
              {
                  title: 'Wystaw fakturę',
                  component: GetInvoice
              },
              {
                  title: 'Wyślij powiadomienie',
                  component: SendNotification
              },
              {
                  title: 'Dodaj użytkownika',
                  component: AddUser
              }
          ];
  
          return (
              &lt;ScrollView style={{marginTop: 50, paddingLeft: 20}}&gt;
                  &lt;View style={{flexDirection: 'row', flexWrap: 'wrap'}}&gt;
                      &lt;FontAwesomeIcon name="plus-circle" size={30} color="#26b7ff"/&gt;
                      &lt;Text style={{textAlign: 'left', fontSize: 30, color: '#444444', marginLeft: 10}}&gt;
                          Dodaj
                      &lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;List&gt;
                      {addList.map((item, i) =&gt; (
                          &lt;ListItem
                              key={i}
                              title={item.title}
                              onPress={() =&gt; this.onShowMore()}
                          /&gt;
  
                      ))}
                  &lt;/List&gt;
              &lt;/ScrollView&gt;
          );
      }
  }
  
  
  export default Add;
  </code></pre>