CODEWITHSUNDEEP
reactjsreact-nativetabnavigator
edwardam
edwardam

Reputation: 45

React native TabNavigator not showing

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

Upvotes: 3

Views: 5338

Answers (2)

Hayyaun
Hayyaun

Reputation: 316

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.

Upvotes: 4

aqwert
aqwert

Reputation: 10789

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,
  }
};

Upvotes: 2

Related Questions