React native - React Navigation for multiple routes

Question

I am wondering is there any way to make StackNavigator inside TabNavigator with react-navigation, Right now I have TabNavigator like that in Router.js. I want app inside Add.js (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 Add.js file on addList constant

Router.js

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}) => (<FontAwesomeIcon name="plus-circle" size={24} color="#666"/>)
            }
        },
        Desktop: {
            screen: Desktop, navigationOptions: {
                title: 'Pulpit',
                label: 'Pulpit',
                tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="th-large" size={24} color="#666"/>)
            }
        },
        Notifications: {
            screen: Notifications, navigationOptions: {
                title: 'Powiadomienia',
                label: 'Powiadomienia',
                tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="envelope" size={24} color="#666"/>)
            }
        },
        Today: {
            screen: Today, navigationOptions: {
                title: 'Na dziś',
                label: 'Na dziś',
                tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="check-square" size={24} color="#666"/>)
            }
        },
        Menu: {
            screen: Menu, navigationOptions: {
                title: 'Menu',
                label: 'Menu',
                tabBarIcon: ({tintColor}) => (<EntypoIcon name="menu" size={24} color="#666"/>),
            }
        }
    }, {
        tabBarOptions: {
            activeTintColor: '#26b7ff',
            inactiveTintColor: '#ffffff',
            activeBackgroundColor: '#2E3035',
            style: {
                backgroundColor: '#14191f',
            }
        }
    });


    AppRegistry.registerComponent('estimobileapplication', () => estimobileapplication);

Add.js

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 (
            <ScrollView style={{marginTop: 50, paddingLeft: 20}}>
                <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
                    <FontAwesomeIcon name="plus-circle" size={30} color="#26b7ff"/>
                    <Text style={{textAlign: 'left', fontSize: 30, color: '#444444', marginLeft: 10}}>
                        Dodaj
                    </Text>
                </View>
                <List>
                    {addList.map((item, i) => (
                        <ListItem
                            key={i}
                            title={item.title}
                            onPress={() => this.onShowMore()}
                        />

                    ))}
                </List>
            </ScrollView>
        );
    }
}


export default Add;

Answer 1

According tho the react navigation docs you can nest as many navigators as you need. Just instead of defining a component for your tab in "screen", define a StackNavigator. This way, it will display the first component that your StakNavigator Shows.

Then in each item you define a navigate() to the next screen you need (I assume is the same screen for every item in the list) and pass the required data as a prop.