React native's picker element item not valid [running in iOS]

Question

I am trying to implement native picker in my application by following the official tutorial on the react-native site. But I am having the following issue. I am guessing it's due to the syntax of my import statement. I am a newbie in react native and even js so would appreciate some guidelines regarding the same and how to resolve this error.

import React, {
  Component,
} from 'react';

import {
  Text,
  View,
  StyleSheet,
  UIExplorerBlock,
  UIExplorerPage,
  Platform,
  Switch,
  AppRegistry,
  Picker,
  TouchableWithoutFeedback,
} from 'react-native';

const Item = Picker.Item;

========================

render: function(){

    return <View style = {styles.container}>
    <Text>
    Choose the number of team or players.
    </Text>
        <UIExplorerBlock title="Basic Picker">
                  <Picker
                    style={styles.picker}
                    selectedValue={this.state.selected1}
                    onValueChange={this.onValueChange.bind(this, 'selected1')}>
                    // <Picker.Item label="hello" value="key0" />
                    // <Picker.Item label="world" value="key1" />
                    <Item label="hello" value="key0" />
                    <Item label="world" value="key1" />
                  </Picker>
        </UIExplorerBlock>
    </View>
  }

Answer 1

Below example may help you implement a sample picker in react-native.

import React, { Component } from 'react';

import {
  AppRegistry,
  Text,
  View,
  Picker,
} from 'react-native';

class StackOverflow extends Component {

    constructor(context,props){
        super(context,props);
        this.state = {
             selectedValue: 'c++',
        };
    }

    onValueChange(key, value) {
      this.setState({
          selectedValue : key,
      });
    }

    render() {
      return (
          <View >
             <Text>
                Choose a language
             </Text>

             <Picker
               selectedValue={this.state.selectedValue}
               onValueChange={this.onValueChange.bind(this)}>
               <Picker.Item label="C" value="c" />
               <Picker.Item label="C++" value="c++" />
               <Picker.Item label="Java" value="java" />
               <Picker.Item label="JavaScript" value="js" />
             </Picker>

             <Text>Selected language is {this.state.selectedValue}</Text>
          </View>
      );
    }
}

AppRegistry.registerComponent('StackOverflow', () => StackOverflow);

Let me know if you need any clarifications.