Getting a blank page

[JenilynnB]

The tab bar is appearing as it should, but the views above it are not rendering at all. All I get is a blank screen. Help?

import React from 'react'
import {
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native'
import TabNavigator from 'react-native-tab-navigator';
import Chat from './Chat.js'

export default class TabBar extends React.Component {
  state = {
    selectedTab: 'chat'
  }

  _renderContent = (pageText: string) => {
    return (
      <View style={[styles.tabContent]}>
        <Text style={styles.tabText}>This will be the {pageText} page</Text>
      </View>
    );
  };

  render() {
    return (
      <TabNavigator tabBarStyle={styles.tabBar}>
        <TabNavigator.Item 
          title="FLEX CHAT"
          renderIcon={() => (<Image source={require('./icons/chat.png')} />) }
          renderSelectedIcon={() => <Image source={require('./icons/chat.png')} />}
          titleStyle={styles.tabTitle}
          tabStyle={styles.tab}
          onPress={() => {
              this.setState({
                  selectedTab: 'chat',
              });
          }}
          >
          <Chat />
        </TabNavigator.Item>

        <TabNavigator.Item 
          renderIcon={() => (<Image source={require('./icons/list.png')} />) }
          renderSelectedIcon={() => <Image source={require('./icons/list.png')} />}
          title="MY LIST"
          titleStyle={styles.tabTitle}
          tabStyle={styles.tab}
          onPress={() => {
              this.setState({
                  selectedTab: 'list',
              });
          }}
          >
          {this._renderContent('List')}
        </TabNavigator.Item>

        <TabNavigator.Item 
          renderIcon={() => (<Image source={require('./icons/add.png')} />) }
          renderSelectedIcon={() => <Image source={require('./icons/add.png')} />}
          tabStyle={styles.addButton}
          onPress={() => {
              this.setState({
                  selectedTab: 'add',
              });
          }}
          >
          {this._renderContent('List')}
        </TabNavigator.Item>

        <TabNavigator.Item 
          renderIcon={() => (<Image source={require('./icons/projects.png')} />) }
          renderSelectedIcon={() => <Image source={require('./icons/projects.png')} />}

          title="PROJECTS"
          titleStyle={styles.tabTitle}
          tabStyle={styles.tab}
          onPress={() => {
              this.setState({
                  selectedTab: 'projects',
              });
          }}
          >
          {this._renderContent('Projects')}
        </TabNavigator.Item>

        <TabNavigator.Item 
          renderIcon={() => (<Image source={require('./icons/search.png')} />) }
          renderSelectedIcon={() => <Image source={require('./icons/search.png')} />}
          title="SEARCH"
          titleStyle={styles.tabTitle}
          tabStyle={styles.tab}
          onPress={() => {
              this.setState({
                  selectedTab: 'search',
              });
          }}
          >
          {this._renderContent('Search')}
        </TabNavigator.Item>
      </TabNavigator>
    );
  }
}

var styles = StyleSheet.create({
  tabContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000'
  },

  tabBar: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#294163',    
  },
  tab:{
    marginTop: 2,
  },
  addButton:{
    marginBottom: -5,
    bottom: -5
  },
  tabTitle: {
    color: '#ffffff', 
  },

});

[JenilynnB]

Figured it out. Was missing the "selected" prop on the TabNavigator Items. Duh.

[ptomasroos]

Will close since this is resolved