The component for route '...' must be a React component.

[CorentinHeroux]

Hello, I have this error "The component for route 'Navigation' must be a React component." I followed the example of StacksOverTabs.js but I have this error that I can't solve. The error occurs on IOS and Android. "react": "16.6.3", "react-native": "0.57.8", "react-navigation": "^3.0.9"

App.js

import React, { PureComponent } from 'react';
import { AppContainer } from './Architecture/Navigation';

export default class App extends PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        return <AppContainer />;
    }
}

Navigation.js

import React from 'react';
import {
    createStackNavigator,
    createAppContainer,
    createBottomTabNavigator,
} from 'react-navigation';
import Ecran2 from './Ecran2';
import Ionicons from 'react-native-vector-icons/FontAwesome';

import Switch1 from './Switch1';
import Switch2 from './Switch2';
import Switch3 from './Switch3';

const AppContainer = createAppContainer(
    createStackNavigator(
        {
            Navigation: Navigation,
        },
        {
            initialRouteName: 'Navigation',
            headerMode: 'none',
        },
    ),
);

const Navigation = createStackNavigator(
    {
        HomeTabNav: HomeTabNav,
        Ecran2: Ecran2,
    },
    { initialRouteName: 'HomeTabNav' },
);

const HomeTabNav = createBottomTabNavigator(
    {
        Switch1: {
            screen: Switch1,
            path: '/',
            navigationOptions: {
                title: 'Switch 1',
                tabBarLabel: 'Switch 1',
                tabBarIcon: ({ tintColor, focused }) => (
                    <Ionicons
                        name={focused ? 'ios-home' : 'ios-home'}
                        size={26}
                        style={{ color: tintColor }}
                    />
                ),
            },
        },
        Switch2: {
            screen: Switch2,
            path: '/switch2',
            navigationOptions: {
                title: 'Switch 2',
                tabBarIcon: ({ tintColor, focused }) => (
                    <Ionicons
                        name={focused ? 'ios-settings' : 'ios-settings'}
                        size={26}
                        style={{ color: tintColor }}
                    />
                ),
            },
        },
        Switch3: {
            screen: Switch3,
            path: '/switch2',
            navigationOptions: {
                title: 'Switch 3',
                tabBarIcon: ({ tintColor, focused }) => (
                    <Ionicons
                        name={focused ? 'ios-settings' : 'ios-settings'}
                        size={26}
                        style={{ color: tintColor }}
                    />
                ),
            },
        },
    },
    {
        tabBarPosition: 'bottom',
        animationEnabled: false,
        swipeEnabled: false,
    },
);

HomeTabNav.navigationOptions = ({ navigation, screenProps }) => {
    const childOptions = getActiveChildNavigationOptions(navigation, screenProps);
    return {
        title: childOptions.title,
    };
};

export default AppContainer;

Thank you in advance for your feedback.

[pzatorski]

Please check: https://github.com/react-navigation/react-navigation/issues/3326#issuecomment-455715435 Make sure that you render AppContainer in App.js

//...
import AppContainer from './navigator/MyNavigator';
//...
export default class App extends React.Component {
  render() {
    return <AppContainer />
  }
}

[eriveltonelias]

hi there! sorry you're having an issue. as the issue template explains, we require that you provide a runnable example that reproduces the bug on https://snack.expo.io or in a github repository. please try to minimize the superfluous code and focus only on reproducing the bug. you might wonder, why are we strict about this? the reason is that there are only a small number of maintainers on this project and there are hundreds of people who report issues. if it takes us 20 minutes on average to reproduce each issue and we go through 10 issues each day, that's about half of our day just trying to reproduce bugs, without even beginning to investigate solutions. compare that to 20 minutes for each person who reports an issue. please create a new issue with this and i'd be happy to review it!

[CorentinHeroux]

@pzatorski I render AppContainer in App.js, I wrote it to you in my post.

[CorentinHeroux]

This is my snack : https://snack.expo.io/@corentinheroux/eager-chips

[Robiullah2244]

You use Navigation variable before declare it and also use HomeTabNav variable before declare it

Just like: print(i); int i = 0;

Your code will like:

import React from 'react';
import {
    createStackNavigator,
    createAppContainer,
    createBottomTabNavigator,
} from 'react-navigation';
import Ecran2 from './Ecran2';
import Ionicons from 'react-native-vector-icons/FontAwesome';

import Switch1 from './Switch1';
import Switch2 from './Switch2';
import Switch3 from './Switch3';

const HomeTabNav = createBottomTabNavigator(
  {
      Switch1: {
          screen: Switch1,
          path: '/',
          navigationOptions: {
              title: 'Switch 1',
              tabBarLabel: 'Switch 1',
              tabBarIcon: ({ tintColor, focused }) => (
                  <Ionicons
                      name={focused ? 'ios-home' : 'ios-home'}
                      size={26}
                      style={{ color: tintColor }}
                  />
              ),
          },
      },
      Switch2: {
          screen: Switch2,
          path: '/switch2',
          navigationOptions: {
              title: 'Switch 2',
              tabBarIcon: ({ tintColor, focused }) => (
                  <Ionicons
                      name={focused ? 'ios-settings' : 'ios-settings'}
                      size={26}
                      style={{ color: tintColor }}
                  />
              ),
          },
      },
      Switch3: {
          screen: Switch3,
          path: '/switch2',
          navigationOptions: {
              title: 'Switch 3',
              tabBarIcon: ({ tintColor, focused }) => (
                  <Ionicons
                      name={focused ? 'ios-settings' : 'ios-settings'}
                      size={26}
                      style={{ color: tintColor }}
                  />
              ),
          },
      },
  },
  {
      tabBarPosition: 'bottom',
      animationEnabled: false,
      swipeEnabled: false,
  },
);

HomeTabNav.navigationOptions = ({ navigation, screenProps }) => {
  const childOptions = getActiveChildNavigationOptions(navigation, screenProps);
  return {
      title: childOptions.title,
  };
};

const Navigation = createStackNavigator(
  {
      HomeTabNav: HomeTabNav,
      Ecran2: Ecran2,
  },
  { initialRouteName: 'HomeTabNav' },
);

const AppContainer = createAppContainer(
    createStackNavigator(
        {
            Navigation: Navigation,
        },
        {
            initialRouteName: 'Navigation',
            headerMode: 'none',
        },
    ),
);

export default AppContainer;

[yilmazt81]

Use like this .. fucking react i spend hours

const AutoStack = createBottomTabNavigator( { SignUp :SignUpScreen, SignIn: SignInScreen
}, { initialRouteName:'SignUp' } );