ERROR Error: Element type is invalid: expected a string (for built-in components) or a class/functio-CodePudding

How can i fix this problem in my react native code the error says "ERROR Error: 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.Check the render method of TopNavigation."

I tried restarting my app restarting my machine but this error didint gone can anyone can help me to fix this problem?

This is how I am exporting:

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>

    )
}

And this is show I am using that component: import TopNavigation from '../../Components/TopNavigation';

<TopNavigation navigation={navigation} page={'home'} />

My DependencieS:

"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>
    );
}

CodePudding user response：

I think there is issue in code of TopNavigation component.

As I tried same code in codesandbox, issues seems with Entypo component.

try to remove the usage of Entypo component and use another workaround instead Entypo.

try below solution, hope it works for you.

ex.

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>

    )
}