how to pass data to a component which is outside of the class

Question

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 this.props.userName

Now I want to pass this value to the other component I m using in my tab view.

I m using React Native router flux and react native tab view.

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

const FirstRoute = () => <Profile />;
const SecondRoute = () => <Video />;
const ThirdRoute = () => <View style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.2)'}} />;

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 <Profile />
    }

    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 (
            <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
            />
        );
    }
}

Answer 1

You can expand the _renderScene func as

_renderScene = ({ route }) => {
  switch (route.key) {
    case 'first':
      return <Profile userName={this.props.userName} />;
    case 'second':
      return <Video />;
    case 'third':
      return <View style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.2)'}} />;
    default:
      return null;
  }
};