title: Focus text input on TouchableHighlight clicked
body: <p>I have a class that I want the text input inside it to focus on the parent being selected.</p>
  
  <pre><code>class ListItem extends React.PureComponent {
      constructor(props) {
          super(props);
          this.state = {
             editable: this.props.item.editable,
             value: this.props.item.value,
             heading: this.props.item.heading,
             item: this.props.item.item,
          }
      }
  
      _onPress = () =&gt; {
          this.setState({ editable: true});
          this.props.onPressItem(this.props.index, this.props, this.state);
      }
  
      _onSearchTextChanged = (event) =&gt; {
          this.setState({ value: event.nativeEvent.text });
        };
  
      _handleSaveEvent = (e) =&gt; {
          this.setState({ editable: false });
          alert('works');
          //Add in saving item
      }
  
      render() {
        var editable = this.state.editable;
        var heading = this.state.heading;
        var value = this.state.value;
        return (
          &lt;TouchableHighlight onPress={this._onPress} underlayColor='#dddddd'&gt;
            &lt;View&gt;
              &lt;View style={styles.rowContainer}&gt;
                &lt;View style={styles.textContainer}&gt;
                  &lt;Text style={styles.title}&gt;{heading}: &lt;/Text&gt;
                  {this.state.editable? 
                      &lt;TextInput
                          style={styles.searchInput}
                          value={value.toString()}
                          onChange={this._onSearchTextChanged}
                          keyboardType="default"
                          returnKeyType="done"
                          onSubmitEditing={this._handleSaveEvent}/&gt;
                  : 
                      &lt;Text style={styles.price}&gt;{value}&lt;/Text&gt; 
                  }
                  {}
                &lt;/View&gt;
              &lt;/View&gt;
              &lt;View style={styles.separator}/&gt;
            &lt;/View&gt;
          &lt;/TouchableHighlight&gt;
        );
      }
    }
  </code></pre>
  
  <p>Ive tried adding </p>
  
  <blockquote>
    <p>autoFocus={true}</p>
  </blockquote>
  
  <p>Ive also tried adding</p>
  
  <blockquote>
    <p>ref={this.props.index}</p>
  </blockquote>
  
  <p>But when I try to focus that it tells me its not defined (this.refs[this.props.index].focus();)</p>
  
  <p>I would like it to be focused when the 'editable' state is enabled, I am not sure why this seems so hard. My background is more in C#, Angular 2+ etc so maybe its just how react is structured is throwing me</p>