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> 

Answer 1

If you wrap your View inside a ScrollView, then you can. ScrollView has a property called keyboardShouldPersistTaps.

keyboardShouldPersistTaps Determines when the keyboard should stay visible after a tap.

'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap.

'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.

'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).

Use handled, so that the ScrollView can handle touches even when the keyboard is open. For your second question of closing keyboard onPress, import Keyboard from react-native and use Keyboard.dismiss() to close any open keyboard. Call this function inside your onPress.

For example,

<ScrollView keyboardShouldPersistTaps='handled' >   //Other Components    <Button onPress={() => {     Keyboard.dismiss();     //Your logic   }}/>  </ScrollView> 

Hope this helps.