React-Native: Getting an invalid value for the component prop for the screen 'Home' (invalid react component?)

Question

I was coding a MainContainer.js file to function as a button navbar for my react-native based app. Here when defining the screens of the tabs (using Tab.Screen), I always seem to get this error:

Error: Got an invalid value for 'component' prop for the screen 'Home'. It must be a valid React Component.

One thing I tried was to delete all the code and just alert out a simple message and alas it seemed to work, which probably means all the other dependencies were working fine and there is something wrong with my code only.

Can anyone please help? :)

Code:

import * as React from 'react';
import {View, Text} from 'react-native';
import { NavigationContainer, TabActions} from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons'
//Screens
import HistoryScreen from './screens/HistoryScreen'
import HomeScreen from './screens/HomeScreen'
import LocationScreen from './screens/LocationScreen'
//ScreenNames
const HistoryName='History';
const HomeScreenName='Home';  
const LocationName='Location';

const Tab= createBottomTabNavigator();
export default function MainContainer(){
    return(
        <NavigationContainer>
            <Tab.Navigator
            initialRouteName={HomeScreenName}
            screenOptions={({route}) => ({
                tabBarIcon: ({focused,color,size}) => {
                    let iconName;
                    let rn=route.name;
                    if(rn === HomeScreenName){
                        iconName = focused ? 'home' : 'home-outline';
                    }
                    else if (rn === HistoryName){
                        iconName = focused ? 'history' : 'history-outline';
                    }
                    else if (rn ===  LocationName){
                        iconName = focused ? 'location' : 'location-outline';
                    }
                  return <Ionicons name={iconName} size={size} color={color}/>
                },
            })}
            >
            <Tab.Screen name={HomeScreenName} component={HomeScreen}/>
            <Tab.Screen name={HistoryName} component={HistoryScreen}/>
            <Tab.Screen name={LocationName} component={LocationScreen}/>
            </Tab.Navigator>
            
        </NavigationContainer>
    )
}

(P.S I also tried putting the imports of my HistoryScreen, LoctionScreen and HomeScreen in curly brackets, but that still didn't work giving some other error.)

HomeScreen Code:

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

export default function HomeScreen( {navigation} ){
    return(
        <View style={{flex: 1, backgroundColor: '#fff',  alignItems: 'center', justifyContent: 'center'}}>
              <Text
                  onPress={()=> alert('This is the "Home" Screen')}
                  style={{flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center'}}> HomeScreen</Text>
        </View>
    );
}

LocationScreen code:

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

export default function LocationScreen({navigation}){
    return(
        <View style={{flex: 1, backgroundColor: '#fff',  alignItems: 'center', justifyContent: 'center'}}>
              <Text
                  onPress={() => navigation.navigate('Home')}
                  style={{flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center'}}> LocationScreen</Text>
        </View>
    );
}

HistoryScreen Code:

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

export default function HistoryScreen({navigation}){
    return(
        <View style={{flex: 1, backgroundColor: '#fff',  alignItems: 'center', justifyContent: 'center'}}>
              <Text
                  onPress={() => alert('This is the "History" Screen')}
                  style={{flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center'}}> HisoryScreen</Text>
        </View>
    );
}

What is yours HomeScreen file suffix it should be jsx/tsx and not ts/js — Michael Bahl, Dec 08 '22 at 07:48
Omg this worked @MichaelBahl!!! Thank you so much dude. If you have the time, can you please explain why did changing it to jsx work? — AouxWoux, Dec 08 '22 at 07:52
If a file contains jsx like `````` or `````` `````` the file suffix has to be jsx/tsx. I guess this is necessary to tell react how to transpile jsx into javascript. — Michael Bahl, Dec 08 '22 at 08:17

score 0 · Answer 1 · answered Dec 08 '22 at 12:47

0

you passing wrong Navigation. You need to replace

onPress={() => navigation.navigate('Home')}

to

onPress={() => navigation.navigate('HomeScreenName')}

answered Dec 08 '22 at 12:47

Mahammad Momin

600
2
13

React-Native: Getting an invalid value for the component prop for the screen 'Home' (invalid react component?)

1 Answers1