TabBarIOS fails with "Invariant Violation: onlyChild must be passed a children with exactly one child."

[awiss]

My element looks like this

var React = require('react-native');
var styles = require('./styles.ios.js');
var {
  TabBarIOS,
  View,
  Image,
  Text
} = React

var HomeTabBar = React.createClass({
  getInitialState: function() {
    return {
      name: this.props.name
    }
  },
  render: function () {
    return (
      <TabBarIOS>
        <TabBarIOS.Item
          selected={this.state.name == "Home"}
          name="Trips"
          title="Trips"
          icon={require('image!waypoint_map-32')}
          onPress={this.props.onPressTrips}
        >
        </TabBarIOS.Item>
        <TabBarIOS.Item
          selected={this.state.name == "Brokers"}
          name="Brokers"
          systemIcon="contacts"
          title="Brokers"
          onPress={this.props.onPressTrips}
        >
        </TabBarIOS.Item>
        <TabBarIOS.Item
          systemIcon="more"
          selected={this.state.name == "More"}
          onPress={this.props.onPressMore}
        >
        </TabBarIOS.Item>

      </TabBarIOS>
    )
  },
  onPressTab: function(name) {
    if (this.props.selected != name) {
      this.props.outer_nav.replace({
        name: name
      });
    }
  }
});


module.exports = HomeTabBar;

The failure occurs whenever the selected property on the 2nd or 3rd item evaluates to true.

[mwilc0x]

Try removing the icon and systemIcon props.

[brentvatne]

@awiss - it is expecting the content to be nested inside of the TabBarIOS.Item - sorry for unclear docs, I will be fixing that soon.

  render: function() {
    return (
        <TabBarIOS>
          <TabBarIOS.Item
            selected={this.state.name == "Trips"}
            name="Trips"
            title="Trips"
            systemIcon="featured"
            onPress={() => { this.onPressTab('Trips') }}>
            <View style={{flex: 1, backgroundColor: 'white'}}>
              <Text>Hi from trips</Text>
            </View>
          </TabBarIOS.Item>

          <TabBarIOS.Item selected={this.state.name == "Brokers"} name="Brokers" systemIcon="contacts" title="Brokers"
            onPress={() => { this.onPressTab('Brokers') }}>
            <View style={{flex: 1, backgroundColor: 'white'}}>
              <Text>Hi from brokers</Text>
            </View>
          </TabBarIOS.Item>

          <TabBarIOS.Item systemIcon="more" selected={this.state.name == "More"}
            onPress={() => { this.onPressTab('More') }}>
            <View style={{flex: 1, backgroundColor: 'white'}}>
                <Text>Hi from more</Text>
              </View>
          </TabBarIOS.Item>
        </TabBarIOS>
    )
  },

  onPressTab: function(name) {
    this.setState({name: name});
   },