CODEWITHSUNDEEP
reactjsreact-native
Jay Alli
Jay Alli

Reputation: 49

Invariant Violation: Element type is invalid: expected a string (for built in components) or a class/function but got: undefined

I am getting this error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: undefined

I have looked at other solutions but none of them have been able to work

This is my code

      import React, {
      Component,
      useState,
      useEffect,
      ActivityIndicator,
    } from "react";
    import { View, Text, StyleSheet } from "react-native";
    import { ScreenContainer } from "react-native-screens";

    export const Home = () => {
      const [isLoading, setisLoading] = useState(true);
      const [dataSource, setdataSource] = useState(null);

      useEffect(() => {
        return fetch("https://facebook.github.io/react-native/movies.json")
          .then((response) => response.json())
          .then((responseJson) => {
            setisLoading(false), setdataSource(responseJson.movies);
          });

      });
      if (isLoading) {
        return (
          <View>
            <ActivityIndicator />
          </View>
        );
      } else {
        let moviest = dataSource.map((val, key) => {
          return (
            <View key={key}>
              <Text>{val.title}</Text>
            </View>
          );
        });

        return (
          <ScreenContainer style={styles.container}>
            <View>
              <Text>These are the movies</Text>
              {moviest} 
              {/* <Apiusers2 /> */}
            </View>
          </ScreenContainer>
        );
      }
    };

Upvotes: 1

Views: 141

Answers (1)

Brian Thompson
Brian Thompson

Reputation: 14355

ActivityIndicator is an export of react-native, not react.

Change to this:

import React, {
  Component,
  useState,
  useEffect,
} from "react";
import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
import { ScreenContainer } from "react-native-screens";

In the future, this error almost always is the result of an incorrect import. Sometimes its a mixup of default vs named imports, sometimes the import is cased wrong ("Activityindicator" instead of "ActivityIndicator" for example), or sometimes it's the wrong relative path or node module (like in this case).

Checking each import should be the first debugging step when you get this error.

Upvotes: 2

Related Questions