CODEWITHSUNDEEP
javascriptandroidreactjsreact-native
KnowledgeSeeker
KnowledgeSeeker

Reputation: 1088

React native element type is invalid expected a string

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.

Upvotes: 0

Views: 2236

Answers (4)

Lucky Amos
Lucky Amos

Reputation: 196

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

Upvotes: 0

Ashwani Garg
Ashwani Garg

Reputation: 1527

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}
      />

Upvotes: 1

rondi
rondi

Reputation: 71

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

Upvotes: 0

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

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

Upvotes: 0

Related Questions