CODEWITHSUNDEEP
androidreact-nativestack-navigatorreact-native-tabnavigator
BRDroid
BRDroid

Reputation: 4378

TabNavigator inside StackNavigator - React Native

I am trying to place a TabNavogator inside a StackNavigator and it is complaining that it has to be a react component.

I have attached the code and the error screen shot.

Once I pass login screen I want tabs, so in Login.js on click of a button I am moving to Tabs but I think the problem is in router.js where I might have been doing it wrong.

It would be very helpful if you could suggest how to correct it

Thanks R

router.js

 import React from 'react';
import { TabNavigator, StackNavigator } from 'react-navigation';
import Login from '../../scripts/components/pages/Login';
import WalkThrough from '../../scripts/components/pages/WalkThrough';
import Transactions from '../../scripts/components/pages/Transactions';
import UserProfile from '../../scripts/components/pages/UserProfile';


export const Root = StackNavigator({          
    WalkThrough: {
      screen: WalkThrough,
      navigationOptions:{
        title: 'WalkThrough',
      },
    },    
    Login:{
      screen: Login,
      navigationOptions: {
        title: 'Login',
      },
    },
    Tabs: {
      screen: Tabs,
    }, 
  }, {
    mode: 'modal',
    headerMode: 'screen',
  });

  export const Tabs = TabNavigator({
    Transactions: {
      screen: Transactions,
      navigationOptions: {
        tabBarLabel: 'Transactions',
        tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,
      },
    },
    Profile: {
      screen: UserProfile,
      navigationOptions: {
        tabBarLabel: 'Profile',
        tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
      },
    },
  });

index.js

import React, {Component} from 'react';
import {Root} from './config/router';

class App extends Component{
    render(){
        return <Root/>;
    }
}

export default App;

Main index.js (FYI)

import { AppRegistry } from 'react-native';
import app from './app/index';
AppRegistry.registerComponent('DoPayRetail', () => app);

And from Login screen I want to move to Tabs.

Login.js

import React, {Component} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

class Login extends Component{

    goToNext = () => {
      this.props.navigation.navigate('Tabs');
    };

    render(){
      const {navigate } = this.props.navigation;
      return (
        <View style = {styles.container}> 
          <Text> Login screen
          </Text>
          <Button
            onPress={this.goToNext}
            title="Go to next page"
            color="#841584"
          />
        </View>
      );
    }
  }

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

  export default Login;

This is my error message

enter image description here

Upvotes: 1

Views: 928

Answers (2)

emdibee
emdibee

Reputation: 192

In router.js, place the declaration and initialization of the Tabs variable above Root's initialization. You are currently using variable before declaring it. I think that should fix the issue.

Upvotes: 1

ehacinom
ehacinom

Reputation: 8894

If you create the StackNavigator in the same page as a React component (your Tabs TabsNavigator) this error will show up. Try moving out Tabs to it's own file.

Upvotes: 0

Related Questions