title: How to create dynamic tabs in React Navigation v3
body: <p>I have stack navigator wrapped with app container:</p>
  
  <pre><code>const AppNavigator = createStackNavigator({
    Home: {
      screen: Home,
    },
  });
  
  export default createAppContainer(AppNavigator);
  </code></pre>
  
  <p>Home should have dynamic tabs. I want to load some info from backend and then generate tabs.</p>
  
  <p>And here is my <strong>Home</strong> component:</p>
  
  <pre><code>class Home extends Component {
    get tabs() {
      return {
        Main: { screen: Demo },
        World: { screen: Demo },
      };
    }
  
    get tabOptions() {
      return {
        // options...
      };
    }
  
    render() {
      const Tabs = createMaterialTopTabNavigator(this.tabs, this.tabOptions);
      return &lt;Tabs /&gt;;
    }
  }
  </code></pre>
  
  <p>In this case I am getting this error:</p>
  
  <p><a href="https://i.stack.imgur.com/Rn0RA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rn0RA.png" alt="error 1"></a></p>
  
  <p>But if I am wrapping with createAppContainer...</p>
  
  <pre><code>const Tabs = createAppContainer(createMaterialTopTabNavigator(this.tabs, this.tabOptions));
  </code></pre>
  
  <p>...then I am getting warning about more than one container in app.</p>
  
  <p><a href="https://i.stack.imgur.com/2Nj2r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Nj2r.png" alt="warning"></a></p>
  
  <p>So how to make dynamic tabs in a right way?</p>
  
  <hr>
  
  <p><strong>UPD 1.</strong>  Real code of getting tabs which I use now with yellow warning.</p>
  
  <pre><code>get tabs() {
    const { categories } = this.props;
    return reduce((acc, item) =&gt; assoc(prop('name', item), Demo, acc), {})(categories); // ramda
  }
  </code></pre>