React native TabNavigator not showing - reactjs

Question

I have created a basic react-native app which consists of a few buttons that are used to render different screens. After the user has logged in, I render a TabNavigator item but for some reason the no tabs appear and the screen is completely blank. I have comparing my code to others without any luck. Any suggestions?
import React from 'react';
import { StyleSheet, Text, View, Image, Button, ImageBackground } from 'react-native';
import { TabNavigator } from 'react-navigation';
import {Electric} from './Sub-bills/Electric';
import {Web} from './Sub-bills/WebBill';
import {Water} from './Sub-bills/Water';
import {OtherBills} from './Sub-bills/OtherBills';
import {Personal} from './Sub-bills/Personal';
export const Tabs = TabNavigator(
{
Electric: {
screen: Electric,
navigationOptions: {
tabBarLabel: 'Electric'
}
},
Web: {
screen: Web,
navigationOptions: {
tabBarLabel: 'Web'
}
},
Water: {
screen: Water,
navigationOptions: {
tabBarLabel: 'Water'
}
},
OtherBills: {
screen: OtherBills,
navigationOptions: {
tabBarLabel: 'Other'
}
},
Personal: {
screen: Personal,
navigationOptions: {
tabBarLabel: 'Personal'
}
}
},
);
export class HouseholdBills extends React.Component{
render(){
return (
<Tabs />
);
}
}
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute'
},
});
A component is rendered by pressing a button

Answer 1

In new version of ReactNavigation putting TabNavigator under a SafeAreaView will cause it not to show, since react navigation is already handling it,
If in your case you are using SafeAreaView component on top of TabNavigator, maybe removing it will help you.

Answer 2

I use the following as extra configuration to the Tab Nav. You possibly can strip some stuff out, but what worked was to at least define the order.
import { TabNavigator, TabBarBottom } from 'react-navigation';
export const Tabs = TabNavigator(
{
... Your tabs here...
}
{
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
style: {
backgroundColor: 'white',
borderTopColor: 'red',
},
labelStyle: {
fontSize: 12,
fontWeight: 'normal'
},
indicatorStyle: {
borderBottomColor: 'red,
borderBottomWidth: 4,
},
},
initialRouteName: 'Electric',
order: ['Electric', 'Web', 'Water', 'OtherBills', 'Personal'],
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
},
{
...TabNavigator.Presets,
animationEnabled: false,
swipeEnabled: false,
showIcon: false,
}
};