React Navigation not working if routes is not in index files

Question

I'm practicing my react navigation skills when I encountered this problem. Forgive me if this is a newbie question. The title pretty much sums it all. I have a StackNavigator defined in a Routes.js file. When I run it, it doesn't work. But If I put it in the index files, it works fine. I'm sure I exported the StackNavigator and imported it in the index files where I have my AppRegistry.

I might be missing something but I'm not sure what it is.

Here is the error message:

    Element type is invalid: expected a string (for built in 
    components) or a class/function (for composite components) but 
    got: undefined.

Here is my routes file:

    import React, { Component } from 'react'
    import { StackNavigator } from 'react-navigation'

    import Hello from './screens/Hello'
    import Hi from './screens/Hi'
    import Ola from './screens/Ola'

    export const AppNavigator = StackNavigator({
        Hello: { screen: Hello },
        Hi: { screen: Hi },
        Ola: { screen: Ola }
    })

and here is my index.ios.js file:

    import React, { Component } from 'react'
    import { AppRegistry } from 'react-native'
    import { StackNavigator } from 'react-navigation'

    import AppNavigator from './app/Routes'

    AppRegistry.registerComponent('nav', () => AppNavigator)

The codes above do not work. But this one does:

    import React, { Component} from 'react'
    import { AppRegistry } from 'react-native'
    import { StackNavigator } from 'react-navigation'

    import Hello from './app/screens/Hello'
    import Hi from './app/screens/Hi'
    import Ola from './app/screens/Ola'

    export const AppNavigator = StackNavigator({
       Hello: { screen: Hello },
       Hi: { screen: Hi },
       Ola: { screen: Ola }
    })

    import AppNavigator from './app/Routes'

    AppRegistry.registerComponent('nav', () => AppNavigator)

My clue is that I do not export the StackNavigator properly or I do not import it properly to the index files. Any help would be appreciated. Thank you!

This is duplicate issue I think. Check https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string — MattYao, Jul 10 '17 at 06:12
Hi @MattYao, thanks for the answer. Solved my problem. Sorry for the duplicate post. — Maiko Francisco Rugeria, Jul 10 '17 at 11:09
Hi @MattYao please indicate your comment below so I can mark it as solution. Thanks! — Maiko Francisco Rugeria, Jul 10 '17 at 11:23

score 1 · Accepted Answer · answered Jul 10 '17 at 23:33

Please see this post for the duplicated issue: Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

Also, check this article for more ES6 modules usage learning: http://2ality.com/2014/09/es6-modules-final.html

React Navigation not working if routes is not in index files

1 Answers1