React Navigation (TabNavigator) doesn't work

Question

I have a problem with TabNavigator while using React Navigation, instead of seeing the first screen (WelcomeScreen) and seeing tab navigator in the bottom of the screen, there is just an empty screen.

I have done: "npm install --save react-navigation" in that project. What I'm doing wrong?

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { TabNavigator, StackNavigator } from 'react-navigation';

import AuthScreen from './screens/AuthScreen';
import WelcomeScreen from './screens/WelcomeScreen';


export default class App extends React.Component {
  render() {
    const MainNavigator = TabNavigator({
        welcome: { screen: WelcomeScreen },
        auth: { screen: AuthScreen}
    });


    return (
      <View style={styles.container}>

          <MainNavigator/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Try just returning the MainNavigator instead of wrapping with an extra view. — user1971598
– user1971598, Commented Sep 23, 2017 at 18:22
Thank you @EdgarAroutiounian, it works right now! You can write an answer, so I can accept it in Stackoverflow. — Lucky_girl
– Lucky_girl, Commented Sep 23, 2017 at 18:24

user1971598 · Accepted Answer · 2017-09-23 19:18:27Z

2

return the MainNavigator instead of wrapping with an extra view, also I would recommend not needing to be making it over and over in render. You probably don't even need this wrapper React component.

answered Sep 23, 2017 at 19:18

user1971598

Sign up to request clarification or add additional context in comments.

Comments

Akshay Rao · Accepted Answer · 2017-09-23 21:02:05Z

1

The only mistake you did is you wrapped your MainNaviagtor inside a view, so remove the wrappper on top of the main navigator.

you need not to wrap your main router component in any tag.

You don't need a wrapper around the naviagators to see. I hope this solves your problem, if not let me know :)

edited Sep 23, 2017 at 21:02

answered Sep 23, 2017 at 19:02

Akshay Rao

3,5441 gold badge17 silver badges19 bronze badges

Comments

Sanjeev · Accepted Answer · 2017-09-23 20:10:48Z

0

your code is good, you can wrap the main navigator into a container view. So that you can add some more components into the container view in future, actual issue is with the container styles. change the styles as below by removing the alignItems and JustifyContent Properties

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
})

It will fix this issue. I tried for me it works.

https://repl.it/L6S8/0

edited Sep 23, 2017 at 20:10

answered Sep 23, 2017 at 19:51

Sanjeev

213 bronze badges

Collectives™ on Stack Overflow

React Navigation (TabNavigator) doesn't work

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related