Can't find variable: tab on example code

[fuzunspm]

What kind of Issue is this?

Bug Report

Actual behavior

• What is happening? example code throws error of Can't find variable: tab
• Is it happening on Android, iOS or both? both

Expected behavior

• What did you expect to happen?

I've copied example code but it won't run.

Environment

software	version
react-native-material-bottom-navigation	lates
react-native or expo	react-native
node	10.10.0
npm or yarn	6.4.1 npm

[timomeh]

This sounds like a Typo. Could you please share the exact code you've pasted into your project? Thanks

[fuzunspm]

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

export default class App extends React.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={tab.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={activeTab => this.setState({ activeTab })}
          renderTab={this.renderTab}
          tabs={this.tabs}
        />
      </View>
    )
  }
}

[timomeh]

Your error is in the renderIcon method.

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

The typo in the readme was already fixed. The readme on npmjs.com is not up-to-date because I can't update it without making a new release, and I don't want to release a new version because of a typo. Sorry for the inconveniences.

[fuzunspm]

thanks! but now it throws this error

Check render method of 'FullTab' Element type is invalid

[timomeh]

You're using import { Icon } from "react-native", which does not exist. Use an icon component like this: https://github.com/expo/vector-icons

[fuzunspm]

thanks for help