title: Set selected item in React native
body: <p>I add Picker items like the following:</p>
  
  <pre><code> addLanguage() {
          console.log('addLanguage');
          pickerValue = this.state.pickerValue;
          pickers = this.state.pickers;
          // this.state.itemValues[0] = 'fr';
          itemValues = this.state.itemValues;
          pickers.push(&lt;View key={Math.random()} style={{flexDirection: 'row', justifyContent: 'center'}}&gt;
  
  
              &lt;Picker key={Math.random()} style={{width: 150}}
                      selectedValue={this.state.itemValues[0]}
                      onValueChange={(itemValue, itemIndex) =&gt; {
                          this.setState({itemValue});
                          this.handleChangeOption(itemValue);
                      }}
                  //   this.handleChangeOption(itemValue)}}
              &gt;
                  {
                      Object.keys(this.state.isoLangs).map((lang) =&gt; {
                          return &lt;Picker.Item key={lang} label={this.state.isoLangs[lang].name} value={lang}/&gt;
                      })
                  }
              &lt;/Picker&gt;
              &lt;Image
                  source={require('./assets/Arrow.png')}
              /&gt;
  
              &lt;Picker key={Math.random()} style={{width: 150}}
                      onValueChange={(value) =&gt; {
                          this.setState({pickerValue: value});
                          pickerValue = value;
                      }}&gt;
                  {
                      Object.keys(this.state.isoLangs).map((lang) =&gt; {
                          return &lt;Picker.Item key={lang} label={this.state.isoLangs[lang].name} value={lang}/&gt;
                      })
                  }
              &lt;/Picker&gt;
          &lt;/View&gt;);
          this.setState({
              ...this.state,
              pickers: pickers,
              //  itemValues:itemValues
              // pickerValue: pickerValue
          });
      }
  </code></pre>
  
  <p>It works to add new items but it doesn't work to set the selected item once an item is selected. What could be the matter? My complete code is:</p>
  
  <pre><code>import React from 'react';
  import {Image, Picker, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
  import {StackNavigator} from 'react-navigation'; // Version can be specified in package.json
  import {Constants} from 'expo';
  
  class HomeScreen extends React.Component {
      render() {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;View style={styles.section1}&gt;
                      &lt;Text style={[styles.text, {paddingBottom: 20}]}&gt;{'Welcome'}&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.section2}&gt;
                      &lt;Text style={[styles.text, {paddingTop: 20}]}&gt;{'Your verification was successful'}&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.section3}&gt;
                      &lt;Text style={styles.text}&gt;{'Sign up as:'}&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.section4}&gt;
                      &lt;View style={styles.buttonContainer}&gt;
  
                          &lt;View style={styles.button}&gt;
                              &lt;TouchableHighlight onPress={() =&gt; this.props.navigation.navigate('Details')}&gt;
  
                                  &lt;Image source={require('./assets/stck2.png')} style={styles.image}/&gt;
                              &lt;/TouchableHighlight&gt;
                              &lt;TouchableHighlight onPress={() =&gt; this.props.navigation.navigate('Details')}&gt;
  
                                  &lt;Text style={styles.buttonText}&gt;{'Translator'}&lt;/Text&gt;
                              &lt;/TouchableHighlight&gt;
  
                          &lt;/View&gt;
  
  
                          &lt;View style={styles.button}&gt;
                              &lt;TouchableHighlight onPress={() =&gt; this.props.navigation.navigate('Recruiter')}&gt;
  
                                  &lt;Image source={require('./assets/stck1.png')} style={styles.image}/&gt;
                              &lt;/TouchableHighlight&gt;
                              &lt;TouchableHighlight onPress={() =&gt; this.props.navigation.navigate('Recruiter')}&gt;
  
                                  &lt;Text style={styles.buttonText}&gt;{'Recruiter'}&lt;/Text&gt;
                              &lt;/TouchableHighlight&gt;
  
                          &lt;/View&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          );
      }
  }
  
  class DetailsScreen extends React.Component {
      constructor(props) {
          super(props);
          //  this.state = { itemValue: this.prop.initialSelectedValue };
          this.handleChangeOption = this.handleChangeOption.bind(this);
          this.addLanguage = this.addLanguage.bind(this)
          this.update = this.update.bind(this)
      }
  
      state = {
          count: 0, itemValues: [], pickers: [], user: '',
  
          isoLangs: {
              "ab": {
                  "name": "Abkhaz",
                  "nativeName": "аҧсуа"
              },
              "aa": {
                  "name": "Afar",
                  "nativeName": "Afaraf"
              },
              "af": {
                  "name": "Afrikaans",
                  "nativeName": "Afrikaans"
              },
              "ak": {
                  "name": "Akan",
                  "nativeName": "Akan"
              },
              "sq": {
                  "name": "Albanian",
                  "nativeName": "Shqip"
              },
              "am": {
                  "name": "Amharic",
                  "nativeName": "አማርኛ"
              },
              "ar": {
                  "name": "Arabic",
                  "nativeName": "العربية"
              }
          }
      };
  
      getLanguageName = function (key) {
          key = key.slice(0, 2);
          lang = this.state.isoLangs[key];
          return lang ? lang.name : undefined;
      };
      getLanguageNativeName = function (key) {
          key = key.slice(0, 2);
          lang = this.state.isoLangs[key];
          return lang ? lang.nativeName : undefined;
      };
  
      handleChangeOption(itemValue) {
          console.log('itemValue ' + itemValue);
          console.log('1 this.state.itemValues ' + this.state.itemValues);
  
          this.state.itemValues[0] = itemValue
          console.log('2 this.state.itemValues ' + this.state.itemValues);
  
      }
  
      update() {
          console.log('update ' + this.state.itemValues);
          return this.state.itemValues[0] || 'ar';
      }
  
      addLanguage() {
          console.log('addLanguage');
          pickerValue = this.state.pickerValue;
          pickers = this.state.pickers;
          // this.state.itemValues[0] = 'fr';
          itemValues = this.state.itemValues;
          pickers.push(&lt;View key={Math.random()} style={{flexDirection: 'row', justifyContent: 'center'}}&gt;
  
  
              &lt;Picker key={Math.random()} style={{width: 150}}
                      selectedValue={this.state.itemValues[0]}
                      onValueChange={(itemValue, itemIndex) =&gt; {
                          this.setState({itemValue});
                          this.handleChangeOption(itemValue);
                      }}
                  //   this.handleChangeOption(itemValue)}}
              &gt;
                  {
                      Object.keys(this.state.isoLangs).map((lang) =&gt; {
                          return &lt;Picker.Item key={lang} label={this.state.isoLangs[lang].name} value={lang}/&gt;
                      })
                  }
              &lt;/Picker&gt;
              &lt;Image
                  source={require('./assets/Arrow.png')}
              /&gt;
  
              &lt;Picker key={Math.random()} style={{width: 150}}
                      onValueChange={(value) =&gt; {
                          this.setState({pickerValue: value});
                          pickerValue = value;
                      }}&gt;
                  {
                      Object.keys(this.state.isoLangs).map((lang) =&gt; {
                          return &lt;Picker.Item key={lang} label={this.state.isoLangs[lang].name} value={lang}/&gt;
                      })
                  }
              &lt;/Picker&gt;
          &lt;/View&gt;);
          this.setState({
              ...this.state,
              pickers: pickers,
              //  itemValues:itemValues
              // pickerValue: pickerValue
          });
      }
  
      render() {
  
          console.log('render: ');
          keys = Array.from(this.state.isoLangs);
  
          return (
              &lt;View style={{flex: 1, justifyContent: 'center'}}&gt;
                  &lt;View style={{flexDirection: 'row', justifyContent: 'center'}}&gt;
  
                      &lt;Text style={{
                          fontSize: 20,
                          fontFamily: 'normal',
                          color: 'skyblue',
                      }}&gt;
                          Which languages do you translate?
                      &lt;/Text&gt;
                  &lt;/View&gt;
  
  
                  {this.state.pickers.map((picker) =&gt; {
                      return picker
                  })}
  
  
                  &lt;TouchableHighlight onPress={() =&gt; this.addLanguage()}&gt;
                      &lt;Text style={{
                          fontSize: 20,
                          fontFamily: 'normal',
                          color: 'skyblue',
                      }}&gt;+ add language&lt;/Text&gt;
                  &lt;/TouchableHighlight&gt;
  
                  &lt;View style={{flexDirection: 'row', justifyContent: 'center'}}&gt;
  
                      &lt;TouchableHighlight onPress={() =&gt; this.props.navigation.navigate('Screen3')}&gt;
                          &lt;Image
                              source={require('./assets/Next.png')}
  
                          /&gt;
                      &lt;/TouchableHighlight&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          );
      }
  }
  
  const RootStack = StackNavigator(
      {
          Home: {
              screen: HomeScreen,
          },
          Details: {
              screen: DetailsScreen,
          },
      },
      {
          initialRouteName: 'Home',
      }
  );
  
  export default class App extends React.Component {
      render() {
          return &lt;RootStack/&gt;;
      }
  }
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          paddingTop: Constants.statusBarHeight,
          backgroundColor: '#fff',
      },
      section1: {
          flex: 0.17,
          justifyContent: 'flex-end',
          alignItems: 'center'
      },
      section2: {
          flex: 0.30,
          justifyContent: 'flex-start',
          alignItems: 'center'
      },
      section3: {
          flex: 0.10,
          justifyContent: 'center',
          alignItems: 'center'
      },
      section4: {
          flex: 0.43
      },
      text: {
          fontSize: 24,
          color: '#53a6db',
          textAlign: 'center',
          paddingTop: 40,
          paddingBottom: 40,
          paddingLeft: 40,
          paddingRight: 40
      },
      buttonContainer: {
          flex: 1,
          flexDirection: 'row'
      },
      button: {
          flex: 0.5,
          justifyContent: 'center',
          alignItems: 'center'
      },
      buttonText: {
          fontSize: 24,
          color: '#53a6db',
          textAlign: 'center',
          paddingTop: 5,
          paddingBottom: 5,
          paddingLeft: 5,
          paddingRight: 5
      },
      image: {
          width: 100,
          height: 100
      }
  });
  </code></pre>