React native touchable not working with keyboard

Question

I am using bare react-native CLI.

My modal has a text input field inside. In the modal, when I open the keyboard, the buttons next to the text input are not working. They close the keyboard when tapped instead of working.

I tried it using the native modal module (with KeyboardAvoidingView) and using the react-native-modal

Image

   // with react-native-modal
  <View style={styles.PostCommentArea}>
        <View style={styles.PostBody}>
          <Image
            source={{ uri: UserDetails.profile_image }}
            style={styles.UserImg}
          />
          <InputField
            ref={InputRef}
            style={styles.InputField}
            length={0.65}
            hv={0.055}
            placeholder="Add Comment..."
            onSubmitEditing={postComment}
          />
          <TouchableHighlight style={styles.PostBtn} onPress={postComment}>
            {PostingComment ? (
              <>
                <Indicator size="small" color={Colors.WHITE} />
              </>
            ) : (
              <IconOutline
                name="arrow-up"
                size={height * 0.027}
                color={Colors.WHITE}
              />
            )}
          </TouchableHighlight>
        </View>
      </View>

Answer 1

One way of fixing this is wrapping the component in a ScrollView and using the keyboardShouldPersistTaps prop.

'never' 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 children of the scroll view (or captured by an ancestor).

  <ScrollView keyboardShouldPersistTaps={'handled'}>
  ...
  </ScrollView>

Answer 2

Ensure any parent <KeyboardAwareScrollView or <ScrollViews also have this attribute, not just the immediate parent component.

Answer 3

I had a similar problem in a modal display and found that it was the ScrollView under the modal that was causing the problem.

If your modal is displayed over a ScrollView or FlatList, you need to add

keyboardShouldPersistTaps='handled'

That seemed to fix the problem for me.