CODEWITHSUNDEEP
react-nativereact-navigationexpo
SuicideSheep
SuicideSheep

Reputation: 5550

TabNavigator unable to load?

I've created a new project using Expo XDE and trying to learn React-Navigation. I've modified App.js as below

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { TabNavigator } 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: 'grey',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Correct me if I'm wrong, MainNavigator component should refer to const MainNavigator and render 2 tabs but there isn't any tabs being loaded into simulator. May I know which part went wrong?

Upvotes: 0

Views: 34

Answers (1)

ReyHaynes
ReyHaynes

Reputation: 3102

2 things...

The TabNavigation doesn't seem to play well being the child of a view...which makes sense since it's supposed to handle that within the screens. Removing the parent <View> fixes that. Deal with styling the view within the screens.

I'd also recommend not defining the MainNavigator variable inside the render method. While it's not app breaking, it's not the best practice and might have some unforeseen consequences when your app gets larger.

Final code:

import React from 'react';
// import { StyleSheet, View } from 'react-native';
import { TabNavigator } from 'react-navigation';
import AuthScreen from './screens/AuthScreen';
import WelcomeScreen from './screens/WelcomeScreen';

const MainNavigator = TabNavigator({
  welcome: { screen: WelcomeScreen },
  auth: { screen: AuthScreen }
});

export default class App extends React.Component {
  render() {
    return (
      <MainNavigator />
    );
  }
}

Upvotes: 1

Related Questions