TypeError: undefined is not an object (evaluating '_reactNative.TabBarIOS.Item')

Attempting to use TabBarIOS results in TabBarIOS.Item being undefined. Can’t build any project using TabBarIOS - tested on 0.59.4 through 0.59.8.

React Native version: 0.59.8 info React Native Environment Info: System: OS: macOS 10.14.4 CPU: (12) x64 Intel® Core™ i7-8700K CPU @ 3.70GHz Memory: 246.88 MB / 32.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.15.3 - /usr/local/bin/node Yarn: 1.7.0 - /usr/local/bin/yarn npm: 6.9.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1 Android SDK: API Levels: 23, 25, 26 Build Tools: 23.0.1, 25.0.3, 26.0.1 System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64 IDEs: Android Studio: 3.0 AI-171.4443003 Xcode: 10.1/10B61 - /usr/bin/xcodebuild npmPackages: react: 16.8.3 => 16.8.3 react-native: 0.59.8 => 0.59.8 npmGlobalPackages: react-native-cli: 2.0.1

Steps To Reproduce

1. Create a new project (react-native init AwesomeProject
2. Modify App.js to have the following code (Note: base64Icon is invalid below to keep this readable - please use the attached github repository to reproduce):

import React, { Component } from 'react';
import {
  TabBarIOS,
  Text,
  View,
} from 'react-native';

const base64Icon = 'data:image/png;base64,iVBOgg==';

type Props = {};
export default class App extends Component<Props> {

  constructor(props, context) {
    super(props, context);
    // this.state = this._getInitialState()
    this.state = {
      selectedTab: 'redTab',
      notifCount: 0,
      presses: 0
    }
  }

  static _renderContent(color: string, pageText: string, num?: number) {
    return (
      <View style={[styles.tabContent, {backgroundColor: color}]}>
        <Text style={styles.tabText}>{pageText}</Text>
        <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
      </View>
    );
  }

  render() {
    return (
      <TabBarIOS
        tintColor="white"
        barTintColor="darkslateblue">
        <TabBarIOS.Item
          title="Blue Tab"
          icon={{uri: this.base64Icon, scale: 3}}
          selected={this.state.selectedTab === 'blueTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'blueTab',
            });
          }}>
          {this._renderContent('#414A8C', 'Blue Tab')}
        </TabBarIOS.Item>
        <TabBarIOS.Item
          systemIcon="history"
          badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
          selected={this.state.selectedTab === 'redTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'redTab',
              notifCount: this.state.notifCount + 1,
            });
          }}>
          {this._renderContent('#783E33', 'Red Tab', this.state.notifCount)}
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }

}

Describe what you expected to happen:

Expected to build an app under XCode that has an iOS Tab Bar. Received error about TabBarIOS.Item being undefined as shown in screenshot below.

Snack, code example, or link to a repository:

https://github.com/natestone/TabBarIOS_Issue

[codler]

Would be good to mention in the documentation also.

[kelset]

@codler I think that they are refactoring the documentation in a way that it will be clearer to know what is in the core repo VS what is extracted, etc.

But if there is one specific point where you’d like to see that mentioned, I would suggest that you do a small PR yourself until the massive rework is finished 😉