Dismissing Keyboard in React Native

Question

I have multiple components in my app where I get user inputs using a keyboard. Now I want to dismiss the keyboard whenever user presses outside of the text input field.

I know there is TouchableWithoutFeedback in which I can wrap my component, but whats the best way to do it for multiple screens having this issue.

Shall I create a HOC for this that handles TouchableWithoutFeedback ??

Answer 1

You can do this

<KeyboardAvoidingView behavior="padding">
    <ScrollView keyboardShouldPersistTaps="handled">
    // Rest of your code
    </ScrollView
</KeyboardAvoidingView>

Answer 2

HOC is the best approach imo

import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';

const DismissKeyboardHOC = (Comp) => {
  return ({ children, ...props }) => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <Comp {...props}>
        {children}
      </Comp>
    </TouchableWithoutFeedback>
  );
};
export const DismissKeyboardView = DismissKeyboardHOC(View)