React native IOS, when TextInput is focused, button press does not register

Question

In react-native I have a TextInput element and when you click on it the keyboard pops up as desired. The problem however is that I have a arrow button that you click when you have entered your input into the TextInput but the first touch on the button or anywhere else always ONLY removes the keyboard and does not run the onPress function on the arrow button. How do I make it so that when I have entered my text and still have the keyboard up. The next press both removes the keyboard and also executes the onPress function on the button. Right now the user has to double press. Once to remove the keyboard and then the second time the function for onPress is executing.

<View style={{flex: 1,backgroundColor: "#b70f42", justifyContent: "center", alignItems: "center"}}>
  <View style={{position: "relative"}}>
    <TextInput
      style={{color: "#FFF", borderBottomColor: "#FFF", borderBottomWidth: 1,fontSize:30,padding: 0, paddingRight: 50,height: 40,width: this.state.width*3/4,shadowOffset: { width: 0, height: 0 }, shadowColor: 'black', shadowOpacity: 0.5, shadowRadius: 5}}
      onChangeText={(passwordInput) => this.showArrow(passwordInput)}
      value={this.state.passwordInput}
      placeholder="Vart ska du?"
      placeholderTextColor="#FFF"
    />
    <Text style={{marginLeft: 175,color:"#FFF"}}>Powered by IBM</Text>
    <TouchableHighlight underlayColor="rgba(255,255,255,0)" style={{position: "absolute", top: 0, right: 5,}} onPress={() => this.onSearchButtonClick()}>
      <Animated.Image
        source={require("../../img/right-arrow.png")}
        style={{width:40, height: 40,opacity: this.state.arrowOpacity}}>
      </Animated.Image>
    </TouchableHighlight>
  </View>
</View>