title: Create sticky component for bottom tab with react navigation
body: <p><strong>Goal:</strong> Make the <code>Player Component</code> stateful when switching between bottom tabs, <code>Home</code> and <code>Settings</code> in react navigation, using <code>createBottomTavNavigator</code>.</p>
  <p>I have tried using <code>Player</code> component in both <code>Home</code> and <code>Setting</code> components. But I have a problem with that when I change the text in <code>Player</code> screen by clicking the button when I am inside <code>Home</code> component and then switch to the <code>Settings</code> tab, the text I entered in <code>Home</code> screen is not carried over to the <code>Settings</code> screen. I guess it is because <code>Settings</code> component imports a new <code>Player</code> component.</p>
  <p>So my question is how to make the <code>Player</code> component stateful when switching between those two bottom tabs?</p>
  <p>I am kind of hoping to build a player like in <code>Spotify</code> app in which the player stays stateful when I am switching between those bottom tabs as shown in the image below.</p>
  <p><img src="https://i.imgur.com/nb9t1h6.jpg" alt="Spotify stateful player" /></p>
  <p>Expo snack <a href="https://snack.expo.io/r1RKGFnYB" rel="nofollow noreferrer">here</a>!</p>
  <pre><code>import React from 'react';
  import { Text, View, Button } from 'react-native';
  import { createAppContainer } from 'react-navigation';
  import { createBottomTabNavigator } from 'react-navigation-tabs';
  
  class HomeScreen extends React.Component {
    render() {
      return (
        &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
          &lt;Text&gt;Home!&lt;/Text&gt;
          &lt;Player /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  class SettingsScreen extends React.Component {
    render() {
      return (
        &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
          &lt;Text&gt;Settings!&lt;/Text&gt;
          &lt;Player /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  class Player extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        text : 'text'
      }
    }
  
    changeText = () =&gt; {
      this.setState({
        text: 'hello'
      })
    }
    
    render() {
      return (
        &lt;View style={{ justifyContent: 'center', alignItems: 'center' }}&gt;
          &lt;Text&gt;{this.state.text}&lt;/Text&gt;
          &lt;Button
            title=&quot;Press&quot;
            onPress={() =&gt; this.changeText()}/&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const TabNavigator = createBottomTabNavigator({
    Home: { screen: HomeScreen },
    Settings: { screen: SettingsScreen },
  });
  
  export default createAppContainer(TabNavigator);
  </code></pre>
  <p><strong>How to reproduce the problem</strong></p>
  <p><strong>1.</strong> In <code>Home</code>, click the <code>Press</code> button which will change the text in <code>Player</code> component.</p>
  <p><strong>2.</strong> Go the <code>Settings</code> tab in the bottom. Now the text you entered in <code>Home</code> screen is gone!</p>