Why can't you have two AppRegistry.registerComponent lines?

Question

I'm teaching myself React-Native and I came across this strange roadblock. Inside my App.js I'm trying to export a class and then use another file within my App.js which is inside the somePage() function. where I'm calling <Header/> in an attempt for that text to appear on my physical device upon hitting refresh.

It displays <Login/> perfectly, but not what's within the somePage() function. My question is, why?

(I'm using Expo by the way, instead of having an index.ios.js file it's an App.js file that still supports cross platform development).

Here's my App.js file:

import React, { Component } from 'react';
import {AppRegistry} from 'react-native';
import Login from './components/Login';
import Header from './components/Header';

export default class Project extends Component {
    render() {
        return (
            <Login/>
        );
    }
}

const somePage = () => (
    <Header/>
);

AppRegistry.registerComponent('someProject', () => Project);
AppRegistry.registerComponent('someProject', () => somePage);

Here's my Header.js file:

import React from 'react';
import {Text} from 'react-native';

const Header = () => {
    return <Text>Testing this out</Text>
}

export default Header;

Answer 1

The concept of react is that a parent component renders child components. You only need to register once because the root component is the parent component of all other components. Any other child or grandchild components you want to render must be descendants of the root component. As a side note, you don't need to have export default in front of the Project component, because you aren't exporting it anywhere: you are registering it below.

To fix your app, you need to place the header component inside the registered root component:

import React, { Component } from 'react';
import {AppRegistry, View } from 'react-native';
import Login from './components/Login';
import Header from './components/Header';

class Project extends Component {
    render() {
        return (
            <View>
              <Header/>
              <Login/>
            </View>
        );
    }
}


AppRegistry.registerComponent('someProject', () => Project);