Have been going through the documentation in https://facebook.github.io/react-native/docs/text.html . Its not clear how to link the reference between the two classes. I am trying to use the tag instead of and it this gives no reference found error.

Code :

import React, {Component} from 'react';

import {

    Text,

    View,

    AppRegistry,

} from 'react-native';



class MyAppHeaderText extends Component {



    render() {

        return(

            <MyAppHeader>

                <Text style={{fontSize:20}}>

                    {this.props.children}

                </Text>

            </MyAppHeader>

        )

    }

}



class Test2 extends Component {



    constructor(props){

        super(props);



        this.state = {

            mainText: 'This is Bird',

            subText : 'Not dino'

        }

    }



    render() {

        return(

            <View>

                {/* <Text>



                    {this.state.mainText}

                    {this.state.subText}

                </Text> */}

                <MyAppHeaderText>

                    <MyAppHeader>

                        {this.state.mainText}

                        {this.state.subText}

                    </MyAppHeader>

                </MyAppHeaderText>

            </View>

        )

    }

}



export default MyAppHeaderText;



AppRegistry.registerComponent('AwesomeProject',() => Test2);

Error :

ReferenceError: Can't find variable: MyAppHeader

This error is located at:
in Test2 (at renderApplication.js:35)
in RCTView (at View.js:113)
in View (at AppContainer.js:102)
in RCTView (at View.js:113)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)