Importing multilpe components to index.ios.js

Question

I'm trying to import my navigation (with routing) and my main.js to index.ios.js as such:

import PRSNT_demo from './src/main.js'
import NavAllDay from './src/components/navigation.js';

This just renders the last named Component (so only shows my navigation), I couldn't find anything on the subject and I've tried importing the nav into my main.js. Does anyone have documentation on where to find the solution or does anyone know the solution?

Navigation.js (I know this won't really do anything yet I just want it to show both views):

 import React, { Component } from 'react';
import { AppRegistry, Text, Navigator, TouchableHighlight } from 'react-native';
import Style from '../Style';

console.log('doing this');

export default class NavAllDay extends Component {
    render() {
        const routes = [
            {title: 'First Scene', index: 0},
            {title: 'Second Scene', index: 1},
        ];
        return (
            <Navigator
                style={Style.header}
                initialRoute={routes[0]}
                renderScene={(route, navigator) =>
                    <TouchableHighlight onPress={() => {
                        if (route.index === 0) {
                            navigator.push(routes[1]);
                        } else {
                            navigator.pop();
                        }
                    }}>
                    <Text>Hello {route.title}!</Text>
                    </TouchableHighlight>
                }
                navigationBar={
                    <Navigator.NavigationBar
                        routeMapper={{
                            LeftButton: (route, navigator, index, navState) =>
                                {
                                    if (route.index === 0) {
                                        return null;
                                    } else {
                                        return (
                                            <TouchableHighlight onPress={() => navigator.pop()}>
                                                <Text>Back</Text>
                                            </TouchableHighlight>
                                        );
                                    }
                                },
                            RightButton: (route, navigator, index, navState) =>
                                {
                                    if (route.index === 1) {
                                        return null;
                                    } else {
                                        return (
                                            <TouchableHighlight onPress={() => navigator.push(routes[1])}>

                                                <Text>Done</Text>

                                            </TouchableHighlight>
                                        );
                                    }
                                },
                            Title: (route, navigator, index, navState) =>
                                { return (<Text>Awesome Nav Bar</Text>); },
                        }}
                        style={Style.header}
                        />
                }
            />
        );
    }
}

AppRegistry.registerComponent('PRSNT_demo', () => NavAllDay)

Main.js:

import React, { Component } from 'react';
import Style from './Style';

import {
  AppRegistry,
  Text,
  View
} from 'react-native';

export default class PRSNT_demo extends Component {
  render() {
    return (
      <View style={Style.container}>

        <View style={Style.invites}>
          <Text style={Style.presentListText}> Section</Text>
        </View>
        <View style={Style.presentList}>
          <Text style={Style.presentListText}>
            List
          </Text>
        </View>
      </View>
    );
  }
}

AppRegistry.registerComponent('PRSNT_demo', () => PRSNT_demo);

Answer 1

AppRegistry.registerComponent('PRSNT_demo', () => PRSNT_demo); this line should only exist in you index.ios.js and index.android.js file.

Also, to import files you just place these at the top of the file you want to use them:

import PRSNT_demo from './src/main.js'

import NavAllDay from './src/components/navigation.js'

if you wanted to use them in your index.ios.js file you need to do something like this:

    import React, { Component } from 'react';
    import {
        AppRegistry,
        View
    } from 'react-native';

    import PRSNT_demo from './src/main.js'
    import NavAllDay from './src/components/navigation.js'

    export default class Main extends Component {
        render() {
            return (
                <View>
                   <PRSNT_demo />
                   <NavAllDay />
                </View>
            )
        }
    }

    AppRegistry.registerComponent('PRSNT_demo', () => Main);

The AppRegistry is saying which component you want initially rendered.