React-native-vector-icons: Icon.TabBarItemIOS Element type is invalid

[glewiswp]

Installed using:

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

Using your example for TabBarIOS.Item throws "Element type is invalid".

import { View, Text, TabBarIOS } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

function TabBarView(props) {
  return (
    <TabBarIOS>
      <Icon.TabBarItem
        title="Home"
        iconName="ios-home-outline"
        selectedIconName="ios-home"
        >
        <View style={styles.tabContent}><Text>Home Tab</Text></View>
      </Icon.TabBarItem>
    </TabBarIOS>
  );
}

Have also attempted to use Icon.TabBarItemIOS:

import { View, Text, TabBarIOS } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

function TabBarView(props) {
  return (
    <TabBarIOS>
      <Icon.TabBarItemIOS
        title="Home"
        iconName="ios-home-outline"
        selectedIconName="ios-home"
        >
        <View style={styles.tabContent}><Text>Home Tab</Text></View>
      </Icon.TabBarItemIOS>
    </TabBarIOS>
  );
}

package.json Dependencies:

"dependencies": {
   "expo": "^22.0.2",
   "ionicons": "^3.0.0",
   "lodash": "^4.17.4",
   "react": "^16.0.0-beta.5",
   "react-native": "^0.49.5",
   "react-native-vector-icons": "^4.4.2"
}

Unable to get Icon.TabBarItemIOS/Icon.TabBarItem working.

[nspangler]

Same issue

[zhnoah]

Same issue

"dependencies": {
    "expo": "^23.0.4",
    "react": "16.0.0",
    "react-native": "0.50.3",
    "react-native-vector-icons": "^4.4.2"
}

[szilarddoro]

Same issue here

[horan-geeker]

Same issue here

"dependencies": {
    "expo": "^23.0.4",
    "react": "16.0.0",
    "react-native": "0.50.3",
    "react-native-vector-icons": "^4.5.0"
  }

[yanglingang]

react-native-vector-icons need linked by react-native.

do not use the expo, because expo will be disabled the react-native link. i use the react-native link in expo environment then get some error.

my way is:

1. use react-native init project_name to renew the project.
2. yarn add react-native-elements react-native-vector-icons
3. react-native link react-native-vector-icons
4. add "postinstall": "rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json", to package.json scripts part, run yarn install this command will be executed

the step 4 for resolve error: bundling failed: Error: While resolving module react-native-vector-icons/FontAwesome, the Haste package react-native-vector-icons was found. However the module FontAwesome could not be found within the package. Indeed, none of these files exist

[Zyckzto]

Does anybody of you had solved this issue? I'm facing exactly the same issue.

By the way, I started my project by using the create-react-native-app thing

[horan-geeker]

you can use react-navigation,that's a easy way to use tabbar with react-native-vector-icons :sweat_smile:

[crock]

@horan_geeker That's not a good solution for people that want the real deal TabBarIOS

[eveningkid]

I am surprised that this is still an undergoing issue that makes TabBarItemIOS impossible to use. 😞

Could we please have some help on this @oblador? Thank you.