CODEWITHSUNDEEP
react-nativereact-navigationreact-native-ios
KEERTHI j
KEERTHI j

Reputation: 250

Unable to get tab bar from react-navigation working

I want to show tab bar in my react-native app using react-navigation library. I've tried code from an example provided in the documentation. However, when I run the code on iOS simulator the screen appears to be blank, tab bar doesn't load.

Here's my code so far,

TabNavigator.js

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {  
    initialRouteName: "Home"
  }  
);

export default createAppContainer(TabNavigator);

App.js 

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import TabNavigator from './components/TabNavigator';

const App = () => {
  return (
    <View>
      <TabNavigator />
    </View>
  );
};

export default App;

Upvotes: 3

Views: 315

Answers (1)

Auticcat
Auticcat

Reputation: 4489

Looking at the App.js code, you forgot to put flex:1 to the view, it's one of the common mistakes that react-navigation tells about in his documentation.

 const App = () => {
      return (
       <View style={ { flex:1} }>
         <TabNavigator />
       </View>
      );
    };

Source: https://reactnavigation.org/docs/en/common-mistakes.html#wrapping-appcontainer-in-a-view-without-flex

Upvotes: 2

Related Questions