CODEWITHSUNDEEP
reactjsreact-native
poimsm2
poimsm2

Reputation: 572

Getting problems with Drawer Items - React Native

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...

Upvotes: 1

Views: 1852

Answers (3)

C&#227;o
C&#227;o

Reputation: 641

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.

Upvotes: 1

poimsm2
poimsm2

Reputation: 572

I just found the solution in this guide

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

Replace this 

<DrawerItems {...props} />

by this

<DrawerNavigatorItems {...props} />

Upvotes: 3

Oleg Levin
Oleg Levin

Reputation: 3621

Add import 

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

Upvotes: 0

Related Questions