title: how to pass data to a component which is outside of the class
body: <p>I m taking username from my previous page by passing it as a parameter and I m getting the data in my new page as <strong>this.props.userName</strong> </p>
  
  <p>Now I want to pass this value to the other component I m using in my tab view. </p>
  
  <p>I m using <em>React Native router flux</em> and <em>react native tab view</em>.</p>
  
  <p>Problem: since I m using constant to store the component above the class I m not able to pass the props data to that component</p>
  
  <pre><code>const FirstRoute = () =&gt; &lt;Profile /&gt;;
  const SecondRoute = () =&gt; &lt;Video /&gt;;
  const ThirdRoute = () =&gt; &lt;View style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.2)'}} /&gt;;
  
  export default class Dashboard extends React.Component {
  
      constructor(props) {
          super(props);
          console.log(this.props.userName, 'props'); // want to pass this data to FirstRoute i.e: in &lt;Profile /&gt;
      }
  
      state = {
          index: 1,
          routes: [
              {key: 'first', icon: 'md-contact'},
              {key: 'second', icon: 'md-videocam'},
              {key: 'third', icon: 'md-arrow-dropright-circle'},
          ],
      };
  
      _renderScene = SceneMap({
          first: FirstRoute,
          second: SecondRoute,
          third: ThirdRoute
      });
  
      render() {
          return (
              &lt;TabView
                  tabBarPosition='bottom'
                  navigationState={this.state}
                  renderScene={this._renderScene}
                  onIndexChange={this._handleIndexChange} // not included to decrease the code length
                  initialLayout={initialLayout} // not included to decrease the code length
              /&gt;
          );
      }
  }
  </code></pre>