Error when setting up Tab Navigator - ' Got an invalid Value for 'component' prop for screen 'Home'

Question

I'm currently receiving the error 'Got an invalid value for 'component' prop for the screen 'Home'. It must be a valid React Component.'' I'm trying to link the tab navigator to a series of different screens. Please see the code below and thanks in advance. I'm a beginner clearly lol

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import { create } from 'react-test-renderer';
import HomePage from './Screen/Home'
import FuturePage from './Screen/Future'

const Tabs=createBottomTabNavigator();

export default function App (){

    return (  
      <NavigationContainer>
       <Tabs.Navigator>
        <Tabs.Screen name='Home' component={HomePage} />
         <Tabs.Screen name='Future' component={FuturePage} />
      </Tabs.Navigator>
    </NavigationContainer>
        );
    }

Home Page Screen


import React, { Component } from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'

import Icon from 'react-native-vector-icons/Ionicons';

import {    AppRegistry, 
            View, 
            Text,
            ScrollView, 
            Image, 
            StyleSheet, 
            ImageBackground, 
            Animated, Easing
        } from 'react-native';

        export default class HomePage extends React.Component {

          render() {
return(
    <View style={styles.container}> 

    <ScrollView>
        <View
        style={[styles.tbcViews, {top: 600}, {left: 25} ]}
        />
        <View
        style={[styles.tbcViews, {top: 950}, {left: 200} ]}
        />
        <View
        style={[styles.tbcViews, {top: 1200}, {left: 600} ]}
        />
        <View
        style={[styles.tbcViews, {top: 600}, {left: 700} ]}
        />
        <View
        style={[styles.tbcViews, {top: 1400}, {left: 250} ]}
        />
        <View
        style={[styles.tbcViews, {top: 950}, {left: 900} ]}
        />
        <View
        style={[styles.tbcViews, {top: 1500}, {left: 1000} ]}
        />
        <View
        style={[styles.tbcViews, {top: 1100}, {left: 1300} ]}
        />
        <View
        style={[styles.tbcViews, {top: 400}, {left: 1200} ]}
        />
         <View
        style={[styles.tbcViews, {top: 1650}, {left: 650} ]}
        />
        <View
        style={[styles.tbcViews, {top: 1750}, {left: 75} ]}
        />


        <Image style={{resizeMode: 'repeat', height:2000, width:1500}}
        source={require('./assets/CurtainBG.png')}
        />


        </ScrollView>

         <Image
        style={styles.logo_title}
        source={require('./assets/Logo_Title.png')} 
        />  
        <Text
        style={styles.mini_titles}>FUTURE</Text>
        <Text
        style={styles.mini_titles2}>PAST</Text>
        <Icon 
        style={styles.arrows}
        name="ios-arrow-up" size={20} />
         <Icon 
        style={styles.arrowdown}
        name="ios-arrow-down" size={20} />
        <Image
        style={styles.futureicon}
        source={require('./assets/FutureIconBlue.png')} 
        />  
      </View>
);
};
        }
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 500,
        width:  450,
        left: -25

    },
    logo_title: {
        position: 'absolute',
        alignItems: 'center',
        top:400,
        zIndex: 10,
        width: 450,
        height: 150,
      },
      mini_titles: {
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 12,
        top: 350,

      },
      mini_titles2: {
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 12,
        top: 550,

      },
      arrows: {
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 12,
        top: 300,

      },
      arrowdown: {
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 12,
        top: 600,

      },
      futureicon: {
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 12,
        top: 85,
        height: 190,
        width: 190


      },

      tbcViews: {
        position: 'absolute',
        alignItems: 'center',
        zIndex: 10,
        width: 200,
        height: 200,
        borderWidth:2.5,
        borderStyle: 'dotted',
        borderColor:'rgb(27, 63, 143)',
        borderRadius: 10
      },

})

your HomePage component should export default HomePage; at the end of your file for the import to work — yesIamFaded, May 27 '20 at 10:38
Please see the edited code above including the homepage code, Thanks — Daniel M, May 27 '20 at 10:41
@DanielM have you had the chance to check out any of the answers below? — M_droid, Apr 27 '21 at 17:03

