CODEWITHSUNDEEP
react-native
Niloo
Niloo

Reputation: 29

invariant violation element type is invalid

Guys I need to define a simple component in RN, but I keep getting this error: enter image description here

and this is my simple component code:

export default class Welcome extends Component {   
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

and the way I import it into my page(Intro.js):

export default class App extends Component<{}> {
    render() {
        return (
            <Welcome name="Sara" />
        );
    }
}

Finally I call the page including the component(Intro.js) in my app.js like this:

import { Intro } from './app/screens/Intro.js';

export default class App extends Component {
    render(){
        return(
            <Intro />
        )
    }
}

version I'm using:

react-native-cli: 2.0.1
react-native: 0.49.3

Appreciate your answers

Upvotes: 0

Views: 498

Answers (1)

Prince
Prince

Reputation: 851

As i can see in your code 

export default class Welcome extends Component {   
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

You had use which is html tag not a react natine element or component. So this may be the reason for the error. You can use this code.

export default class Welcome extends Component {   
  render() {
    return <Text>Hello, {this.props.name}</Text>;
  }
}

Upvotes: 3

Related Questions