React-native navigation TabNavigator

Question

I just started to learning React Native and was following bunch of guides to implement the TabNavigator. However, it shows nothing in the Android Emulator. I am working on Windows environment.

The file structure looks like the following:

app/
-components/
-config/
--router.js
-Screens/
--Inbox/
---Inbox.js
--Account/
---Account.js
-Overview.js

I was trying to put all the navigation logic inside router.js file. The code looks like the following:

import React, {Component} from 'react';
import {TabNavigator, TabBarBottom} from 'react-navigation';
import {Icon} from 'react-native-elements';

import Login from '../Login/Login';
import Account from '../Screens/Account/Account';
import Inbox from '../Screens/Inbox/Inbox';

export const Tabs = TabNavigator({
    Account: {
        screen: Account,
        navigationOptions: {
            title: 'Account',
        },
    },
    Inbox: {
        screen: Inbox,
        navigationOptions: {
            title: 'Inbox',
        },
    },
},

{
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
});

Both Account.js and Inbox.js has some simple code to render a text:

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



export default class Account extends Component{
    render() {
        return (
          <View>
            <Text>
                This is Account Page.
            </Text>
          </View>
        );

    }
}

and index.android.js contains this:

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

import Login from './app/component/Login/Login';
import Overview from './app/component/Overview';

export default class MyApp extends Component {
  render() {
    return (
      <View>
        <Overview />
      </View>
    );
  }
}

AppRegistry.registerComponent('staging', () => MyApp);

and Overview.js:

import React, { Component } from 'react';
import {View, Container, Header, Content, Footer, FooterTab, Button, Text, Icon, Fab,} from 'native-base';
import {StyleSheet} from 'react-native';

import {Tabs} from './config/router';
import Login from './Login/Login';

class Overview extends Component{
    render(){
        return <Tabs />
    }
}

export default Overview;

The Android Emulator shows absolutely nothing. And there is no build error. What am I doing wrong?

Answer 1

The problem seems to be the name of the app you have registered doesn't match the root folder. So, if your root folder is /app, then you should use that name in your index.android.js - AppRegistry call ( at the bottom of the screen ) like so:

AppRegistry.registerComponent('app', () => MyApp);

Not sure why yours is currently 'staging', but this should fix your issue.

Answer 2

Since you do not export default YourClassName you have to import it with { }

import { Account } from '../Screens/Account/Account';
import { Inbox } from '../Screens/Inbox/Inbox';

You can read this answer for more details.