title: Error when setting up Tab Navigator - ' Got an invalid Value for 'component' prop for screen 'Home'
body: <p>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</p>
  
  <pre><code>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 (  
        &lt;NavigationContainer&gt;
         &lt;Tabs.Navigator&gt;
          &lt;Tabs.Screen name='Home' component={HomePage} /&gt;
           &lt;Tabs.Screen name='Future' component={FuturePage} /&gt;
        &lt;/Tabs.Navigator&gt;
      &lt;/NavigationContainer&gt;
          );
      }
  
  
  </code></pre>
  
  <p>Home Page Screen</p>
  
  <pre><code>
  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(
      &lt;View style={styles.container}&gt; 
  
      &lt;ScrollView&gt;
          &lt;View
          style={[styles.tbcViews, {top: 600}, {left: 25} ]}
          /&gt;
          &lt;View
          style={[styles.tbcViews, {top: 950}, {left: 200} ]}
          /&gt;
          &lt;View
          style={[styles.tbcViews, {top: 1200}, {left: 600} ]}
          /&gt;
          &lt;View
          style={[styles.tbcViews, {top: 600}, {left: 700} ]}
          /&gt;
          &lt;View
          style={[styles.tbcViews, {top: 1400}, {left: 250} ]}
          /&gt;
          &lt;View
          style={[styles.tbcViews, {top: 950}, {left: 900} ]}
          /&gt;
          &lt;View
          style={[styles.tbcViews, {top: 1500}, {left: 1000} ]}
          /&gt;
          &lt;View
          style={[styles.tbcViews, {top: 1100}, {left: 1300} ]}
          /&gt;
          &lt;View
          style={[styles.tbcViews, {top: 400}, {left: 1200} ]}
          /&gt;
           &lt;View
          style={[styles.tbcViews, {top: 1650}, {left: 650} ]}
          /&gt;
          &lt;View
          style={[styles.tbcViews, {top: 1750}, {left: 75} ]}
          /&gt;
  
  
          &lt;Image style={{resizeMode: 'repeat', height:2000, width:1500}}
          source={require('./assets/CurtainBG.png')}
          /&gt;
  
  
          &lt;/ScrollView&gt;
  
           &lt;Image
          style={styles.logo_title}
          source={require('./assets/Logo_Title.png')} 
          /&gt;  
          &lt;Text
          style={styles.mini_titles}&gt;FUTURE&lt;/Text&gt;
          &lt;Text
          style={styles.mini_titles2}&gt;PAST&lt;/Text&gt;
          &lt;Icon 
          style={styles.arrows}
          name="ios-arrow-up" size={20} /&gt;
           &lt;Icon 
          style={styles.arrowdown}
          name="ios-arrow-down" size={20} /&gt;
          &lt;Image
          style={styles.futureicon}
          source={require('./assets/FutureIconBlue.png')} 
          /&gt;  
        &lt;/View&gt;
  );
  };
          }
  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
        },
  
  })
  
  
  </code></pre>