react native Uncaught Error: Invariant Violation: Element type is invalid: expected a string #17138
Description
Hi guys,
I have problem with react native
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
file App.js
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Articles from './src/components/Articles';
export default class myapp extends Component {
componentWillMount() {
this.setState({
articles : [
{
title : 'React Native',
imageUrl : { uri : 'https://roocket.ir/public/image/2017/8/9/react-native.png'},
body : 'react-native '
},
{
title : 'webpack',
imageUrl : { uri : 'https://roocket.ir/public/image/2017/7/27/webpack.jpg'},
body : 'Webpack '
},
{
title : 'Angular Cli',
imageUrl : { uri : 'https://roocket.ir/public/image/2017/7/26/angular-1.png'},
body : 'Angular cli '
},
{
title : 'Laravel',
imageUrl : { uri : 'https://roocket.ir/public/image/2017/6/13/cms-laravel-cover-1.jpg'},
body : 'Laravel'
},
{
title : 'Redux',
imageUrl : { uri : 'https://roocket.ir/public/image/2017/8/9/react-native.png'},
body : 'Redux '
},
{
title : 'php',
imageUrl : { uri : 'https://roocket.ir/public/image/2017/6/13/oop-cover-1.jpg'},
body : 'php'
},
]
})
}
render() {
return (
<Articles articles={this.state.articles} />
)
}
}
AppRegistry.registerComponent('myapp', () => myapp);
Articles.js
import React , { Component } from 'react';
import { View, Image, Text, StyleSheet, Platform } from 'react-native';
export default class Article extends Component {
render() {
const { title, image, body } = this.props;
return(
<View style={styles.container}>
<Image source={image} style={styles.image} />
<View style={{ padding: 10 }}>
<Text style={styles.title}>
{ title }
</Text>
<Text numberOfLines={4} style={styles.body}>
{ body }
</Text>
</View>
</View>
)
}
}
file Article.js
import React, {Component} from 'react';
import View from 'react-native';
import Article from './Article';
export default class Articles extends Component {
_renderArticles(articles) {
return articles.map((article, index) => <Article key={index} image={article.imageUrl} title=
{article.title} body={article.body}/>
)
}
render() {
const {articles} = this.props;
return (
<View>
{this._renderArticles(articles)}
</View>
)
}
}