React native element type is invalid expected a string

Question

I am new to React Native and I want to use react-native-material-bottom-navigation. I had find some other questions related to this but can't shed some light for me.

I installed the dependency using npm and run the command react-native link then I executed react-native run-android

Here is my code in App.js

import React, { Component } from 'react';
import BottomNavigation, {
  FullTab
} from 'react-native-material-bottom-navigation'
import {
  View,
  Icon
  } from 'react-native';

export default class App extends Component {
  tabs = [
    {
      key: 'games',
      icon: 'gamepad-variant',
      label: 'Games',
      barColor: '#388E3C',
      pressColor: 'rgba(255, 255, 255, 0.16)'
    },
    {
      key: 'movies-tv',
      icon: 'movie',
      label: 'Movies & TV',
      barColor: '#B71C1C',
      pressColor: 'rgba(255, 255, 255, 0.16)'
    },
    {
      key: 'music',
      icon: 'music-note',
      label: 'Music',
      barColor: '#E64A19',
      pressColor: 'rgba(255, 255, 255, 0.16)'
    }
  ]

  renderIcon = icon => ({ isActive }) => (
    <Icon size={24} color="white" name={icon} />
  )

  renderTab = ({ tab, isActive }) => (
    <FullTab
      isActive={isActive}
      key={tab.key}
      label={tab.label}
      renderIcon={this.renderIcon(tab.icon)}
    />
  )

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          {/* Your screen contents depending on current tab. */}
        </View>
        <BottomNavigation
          onTabPress={newTab => this.setState({ activeTab: newTab.key })}
          renderTab={this.renderTab}
          tabs={this.tabs}
        />
      </View>
    )
  }
}

Here's my environment setup

Environment:
  OS: Linux 4.13
  Node: 8.11.3
  Yarn: 1.9.4
  npm: 5.6.0
  Watchman: Not Found
  Xcode: N/A
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

Appreciate if someone could help. Thanks in advance.

Dharman · Accepted Answer · 2020-04-12 12:21:21Z

1

I solved my problem like this:-

Even for react native 0.60, you have to link vector icons library to react native like this

react-native link react-native-vector-icons

Link to React native vector icons library https://www.npmjs.com/package/react-native-vector-icons#bundled-icon-sets

There are lot of Icon bundle available, and you can import any of them like given below. choose anyone as you like

import Icon from 'react-native-vector-icons/FontAwesome';

or

import Icon from 'react-native-vector-icons/Ionicons';

Example

      <Icon
        style={{ paddingLeft: 10 }}
        onPress={() => navigation.openDrawer()}
        name="md-menu"
        size={30}
      />

edited Apr 12, 2020 at 12:21

Dharman♦

33.9k27 gold badges103 silver badges155 bronze badges

answered Aug 22, 2019 at 9:22

Ashwani Garg

1,5271 gold badge16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pritish Vaidya · Accepted Answer · 2018-09-14 07:57:31Z

0

There is no Icon component in react-native

You need to import it from react-native-vector-icons or another such library that uses it under the hood.

Check the library for more examples

answered Sep 14, 2018 at 7:57

Pritish Vaidya

22.3k4 gold badges62 silver badges78 bronze badges

5 Comments

KnowledgeSeeker Over a year ago

Then I Import it like this? import Icon from 'react-native-vector-icons'

Pritish Vaidya Over a year ago

First checkout installation instructions for the library since you need to link it manually, then import it as import Icon from 'react-native-vector-icons/FontAwesome';, whichever icon family you want to use.

KnowledgeSeeker Over a year ago

still had some error. Invariant violation: Element type is invalid... Check the render method of App

Sivcan Singh Over a year ago

@KnowledgeSeeker import Icon from 'react-native-vector-icons/Ionicons'; as per the documentation

Sivcan Singh Over a year ago

@KnowledgeSeeker github.com/oblador/react-native-vector-icons#basic-example

rondi · Accepted Answer · 2018-09-14 09:33:06Z

0

you need to install react-native-vector-icons.. go to your cmd or using the terminal and jump to your project path.. do

npm install --save react-native-vector-icons

and in your project you should import

import Icon from 'react-native-vector-icons/Ionicons'

hope it helps

answered Sep 14, 2018 at 9:33

rondi

611 silver badge11 bronze badges

Comments

vimuth · Accepted Answer · 2022-08-27 07:52:21Z

0

In my case i changed:

import { Icon } from 'react-native-vector-icons/MaterialIcons';

to

import  Icon  from 'react-native-vector-icons/MaterialIcons';

and it worked

edited Aug 27, 2022 at 7:52

vimuth

5,87355 gold badges98 silver badges128 bronze badges

answered Aug 23, 2022 at 19:12

Lucky Amos

2162 silver badges5 bronze badges

Collectives™ on Stack Overflow

React native element type is invalid expected a string

4 Answers 4

Comments

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Related