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
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
Alright, so how I solved this was, replace
AdjustmentsIcon
withAdjustmentsVerticalIcon
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 inAdjustmentsIcon
, no icon filters out.They apparently changed it to
AdjustmentsVerticalIcon
.