React Native ReferenceError Can't find variable

Question

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)

Answer 1

As Derek mentioned,

you have never defined MyAppHeader, therefore you will get error.

You could delete all <MyAppHeader></MyAppHeader> in your project, and it should work!

Otherwise you will need to defined MyAppHeader Component to make it works.

Clearly post for React Components Components and Props - React

Hope it will help.

Answer 2

That way you'il do what you want.

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>
                        {this.state.mainText}
                        {this.state.subText}
                </MyAppHeaderText>
            </View>
        )
    }
}