DrawerLayoutAndroid + ToolbarAndroid causes Invariant Violation: Element type is invalid

[FoxInFlame]

So, I'm quite new to React and React Native. I wanted to create a toolbar with a hamburger menu to open a drawer, so I gathered a few snippets from multiple sources. I've analyse them and I get how they are supposed to work, but the main problem is that it doesn't work.

import {
  DrawerLayoutAndroid,
  ToolbarAndroid,
  [...]
} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

export default class App extends Component {

  ...

  render() {
    var navigationView = (
      <View style={{ flex: 1, backgroundColor: '#fff' }}>
        <Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>I'm in the Drawer!</Text>
      </View>
    );

    return (
      <DrawerLayoutAndroid
        drawerWidth={300}
        ref={(_drawer) => this.drawer = _drawer}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={() => navigationView}>
        <MaterialIcons.ToolbarAndroid
          title='Home'
          titleColor='white'
          style={styles.toolbar}
          navIconName='menu'
          overflowIconName='android'
          />

        {/**Tapping on this below does open the Drawer, so that's working fine*/}
        <View style={styles.container}>
          <TouchableHighlight onPress={this.openDrawer}>
            <Text>{'Open Drawer'}</Text>
          </TouchableHighlight>
        </View>
      </DrawerLayoutAndroid>
    );
  }
}

The error is the following:

 Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. [...] Check the render method of `App`.

And the only relevant stack trace in App.js is at line 38, which is where <DrawerLayoutAndroid is written.

[yeomann]

just curious to know, how this is related to react-native-vector-icons did error talk about icon? maybe remove the icon and see if the error was because of react-native-vector-icons package

[FoxInFlame]

@yeomann The error didn't specifically point to react-native-vector-icons, however it went away (as in, the toolbar appeared and error disappeared) when I replaced MaterialIcons.ToolbarAndroid with ToolbarAndroid.

So I suspect the Toolbar Android component that this package is overriding isn't properly working.

[yeomann]

Not sure maybe it's conflitcition of name. Try importing with different name if possible

[FoxInFlame]

Issue was with Expo.

Apparently Expo offers the same thing through @expo\vector-icons, so I tried using that as well, but that one didn't have any Toolbar support.

So I've switched to react-navigation for the toolbar/navbar.

[yeomann]

normally I am using react native router flux for navigation it comes with navbar automatically no extra settings needed @FoxInFlame may I suggest you to have a look as well.