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
      },

})

Dover

Can you share the code for HomePage component ? – Impact

your HomePage component should export default HomePage; at the end of your file for the import to work – Cristacristabel

Please see the edited code above including the homepage code, Thanks – Dover

@DanielM have you had the chance to check out any of the answers below? – Viens

Answer 1

It can also happen if you are not exporting your component

check the following

export default HomePage

Vergos

Answer 2

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}
  />

Viens

Answer 3

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

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

Gabelle

Answer 4

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.

Alagoas

Answer 5

I have just started learning React Native, and I ended up with same problem. None of the above suggestions work. The interesting part of my problem is that I forget to "save" the HomePage.js file after making the necessary changes.

So, pls just ensure the changes are saved in each file.

Alfaro

This is just general advice. It's not really related to the question. – Nevernever

Answer 6

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.

Erskine

Answer 7

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.

Mirella

Answer 8

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}.

Cothran

Answer 9

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

Solecism

Answer 10

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

Glamorous