In React Native, how can I avoid having a user click a submit button twice, when they are writing in a TextInput?

Question

I have a very simple form for writing comments, with a <TextInput> and an <IconButton> :

Screenshot:

Code:

  <View style={styles.container}>
    <TextInput
      mode={'outlined'}
      onChangeText={(val) => setCommentText(val)}
      value={commentText}
      label={'Write a comment...'}
    />
    <IconButton
      icon="send"
      onPress={addComment}
    />
  </View>

The problem is that users have to click the Send button twice. The first click just blurs the input and dismisses the keyboard, but the button doesn't register a click. Then when the TextInput is blurred they can actually click the Submit button.

How can I make it possible to click the Send button only once, when the TextInput has focus?

Answer 1

Changing onPress to onTouchStart in the <Button> solved it. No need for tapping the button twice anymore.

Answer 2

Actually this behaviour is normal. if the keyboard is open and you want to interact with screen, first click will dismiss the keyboard and second one will work. so as the best practice you can have a button within your keyboard which clicking on that will trigger the call request you want:

<TextInput
      mode={'outlined'}
      onChangeText={(val) => setCommentText(val)}
      value={commentText}
      returnKeyType="send"
      onSubmitEditing={() => {
        // call you api or whatever function here;
      }}
      label={'Write a comment...'}
      blurOnSubmit={false}
    />