title: React-native elements search bar ref to use focus() method for instance is undefined
body: <p>I followed the doc of the react-native-elements library but I get <code>this.search</code> as an undefined object...</p>
  
  <p><a href="https://react-native-training.github.io/react-native-elements/API/searchbar/#calling" rel="nofollow noreferrer">searchbar react-native-elements</a></p>
  
  <pre><code>class SearchBarTest extends Component {
  
      componentDidMount()
      {
          this.search.focus()//search is undefined
      }
      render(){
          &lt;SearchBar
            ref={search =&gt; this.search = search}
            ...
          /&gt;
      }
  
  }
  </code></pre>
  
  <p>Any idea how to make this working?</p>
  
  <p>EDIT: </p>
  
  <p>Adding full context of the code.</p>
  
  <p>The idea is having a component with a header and body. The header has an optional search bar or a title and two buttons depending on the props search.</p>
  
  <p>If search props is true, then I display the searchBar.</p>
  
  <p><strong>PARENT COMPONENT:</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import {StyleSheet, View, Text, TouchableWithoutFeedback, Keyboard} from 'react-native';
  
  import Icon from 'react-native-vector-icons/Ionicons';
  
  import DismissableKeyboardContainer from '../../components/DismissableKeyboardContainer';
  
  export default class Search extends Component {
  
      static navigationOptions = () =&gt; {
          return {
              tabBarIcon: ({tintColor}) =&gt; (
                  &lt;Icon name="ios-search-outline" size={25} color={tintColor}/&gt;
              )
          }
      };
  
      render() {
  
  
          someMethod = () =&gt; {
              console.log('hello');
          }
  
          return (
              &lt;DismissableKeyboardContainer search={true}&gt;
                  &lt;View style={{flex: 1, alignItems: 'center'}}&gt;
                      &lt;Text&gt;Hello world&lt;/Text&gt;
                  &lt;/View&gt;
  
              &lt;/DismissableKeyboardContainer&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
      }
  });
  </code></pre>
  
  <p><strong>COMPONENT where the actual searchBar component is used:</strong></p>
  
  <pre><code>import React, { Component} from 'react';
  import { Keyboard, TouchableWithoutFeedback, TouchableOpacity, View, Text, StyleSheet} from 'react-native';
  
  import { SearchBar } from 'react-native-elements'
  
  import Icon from 'react-native-vector-icons/Ionicons';
  
  import PropTypes from 'prop-types';
  
  class DismissableKeyboardContainer extends Component {
  
      static defaultProps = {
          title: '',
          search: false,
          buttonLeft: '',
          buttonRight: '',
          borderShadow: true,
          headerStyle:{}
      };
  
      componentDidMount()
      {
  
      }
      render() {
  
          let { title, search, buttonLeft, buttonRight, headerStyle, borderShadow } = this.props;
  
          return (        
  
              &lt;TouchableWithoutFeedback onPress={() =&gt; Keyboard.dismiss()}&gt;
                  &lt;View style={{ flex: 1 }}&gt;
                      &lt;View style={[styles.headerContainer, borderShadow ? styles.borderShadow : '', headerStyle]}&gt;
                          {
                              !search &amp;&amp; &lt;View style={{position: 'absolute', padding: 10, bottom: 0, flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}&gt;
  
                                  &lt;TouchableOpacity style={{ flex: 0.2, alignItems: 'center'}}&gt;
  
                                      {
                                          buttonLeft != "" &amp;&amp; &lt;Icon name={buttonLeft} size={25} color="grey" /&gt;
                                      }
  
                                  &lt;/TouchableOpacity&gt;
  
                                  &lt;View style={{ flex: 1, alignItems: 'center' }}&gt;
                                      &lt;Text style={styles.title}&gt;{title}&lt;/Text&gt;
                                  &lt;/View&gt;
                                  &lt;TouchableOpacity style={{ flex: 0.2, alignItems: 'center' }}&gt;
                                      {
                                          buttonRight != "" &amp;&amp; &lt;Icon name={buttonRight} size={25} color="grey" /&gt;
                                      }
                                  &lt;/TouchableOpacity&gt;
                              &lt;/View&gt;
                          }
                          {
                              search &amp;&amp; &lt;SearchBar
                                  ref={search =&gt; this.search = search}
                                  containerStyle={{ backgroundColor: 'transparent', borderTopWidth: 0, borderBottomWidth: 0 }}
                                  inputStyle={{ backgroundColor: 'white' }}
                                  lightTheme
                                  onChangeText={someMethod}
                                  placeholder='Type Here...'
                              /&gt;
                          }
  
                      &lt;/View&gt;
                      &lt;View style={{ flex: 1, backgroundColor: 'transparent'}}&gt;
  
                          {this.props.children}
  
                      &lt;/View&gt;
                  &lt;/View&gt;
              &lt;/TouchableWithoutFeedback&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
  
      headerContainer: {
          flex: 0.12,
          justifyContent: 'flex-end',
          backgroundColor: 'white' ,
      },
      borderShadow: {
          borderColor: '#ddd',
          borderBottomWidth: 0,
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.2,
          shadowRadius: 1,
          elevation: 1,
      },
      title: {
          fontSize: 18,
          fontWeight: 'bold'
      }
  });
  
  DismissableKeyboardContainer.propTypes = {
      title: PropTypes.string.isRequired,
      search: PropTypes.bool.isRequired,
      buttonLeft: PropTypes.string.isRequired,
      buttonRight: PropTypes.string.isRequired,
      headerStyle: PropTypes.any,
  };
  
  export default DismissableKeyboardContainer;
  </code></pre>