react-native

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

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

Screenshot:

enter image description here

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?

Solution

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