React Native (React Native Elements) SearchBar Missing Functions focus() blur()

* NOTE [RESOLVED] * React-Native-Elements issue : SearchBar missing functions #877 soln : updated react-native-elements package from 1.0.0.0-beta2 -> 1.0.0.0-beta4

Based on the DOCS, My goal is to be able to call focus() on the 'Search Bar' component

<SearchBar
  ref={search => this.search = search}
  onClearText={()=>this.handleOnClearText()}
/>

However, when I capture the onClearText( ) action I am unable to call :

handleOnClearText = () => {
    if(this.search != null)
        this.search.focus() . //=====> Error here
}       

I get error :

ExceptionsManager.js:65 TypeError: _this.search.focus is not a function

I am able to reference my SearchBar component but the focus() methods is missing.

COMPLETE CODE:

import React, { Component } from "react";
import {Text,View,StyleSheet,Platform,Keyboard,TextInput} from "react-native";
import {SearchBar} from "react-native-elements";

export default class ContentScreen extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
        searchBarText : "",
        dimContent : false
    };
}

static navigationOptions = ({ navigation }) => {
    return {     
        header: navigation.state.params.header ? undefined : 
        navigation.state.params.header,
        title: 'TITLE'
    };
};

handleSearch = () => {
    Keyboard.dismiss();
};

hideHeader = () =>{
    this.props.navigation.setParams({ header: null});
    this.setState({dimContent : true})
}

viewHeader = () =>{
    this.props.navigation.setParams({header: undefined});
    this.setState({dimContent : false})
}

handleContentDimmer= ()=>{
    if(this.state.dimContent){
       return(styles.containerDim)
    }
    else{return(styles.container)}
}

handleChangeText = (searchBarText) => {
    this.setState({
        searchBarText : searchBarText
    })
}

handleCancel = () => {
  this.setState({
    searchBarText : ""
  },()=>{
    this.viewHeader();
  });
}



handleOnClearText(){
    this.setState({
    searchBarText : ""
},()=>{
    if(this.search != null){
        console.log(this.search);
        this.search.focus(); //====================> ERROR HERE
    }})
}

render() {
    if(this.state.searchBarText.length > 1){
        return(
            <View>
            <SearchBar    
                platform={Platform.OS === "ios" ? "ios" : "android"}
                ref={ref => this.search = ref}
                lightTheme
                clearIcon
                placeholder      ='...Search...'
                returnKeyType    ='search'
                cancelButtonTitle="Cancel"
                onCancel        ={()=>this.handleCancel()}
                onClearText     ={()=>this.handleOnClearText()}
                onFocus         ={()=>this.hideHeader()}
                onSubmitEditing ={()=>this.handleSearch()}
                onChangeText    ={ searchBarText => this.setState({searchBarText})}
            />
            </View>
        );
    }

    return (
        <View style={this.handleContentDimmer()}>
            <SearchBar
                platform={Platform.OS === "ios" ? "ios" : "android"}
                ref={ref => this.search = ref}
                lightTheme
                clearIcon
                placeholder="Search..."
                returnKeyType='search'
                cancelButtonTitle="Cancel"
                onCancel        ={()=>this.handleCancel()}
                onClearText     ={()=>this.handleOnClearText()}
                onFocus         ={()=>this.hideHeader()}
                onSubmitEditing ={()=>this.handleSearch()}
                onChangeText    ={(searchBarText)=>this.handleChangeText(searchBarText)}
            />      
        </View>
    );
  }
}

// ___Styles__
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  containerDim: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,.2)'
  }
});

Since you're using the v1.0.0.beta4, therefore it does'nt support onClearText, you need to replace it with onClear.

Also since you're already referencing the this parameter

<SearchBar
  ref={search => this.search = search}
  onClear={()=>this.handleOnClearText()} <== Here
/>

Therefore don't use fat arrow function

handleOnClearText () {
    if(this.search != null)
        this.search.focus()
}