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

[hugoskn]

Im getting error: "Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined". I'm using react-native-vector-icons/FontAwesome": "6.1.0". With Expo SDK 31.0.0 and 32.0.0.

I add the reference at the top like: "import {Icon} from 'react-native-vector-icons/FontAwesome';" And then I try to add a simple icon like: <Icon name='envelope' color='black' /> but I got the error mentioned.

Reproducible Demo https://snack.expo.io/@hugoskn/iconerror

[kufii]

I'm getting this error as well, here's my code

import React from 'react';
import { TabBarIOS, Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

export default class Container extends React.Component {
	constructor(props) {
		super(props);
		this.state = { tab: 'home' };
	}
	render() {
		return (
			<TabBarIOS>
				<Icon.TabBarItemIOS
					title="Home"
					iconName="ios-home"
					selected={this.state.tab === 'home'}
					onPress={() => this.setState({ tab: 'home' })}>
					<Text>Home</Text>
				</Icon.TabBarItemIOS>
				<Icon.TabBarItemIOS
					title="Outline"
					iconName="ios-checkbox"
					selected={this.state.tab === 'checkbox'}
					onPress={() => this.setState({ tab: 'checkbox' })}>
					<Text>Outline</Text>
				</Icon.TabBarItemIOS>
			</TabBarIOS>
		);
	}
}

I should note that using <Icon> outside of TabBarIOS works fine, just Icon.TabBarItemIOS fails

[sinansonmez]

@hugoskn I had the same issue and didnt find a solution for react-native-vector-icons. What I did instead was using Expo's icons by adding code below. You may also think about doing the same if you are using Expo.

import { FontAwesome } from '@expo/vector-icons';
<FontAwesome name='envelope' color='black' />

[garucin27]

I am getting the same error, did you find the solution without using the expo icons?

[sfs-atul]

`import React from "react"; import { View, Text, StyleSheet, Platform } from "react-native"; import {withNavigation} from 'react-navigation' import Icon from 'react-native-vector-icons';

const ShoppingCartIcon = (props) => ( <View style={[{ padding: 5 }, Platform.OS == 'android' ? styles.iconContainer : null]}>

    <Text style={{ color: 'red', fontWeight: 'bold' }}>Text</Text>

<Icon onPress={() => this.props.navigation.navigate('Cart')} name="ios-cart" size={30} />

) export default withNavigation(ShoppingCartIcon);

const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center' }, iconContainer: { paddingLeft: 20, paddingTop: 10, marginRight: 5 } });`

can anyone help me with this? I am using: "react-native-vector-icons": "^6.6.0", "react-native": "0.61.5",

[sfs-atul]

I'm getting this error as well, here's my code

import React from 'react';
import { TabBarIOS, Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

export default class Container extends React.Component {
	constructor(props) {
		super(props);
		this.state = { tab: 'home' };
	}
	render() {
		return (
			<TabBarIOS>
				<Icon.TabBarItemIOS
					title="Home"
					iconName="ios-home"
					selected={this.state.tab === 'home'}
					onPress={() => this.setState({ tab: 'home' })}>
					<Text>Home</Text>
				</Icon.TabBarItemIOS>
				<Icon.TabBarItemIOS
					title="Outline"
					iconName="ios-checkbox"
					selected={this.state.tab === 'checkbox'}
					onPress={() => this.setState({ tab: 'checkbox' })}>
					<Text>Outline</Text>
				</Icon.TabBarItemIOS>
			</TabBarIOS>
		);
	}
}

I should note that using outside of TabBarIOS works fine, just Icon.TabBarItemIOS fails

did you find any solution?

[thachhuynh95]

I have the same issue:

import { Icon } from 'react-native-vector-icons/FontAwesome'

    render() {
        return (
        <View style={styles.container}>
            <Searchbar
                style={styles.searchBar}
                ref={ref=>this.searchBar = ref}
                placeholder={this.props.route.params.categoryTitle}
                onChangeText={this.onChangeTextSearchBar}
                onIconPress={this.onSearchIconPress}
                value={this.state.searchQuery}
                />
            <Icon name='sort' size={30} color="#900" />
            <ScrollView>
                {this.state.dishes}
            </ScrollView>
        </View>
        )
    }

[raazatul7]

I have the same issue:

import { Icon } from 'react-native-vector-icons/FontAwesome'

    render() {
        return (
        <View style={styles.container}>
            <Searchbar
                style={styles.searchBar}
                ref={ref=>this.searchBar = ref}
                placeholder={this.props.route.params.categoryTitle}
                onChangeText={this.onChangeTextSearchBar}
                onIconPress={this.onSearchIconPress}
                value={this.state.searchQuery}
                />
            <Icon name='sort' size={30} color="#900" />
            <ScrollView>
                {this.state.dishes}
            </ScrollView>
        </View>
        )
    }

try using style={{height:30,width:30}} in place of size={30}

[jthoward64]

Same issue with FontAwesome5, I have tried importing as Icon and as FontAwesome5

[Quartzic]

I resolved this issue by importing like this: import Icon from "react-native-vector-icons/MaterialIcons"; instead of like this: import { Icon } from "react-native-vector-icons/MaterialIcons";