skip to Main Content

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.

HomeScreen code

import {
  View,
  Text,
  SafeAreaView,
  Image,
  TextInput,
  ScrollView,
} from "react-native";
import React, { useLayoutEffect } from "react";
import { useNavigation } from "@react-navigation/native";
import {
  UserIcon,
  ChevronDownIcon,
  SearchIcon,
  AdjustmentsIcon,
} from "react-native-heroicons/outline";
import Categories from "../components/Categories";

const HomeScreen = () => {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);

  return (
    <SafeAreaView className="bg-white pt-5 flex-col">
      {/* Header */}
      <View className="flex-row pb-3 items-center mx-4 space-x-2 px-4">
        <Image
          source={{
            url: "https://links.papareact.com/wru",
          }}
          className="h-7 w-7 bg-gray-300 p-4 rounded-full"
        />
        <View className="flex-1">
          <Text className="font-bold text-gray-400 text-xs">Deliver Now !</Text>
          <Text className="font-bold text-xl">
            Current Location
            <ChevronDownIcon size={20} color="#00cc88" />
          </Text>
        </View>

        <UserIcon size={35} color="#00cc88" />
      </View>

      {/* Search */}
      <View className="flex-row items-center space-x-2 pb-2 mx-4 ">
        <View className="flex-row flex-1 space-x-2 bg-gray-200 p-3">
          <SearchIcon color="gray" size={20} />
          <TextInput
            placeholder="Restros and Cuisines"
            keyboardType="default"
          />
        </View>

        <AdjustmentsIcon color="#00cc88" />
      </View>

      {/* Body */}
      <ScrollView
        className="bg-gray-100"
        contentContainerStyle={{
          paddingBottom: 100,
        }}
      >
        {/* Categories */}
        <Categories />
        {/* Featured Rows */}
      </ScrollView>
    </SafeAreaView>
  );
};

export default HomeScreen;

i don,t know what i particularly imported or exported wrong.
please help me out

import { View, Text } from 'react-native'
import React from 'react'

const Categories = () => {`enter code here`
  return (
    <View>
      <Text>Categories</Text>
    </View>
  )
}

export default Categories

2

Answers


  1. Chosen as BEST ANSWER

    struggled with the icons and got an error: Expected a string...something wrong with export/import...etc. youll have to search the names on heroicons website because they're different: SearchIcon = MagnifyingGlassIcon AdjustmentsIcon = AdjustmentsVerticalIcon


  2. Alright, so how I solved this was, replace AdjustmentsIcon with AdjustmentsVerticalIcon and your bug should be fixed. The reason for changing this is that if you search up the HeroIcons website for icons, and you type in AdjustmentsIcon, no icon filters out.
    They apparently changed it to AdjustmentsVerticalIcon.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search