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

user_10066803 0
Viewed 17109

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

})
react-native-tabnavigator tabnavigator react-native reactjs
7 Answers

It can also happen if you are not exporting your component

check the following

export default HomePage
user_46841510

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

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

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

user_134432420

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.

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

user_148457140

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.

user_158158340

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