CODEWITHSUNDEEP
react-nativereact-navigation
Lucky_girl
Lucky_girl

Reputation: 4883

React Navigation (TabNavigator) doesn't work

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

Upvotes: 2

Views: 1347

Answers (3)

Akshay Rao
Akshay Rao

Reputation: 3544

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 :)

Upvotes: 1

Sanjeev
Sanjeev

Reputation: 21

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

Upvotes: 0

user1971598
user1971598

Reputation:

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.

Upvotes: 2

Related Questions