title: Render two navigators
body: <p>There is a Login.js module, with this module the user can log in. If the user data is correct, then the user switches to another Secured.js module. For switching from the module to the module I use StackNavigator. In the Secured.js module, Tabs should be displayed below. For this I use TabNavigator. The problem is that when I try to render tabs, it does not work for me, because React Native says that two navigators can not be created on one page. I tried to google, but I could not find anything worthwhile, except for the advice to update React Native, saying "this is a bug of the old version" (I tried too, but it didn't help). Is there any ideas how I can fix it?</p>
  
  <p><a href="https://i.stack.imgur.com/MMxn3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MMxn3.jpg" alt="The error"></a></p>
  
  <p>Secured.js </p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    ScrollView,
    Text,
    View,
    Button,
    StyleSheet,
    FlatList
  } from 'react-native';
  // Import getNews function from news.js
  import { getNews } from '../screens/news';
  // We'll get to this one later
  import Article from '../components/Article';
  import Tabs from '../screens/Tabs';
  
  export default class Secured extends React.Component {
    static navigationOptions = {
     title: "Neuigkeiten",
     headerTintColor: "#FF0000",
     headerLeft: null,
  }; 
  constructor(props) {
    super(props);
    this.state = { articles: [], refreshing: true };
    this.fetchNews = this.fetchNews.bind(this);
  }
  // Called after a component is mounted
  componentDidMount() {
    this.fetchNews();
  }
  
  fetchNews() {
    getNews()
    .then(articles =&gt; this.setState({ articles, refreshing: false }))
    .catch(() =&gt; this.setState({ refreshing: false }));
   }
  
   handleRefresh() {
     this.setState(
     {
      refreshing: true
    },
     () =&gt; this.fetchNews()
    );
   }
  
   render() {
    return (
     &lt;View&gt;
    &lt;FlatList
      data={this.state.articles}
      renderItem={({ item }) =&gt; &lt;Article article={item} /&gt;}
      keyExtractor={item =&gt; item.url}
      refreshing={this.state.refreshing}
      onRefresh={this.handleRefresh.bind(this)}
    /&gt;
      &lt;View&gt;&lt;Tabs /&gt;&lt;/View&gt;
    &lt;/View&gt;
  );
  }
  }
  </code></pre>
  
  <p>Tabs.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { createBottomTabNavigator } from 'react-navigation';
  import Secured from '../screens/Secured';
  import Page1 from '../screens/Page1';
  import Page2 from '../screens/Page2';
  import Page3 from '../screens/Page3';
  
  export default createBottomTabNavigator({
  ///  Secured: {screen:Secured,},
   Page1: {screen:Page1,},
   Page2: {screen:Page2,},
   Page3: {screen:Page3,}
  });
  </code></pre>