Element type is invalid: Expected String

Question

I checked all code but didn't found the mistake which can cause such a strange error. As you see it's exported while it says you likely forget to export. Here is the code with the full list of imports:

 import "expo";
import React from "react";
import {Image, TouchableHighlight} from "react-native";
import {
  Content,
  Left,
  Right,
  Icon,
  CardItem,
  Card,
  Button,
  Text,
  Body,
  Row,
  Col,
  Grid,
  Thumbnail,
  ScrollView

} from "native-base";

import {dataRow1,dataRow2,dataRow3,dataRow4} from "../data/HomeData";
import { primary, secondary, grey } from '../styles/variables'; 


    const HomeContent = props => {
      return (
        <Content>
        <ScrollView horizontal>

          {dataRow1.map((item, idx) => {
            return <CardItemContainer {...props} key={idx} item={item} />;
          })}
            </ScrollView>
         <ScrollView horizontal>

          {dataRow2.map((item, idx) => {
            return <CardItemContainer {...props} key={idx} item={item} />;
          })}
            </ScrollView>
         <ScrollView horizontal>
              {dataRow3.map((item, idx) => {
            return <CardItemContainer {...props} key={idx} item={item} />;
          })}
            </ScrollView>
         <ScrollView horizontal>

          {dataRow4.map((item, idx) => {
            return <CardItemContainer {...props} key={idx} item={item} />;
          })}

        </ScrollView>
    </Content>
      );
    };


    const CardItemContainer = ({item, navigation}) => {
      return (
        <Card style={{marginBottom: 10}}>
          <TouchableHighlight onPress={() => navigation.navigate("Items")}>
            <CardItem cardBody>
              <Image
                source={item.image}
                style={styles.img}
          />
            </CardItem>
          </TouchableHighlight>
          <CardItem>
        <Text style={{color:grey}}> {item.title} </Text>

          </CardItem>
        </Card>
      );
    };


    const styles = {
      img:{
        height: 200,
         width: null,
          flex: 1
      },
    }

    export default HomeContent;

What can cause it and what is wrong? Can you help me please to solve this issue?

Thanks in advance!

Can you try to change order of HomeContent and CardItemContainer please. — bennygenel, Mar 12 '18 at 10:14

score 0 · Answer 1 · answered Mar 12 '18 at 10:24

0

It looks like you have not imported any html tag reference from react-native. Every HTML tag is a element.

Let's suppose if you have Text tag then you must import it like import { Text} from react-native .

answered Mar 12 '18 at 10:24

Shrinath

364
1
13

score 0 · Answer 2 · answered Mar 12 '18 at 10:33

You should import ScrollView from react-native instead of native-base.

After removing ScrollView from native base import's line include it in react-native's import line like this:

import {Image, TouchableHighlight, ScrollView} from "react-native";

Element type is invalid: Expected String

2 Answers2