I'm new to react native and I'm following along with a tutorial. This is my App.js file: App.js
import React, { useState, useEffect,FlatList } from 'react';
import {View,Text,ImageBackground,Button} from 'react-native';
import styles from './styles';
const ArticleItem = ({article}) => {
const { description, url, urlToImage } = article;
return (
<View>
<Image source={{ uri: urlToImage }} />
<Text>
{ title }
</Text>
<Text>
{ description }
</Text>
<Button onPress = { () => { console.log("Button pressed!")} } title="Open" />
<Button onPress = { () => { console.log("Button pressed!") } } title="Read later" />
</View>
)
}
const SplashScreen = (props) => {
return (
<View style = { styles.container } >
<ImageBackground style= { styles.backgroundImage } source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} >
<View style= { styles.logoContainer }>
<Text style = { styles.logoText }>
Newzzz
</Text>
<Text style = { styles.logoDescription }>
Get your doze of daily news!
</Text>
</View>
</ImageBackground>
</View>
);
}
const HomeScreen = (props) => {
console.log("articles: ", props.articles);
return (
<View>
<FlatList
data={ props.articles }
// renderItem={({item}) => <ArticleItem article = { item } />}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => <ArticleItem article = { item }/>}
/>
</View>
);
}
const App = () => {
const URL = 'https://raw.githubusercontent.com/nimramubashir/React-Native/fetch/articles.json';
const [articles, setArticles] = useState([]);
const [loading, setLoading ] = useState(true);
useEffect(()=>{
fetch(URL)
.then((response) => response.json())
.then((responseJson) => {
return responseJson.articles;
})
.then( articles => {
setArticles(articles);
console.log(articles);
setLoading(false);
})
.catch( error => {
console.error(error);
});
} , []);
if (loading){
return <SplashScreen />
} else {
return <HomeScreen articles = { articles }/>
}
};
export default App
I'm getting the following although I don't think I have any problems with the import/export statements.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of
HomeScreen
.
This error occurred after I changed my ArticleItem
component and added buttons. I'm importing the Button component. Is there any problem with the HomeScreen
component? I don't understand.
You have not imported
FlatList
which you render inHomeScreen
.