Element type invalid in React Native

400 views Asked by At

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.

1

There are 1 answers

3
trixn On

You have not imported FlatList which you render in HomeScreen.