index.js

'use strict';

import React, {Component} from 'react';
import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native'
import {
    PageContainer,
    Schedule,
    Result,
    Sports,
    News,
    Biographies
} from './resultsMAPP.android';
import { NavigationComponent } from 'react-native-material-bottom-navigation';
import { TabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import * as firebase from 'firebase';

export class HelloWorld extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.hello}>Hello, World</Text>
            </View>
        )
    }
}
var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    hello: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

export class PageContainerComponent extends Component {
    static navigationOptions = {
        tabBarLabel: "Schedule",
        tabBarIcon: () => <Icon size={24} name="event" color="white" />
    }
    render() {
        return (
            <PageContainer page="schedule"></PageContainer>
        )
    }
}

export class ResultComponent extends Component {
    static navigationOptions = {
        tabBarLabel: "Results",
        tabBarIcon: () => <Icon size={24} name="ac-unit" color="white" />
    }
    render() {
        return (
            <Result></Result>
        )
    }
}

export class ScheduleComponent extends Component {
    static navigationOptions = {
        tabBarLabel: "Schedule",
        tabBarIcon: () => <Icon size={24} name="ac-unit" color="white" />
    }
    render() {
        return (
            <Schedule></Schedule>
        )
    }
}

export class SportsComponent extends Component {
    static navigationOptions = {
        tabBarLabel: "Sports",
        tabBarIcon: () => <Icon size={24} name="ac-unit" color="white" />
    }
    render() {
        return (
            <Sports></Sports>
        )
    }
}

export class NewsComponent extends Component {
    static navigationOptions = {
        tabBarLabel: "News",
        tabBarIcon: () => <Icon size={24} name="description" color="white" />
    }
    render() {
        return (
            <News></News>
        )
    }
}

export class BiosComponent extends Component {
    static navigationOptions = {
        tabBarLabel: "Athletes",
        tabBarIcon: () => <Icon size={24} name="perm-identity" color="white" />
    }
    render() {
        return (
            <Biographies></Biographies>
        )
    }
}

/**
 * react-navigation's TabNavigator.
 */
export const MyApp = TabNavigator({
    PageContainerComponent: { screen: ScheduleComponent },
    ResultComponent: { screen: ResultComponent},
    SportsComponent: { screen: SportsComponent },
    NewsComponent: { screen: NewsComponent },
    BiosComponent: { screen: BiosComponent }
}, {
    tabBarComponent: NavigationComponent,
    tabBarPosition: 'bottom',
    tabBarOptions: {
        bottomNavigationOptions: {
            labelColor: 'white',
            rippleColor: 'white',
            tabs: {
                PageContainerComponent: {
                    barBackgroundColor: '#00a651'
                },
                ResultComponent: {
                    barBackgroundColor: '#00a651'
                },
                SportsComponent: {
                    barBackgroundColor: '#ed1941'
                },
                NewsComponent: {
                    barBackgroundColor: '#0081c8'
                },
                BiosComponent: {
                    barBackgroundColor: '#fcb131'
                }
            }
        }
    }
});

export const MyApp2 = TabNavigator({
  Schedule: {
    screen: PageContainerComponent,
  },
  Results: {
    screen: ResultComponent,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});