CODEWITHSUNDEEP
javascriptreactjsreact-nativekeyboardtouchableopacity
another_CS_guy
another_CS_guy

Reputation: 682

Dismissing Keyboard in React Native

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 ??

Upvotes: 2

Views: 11077

Answers (4)

Razz Sawhoney
Razz Sawhoney

Reputation: 29

This one works out of the box for me.

import { KeyboardAvoidingView, ScrollView } from "react-native";

const KeyboardDismissibleView = ({ backgroundColor = "#F5F4FF", children }) => {
    return <KeyboardAvoidingView behavior="height" style={{ flex: 1, paddingHorizontal: 10, backgroundColor }}>
        <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }} keyboardDismissMode="interactive">
            {children}
        </ScrollView>
    </KeyboardAvoidingView>
}

export default KeyboardDismissibleView;

Upvotes: 0

Aakshaye
Aakshaye

Reputation: 399

For someone like me who wants to hide the keyboard on click of a FlatList, you have to use the keyboardShouldPersistTaps prop as follows:

<FlatList
   data
   ...otherProps
   keyboardShouldPersistTaps="always"
/>

Upvotes: -1

johnob3
johnob3

Reputation: 11

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)

Upvotes: -1

mainak
mainak

Reputation: 2311

You can do this

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

Upvotes: 0

Related Questions