The component for route “Feed” must be a React Com

Question

i am trying to understand reactnavigation and i am setting up a concept app to understand.

What i am struggling at first is, that i get the Error Message "The component for route "SomeRoute" must be a React Component"

I do know, what it means, but i do not understand why this error is thrown.

I have following setup:

App.js:

import React from 'react';
import { Root } from './config/router';
import { SafeArea } from 'react-native';
class App extends Component {
    render() {
        return <Root />;
    }
}
export default App;

router.js( config/router.js )

import React from 'react';
import { DrawerNavigator, TabNavigator, StackNavigator } from 'react-navigation';

import Feed from './../components/Feed';
import Search from './../components/Search';
import Favorites from './../components/Favorites';

import TextList from './../components/ComingSoon';
import Detail from './../components/Detail';
import Downloads from './../components/Downloads';

export const FeedStack = StackNavigator({

    Feed: {
        screen: Feed,
        navigationOptions: {
            title: 'Machines'
        }
    },
    List: {
        screen: TextList,
        navigationOptions: {
            title: 'List View'
        }
    },
    Detail: {
        screen: Detail,
        navigationOptions: {
            title: 'Detail'
        }
    }
});


export const TabStack = TabNavigator({
    Dashboard: {
        screen: FeedStack,
        navigationOptions: {
            title: 'Dashboard'
        }
    },
    Search: {
        screen: Search,
        navigationOptions: {
            title: 'Search'
        }
    },
    Favorites: {
        screen: Favorites,
        navigationOptions: {
            title: 'Favorites'
        }
    }
});


export const DownloadStack = StackNavigator({
    Downloads: {
        screen: Downloads,
        navigationOptions: {
            title: 'Downloads'
        }
    }
});

export const Root = DrawerNavigator({
    Feed: {
        Screen: TabStack,
        navigationOptions: {
            title: 'Machines'
        }
    },
    Downloads: {
        screen: DownloadStack
    }
});

and Feed.js ( components/Feed.js )

import React from 'react';

import { View, Text } from 'react-native';

class Feed extends React.Component {

    render() {
        return (
            <View>
                <Text>Hallo Feed Soon</Text>
            </View>
        );
    }
}

export default Feed;

As i can see, Feed is extending React.Component and also exporting a default Classname "Feed".

It seems to be a very Basic Mistake, what am i doing wrong here?

Answer 1

ok i found it.

The route "Feed" in Root has a "Screen" property instead of a "screen" Property.

can be closed by error in front of screen.

Answer 2

if you use react native router flux then this could be problem for using the wrong export syntax.

Usual syntax for export :

  export {ComponentName};

or this :

  export default ComponentName;

it should be (when using the react-native-router-flux

module.exports = ComponentName;