title: How to pass current state of App to Tab Navigation Screen
body: <p>If I'm using React Navigation v5, what is the best way to pass the current state of a parent component (in my case, the main App) down through a Tab and Stack navigator to a screen that I'd like to use the current state in?</p>
  
  <p>Following the documentation, I have created a stack navigator for each tab that holds the respective screens.</p>
  
  <p>App.js contains a state that needs to be used for a few things. Most importantly, it will provide badge count on the Tab navigator, as well as be a source of Flatlist data on one of the tab screens.</p>
  
  <p>What is the correct approach to getting the state from App all the way down to a child component in a stack navigator in a tab navigator?</p>
  
  <h2>App.js</h2>
  
  <pre><code>const Tab = createBottomTabNavigator()
  
  export default class App extends React.Component {
    constructor(props){
      super(props)
      this.state = {
        neededArray: []
      }
    }
  
    const updateTheArray = (newArray) =&gt; {
      this.setState({
        neededArray: newArray
      })
    }
  
    componentDidMount(){
      //Listener that searches for nearby bluetooth beacons and updates the array with the passed function
      startObserver(updateTheArray)
    }
  
    componentWillUnmount(){
      stopObserver()
    }
  
    render(){
      return(
        &lt;NavigationContainer&gt;
          &lt;Tab.Navigator&gt;
            &lt;Tab.Screen
              name = "Home"
              component = { HomeStack }/&gt;
            &lt;Tab.Screen
              name = "About"
              component = { AboutStack }/&gt;
  
            //The Stack that contains the screen that I need to use the App's state in
            &lt;Tab.Screen
              name = "Nearby"
              component = { NearbyStack }/&gt;
          &lt;/Tab.Navigator&gt;
        &lt;/NavigationContainer&gt;
      )
    }
  }
  </code></pre>
  
  <h2>NearbyStack.js</h2>
  
  <pre><code>//This stack holds the screen that I need to use the App's state in
  
  const NearbyStackNav = createStackNav()
  
  const NearbyStack = () =&gt; {
    return(
      &lt;NearbyStackNav.Navigator&gt;
        &lt;NearbyStackNav.Screen
          name = "Nearby"
          component = { NearbyScreen }
        /&gt;
      &lt;/NearbyStackNav.Navigator&gt;
    )
  }
  </code></pre>
  
  <h2>NearbyScreen.js</h2>
  
  <pre><code>//The screen that I want to use the App's state in
  const NearbyScreen = () =&gt; {
    return(
      &lt;View&gt;
        &lt;FlatList
          //Where I would like to use the App's state
        /&gt;
      &lt;/View&gt;
    )
  }
  </code></pre>