score 15 · Answer 1 · answered Oct 14 '20 at 14:19

15

It can also happen if you are not exporting your component

check the following

export default HomePage

answered Oct 14 '20 at 14:19

Ignatius Andrew

8,012
3
54
54

score 10 · Answer 2 · answered Sep 18 '20 at 12:15

I had exactly the same problem. After working a whole day on this, I found out that you can pass in components like class MyComponent extends React.Component or const MyComponent = ({ param1, paramX}) => {} by using the attribute children. First I was using the attribute component={MyComponent} for the component and initalParams={...} for passing params but now it looks like this:

<MyTabStack.Screen
      name={item.name.toString()}
      listeners={{ focus: () => setActiveTab(index) }}
      children={() => (
        <MyComponent
          data={allResults}
          sessionid={item.sessionid}
          name={item.name.toString()}
        />
      )}
      key={item.sessionid}
  />

score 1 · Answer 3 · answered May 27 '20 at 10:27

1

make sure HomePage is a right component. You can try by this

export default function App (){ return ( <HomePage/> ); }

answered May 27 '20 at 10:27

Minh Nguyen Quang

51
2

score 1 · Answer 4 · answered Aug 29 '21 at 20:49

1

For each individual component that you're importing into app.js ensure that you're not exporting the component with a semi-colon at the end.

That solved my immediate issue.

answered Aug 29 '21 at 20:49

user3806500

19
6

score 0 · Answer 5 · edited Dec 21 '20 at 17:56

const HomeStack = () => {

    return (
            <Stack.Navigator headerMode = {'none'}>
            <Stack.Screen name="Home" component={Home} />
            </Stack.Navigator>
    )
};

const ProfileStack = () => {

    return (
        <Stack.Navigator headerMode={'none'}>
            <Stack.Screen name="Profile" component={Profile} />
        </Stack.Navigator>
    )
};

const SettingsStack = () => {

    return (
        <Stack.Navigator headerMode={'none'}>
            <Stack.Screen name="Settings" component={Settings} />
        </Stack.Navigator>
    )
};

export default { HomeStack, ProfileStack, SettingsStack };

When I export multiple components it gives that error - but when I export just one component like :

export default HomeStack;

it works just fine - now I'm creating separate .js for every component lets see what happens.

score 0 · Answer 6 · answered Jun 19 '22 at 10:23

0

This occured with me too.
In my case, I fixed it by disabling minification in React Native DevMenu. Press d in the console where you started metro. Go to Settings > JS Minify and uncheck it.

answered Jun 19 '22 at 10:23

dhruvkrishnavaid

5
4

score 0 · Answer 7 · edited Dec 05 '22 at 10:20

import AuthStack from "./Src/Navigation/AuthStack";
import BottomNavBar from "./Src/Navigation/BottomNavBar";
    
const MainNav = createNativeStackNavigator();

function App() {
    return (
    <NavigationContainer>
        <MainNav.Navigator>
        <MainNav.Screen name="AuthStack" component={AuthStack} />
        <MainNav.Screen name="BottomNavBar" component={BottomNavBar} />
        </MainNav.Navigator>
    </NavigationContainer>
);}

In my case, it was just that I put component={ < AuthStack/>}, but in reality, it should be component={AuthStack}.

score 0 · Answer 8 · answered Apr 26 '23 at 00:49

0

Make sure u save the file from where the component is running

answered Apr 26 '23 at 00:49

sHiVaM sHaRmA

1

score -1 · Answer 9 · answered Jan 12 '21 at 01:58

It seems that the name and component of the Stack.Screen component must be the same. This is what worked for me.

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="ContactsScreen"
          component={ContactsScreen}
          options={{ title: 'Contacts' }}
        />
        <Stack.Screen
          name="ContactDetailScreen"
          component={ContactDetailScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Error when setting up Tab Navigator - ' Got an invalid Value for 'component' prop for screen 'Home'

9 Answers9