Title rewritten to: Error: Invalid element type: Expected string (for built-in components) or class/function (for composite components) but got undefined element type

Question

How can I solve this problem in my React Native code? The error reads "Error: Invalid element type: expected string (for built-in components) or class/function (for composite components), but got undefined. You may have forgotten to export the component from the file in which it was defined, or There may be a confusion between default and named imports. Please check the rendering method of TopNavigation.”

I tried restarting the application and the machine but this error didn't go away, can anyone help me fix this?

这是我的导出方式：

import { StyleSheet, View, Image } from 'react-native'
import React from 'react'
import logo from '../../assets/Logo.png';
import { icons1, logo2 } from '../Styles/styles';
import { Ionicons } from 'react-native-vector-icons';
import { Entypo } from 'react-native-vector-icons';

export default TopNavigation = ({ navigation, page }) => {

    return (
        <View style={page === 'home' ? styles.container : {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '100%',
            paddingVertical: 10,
            position: 'absolute',
            top: 0,
            zIndex: 100,
            backgroundColor: 'black',
        }}>
            <Entypo name="camera" size={24} color="black" style={icons1}
                onPress={() => navigation.navigate('c')}
            />
            {
                page === 'home' ? <Image source={logo} style={logo2} /> :
                    <Image />
            }
         
            {
                page === 'profile' &&
                <Ionicons name="settings-sharp"
                    size={24}
                    color="black"
                    style={styles.icons11}
                    onPress={() => navigation.navigate('settings')}
                />
            }
        </View>

    )
}

这是如何使用该组件的：

从 '../../Components/TopNavigation' 导入 TopNavigation;

我的依赖项：

"dependencies": {
"@react-native-async-storage/async-storage": "^1.17.11",
"@react-native-community/geolocation": "^3.0.5",
"@react-navigation/native": "^6.1.3",
"@react-navigation/native-stack": "^6.9.9",
"@shopify/flash-list": "^1.4.1",
"react": "18.2.0",
"react-native": "0.71.2",
"react-native-gesture-handler": "^2.9.0",
"react-native-safe-area-context": "^4.5.0",
"react-native-screens": "^3.19.0",
"react-native-vector-icons": "^9.2.0"
},

import { StyleSheet, View, StatusBar } from 'react-native';
import React, { useEffect, useState, useCallback } from 'react';
import BottomNavigation from '../../Components/BottomNavigation';
import TopNavigation from '../../Components/TopNavigation';

export default function Home({ navigation }) {

    const [userdata, setUserdata] = useState(null);


    AsyncStorage.getAllKeys()
        .then((keys) => {
            keys.forEach((key) => {
                AsyncStorage.getItem(key)
                    .then((value) => {
                        console.log(`${key}: ${value}`);
                    })
                    .catch((error) => {
                        console.log(`Error retrieving data for key ${key}: ${error}`);
                    });
            });
        })
        .catch((error) => {
            console.log(`Error retrieving keys: ${error}`);
        });

    return (
        <View style={styles.container}>
            <StatusBar />
            <BottomNavigation navigation={navigation} page={'home'} />
            <TopNavigation navigation={navigation} page={'home'} />
        </View>
    );
}

Answer 1

I think there is a problem in the code of the TopNavigation component.

I tried the same code in codesandbox and the problem seems to be with the Entypo component.

Try removing the usage of Entypo component and use another workaround instead of Entypo.

Try the following solutions, hope they are useful to you.

For example:

import { StyleSheet, View, Image } from 'react-native'
import React from 'react'
import logo from '../../assets/Logo.png';
import { icons1, logo2 } from '../Styles/styles';
import { Ionicons } from 'react-native-vector-icons';
import { Entypo } from 'react-native-vector-icons';

export default TopNavigation = ({ navigation, page }) => {

    return (
        <View style={page === 'home' ? styles.container : {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '100%',
            paddingVertical: 10,
            position: 'absolute',
            top: 0,
            zIndex: 100,
            backgroundColor: 'black',
        }}>
            {
                page === 'home' ? <Image source={logo} style={logo2} /> :
                    <Image />
            }
         
            {
                page === 'profile' &&
                <Ionicons name="settings-sharp"
                    size={24}
                    color="black"
                    style={styles.icons11}
                    onPress={() => navigation.navigate('settings')}
                />
            }
        </View>

    )
}