CODEWITHSUNDEEP
javascriptreactjsreact-nativecreate-react-app
x_beckyboo_x
x_beckyboo_x

Reputation: 33

What is the reason for this error in React Native?

I am new to react native and I have been trying to create a header and pull out menu using createDrawerNavigator.

When running my code I get the following error.

Error: The component for route 'Home' must be a React component. For example:

import MyScreen from './MyScreen';

Home: MyScreen, }

You can also use a navigator:

import MyNavigator from './MyNavigator';

Home: MyNavigator,

}

Here is my app.js file:

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import MyDrawerNavigator from './components/MyDrawerNavigator';

  const MyApp = createAppContainer(MyDrawerNavigator);

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

My HomeScreen.js file

import React from 'react';
import { Text, Button } from 'react-native';
import LogoTitle from './LogoTitle';


class MyHomeScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
      return {
        headerTitle: <LogoTitle />,
        headerLeft: (
          <Button
          onPress={() => this.props.navigation.navigate('DrawerToggle')}
          title={'Menu'}
          />
        ),
      };
    };

    render() {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
        </View>
      );
    }
  }

  export default MyHomeScreen;

My MyDrawerNavigator.js file

import React from 'react';
import { Button, Platform, Image, View, Text } from 'react-native';

import { createDrawerNavigator } from 'react-navigation-drawer';
import  MyHomeScreen  from './HomeScreen';
import  DetailsScreen  from './DetailScreen';


const MyDrawerNavigator = createDrawerNavigator(
  {
    Home: MyHomeScreen,
    Details: DetailsScreen,
  }, {
   drawerPosition: 'right',
   contentOptions: {
   activeTintColor: '#000',
  },
});

export default MyDrawerNavigator

Upvotes: 0

Views: 294

Answers (1)

Auticcat
Auticcat

Reputation: 4489

The are 2 problems here:

1) You are not exporting your MyDrawerNavigator just add:

export default MyDrawerNavigator

to your MyDrawerNavigator.js file

2) You are not exporting your HomeScreen. You'll have to create a separate file for it, like you did with DetailsScreen.

The HomeScreen.js file would look like:

class MyHomeScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
      return {
        headerTitle: <LogoTitle />,
        headerLeft: (
          <Button
          onPress={() => this.props.navigation.navigate('DrawerToggle')}
          title={'Menu'}
          />
        ),
      };
    };

    render() {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
        </View>
      );
    }
  }

You NEED to add a render inside of your screens

Upvotes: 1

Related Questions