Getting problems with Drawer Items - React Native

Question

I am using React Native with React Navigation 4.0.5 and getting this error:

Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of contentComponent.

This is my code:

import React from 'react';
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import { useDispatch } from 'react-redux';
import { Platform, SafeAreaView, Button, View } from 'react-native';
import * as authActions from '../store/actions/auth';


const MenuNavigator = createDrawerNavigator(
  {
    Mapa: MapaNavigator,
    Pedidos: PedidosNavigator,
    Usuario: UsuarioNavigator
  },
  {
    contentOptions: {
      activeTintColor: Colors.primary
    },
    contentComponent: props => {
      const dispatch = useDispatch();
      return (
        <View style={{ flex: 1, paddingTop: 20 }}>
          <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerItems {...props} />
            <Button
              title="Logout"
              color={Colors.primary}
              onPress={() => {
                dispatch(authActions.logout());
              }}
            />
          </SafeAreaView>
        </View>
      );
    }
  }
);

If I comment <DrawerItems {...props} /> all code works showing only the logout button... Adding <DrawerItems {...props} /> the above error appears...

Answer 1

I just found the solution in this guide

import { createDrawerNavigator, DrawerNavigatorItems } from 'react-navigation-drawer';

Replace this

<DrawerItems {...props} />

by this

<DrawerNavigatorItems {...props} />

Answer 2

Add import

 import { Button, View, SafeAreaView } from 'react-native';

Answer 3

Replacing DrawerItem with DrawerNavigatorItems was part of the issue for me. But for some reason I still had to export this as a separate component. Try making a separate component like:

import React from 'react'
import { View, Button, SafeAreaView } from 'react-native'
import { DrawerNavigatorItems } from 'react-navigation-drawer'

const Logout = props => {
    return <View style={{ flex: 1 }}>
        <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerNavigatorItems {...props} />
            <Button title="Logout" onPress={() => { }} />
        </SafeAreaView>
    </View>
};

export default Logout

The in the Navigator add import Logout from '../components/Logout' and then use contentComponent: props => {return <Logout {...props} />;}. It would not let me define the component inline.