close

how can i dismiss the on screen keyboard?

Making structure and taking care of client association can be effortlessly dealt with in iOS and Android utilizing Gesture Handlers or utilizing a Library like IQKeyboardManager, But in the realm of React Native its little unique, As we don’t have such library there and we additionally dont have InBuilt usefulness for that.

However, we can deal with this gracefully..🤗

At the point when I used to build up an iOS application in Swift, I generally utilized IQKeyboardManager library to deal with the console occasions, we complete catch in AccessoryView to excuse the console yet when I began creating application in React Native I came to realize that to have a similar usefulness in React Native we need to do some additional code, and I figured it will be assistance for others to have this, that is the entire reason for composing this article.

So lets get started..🤘😎🤘

furthermore, finish the execution in 3 little steps..😎

Stage 1: Get Keyboard, TouchableWithoutFeedback from ‘respond local’;

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

Stage 2: Create a bolt capacity to compose excuse console code

const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback 
onPress={() => Keyboard.dismiss()}> {children}
</TouchableWithoutFeedback>
);

Step 3: Wrap all TextInput inside <DismissKeyboard> </DismissKeyboard>

//Example
<DismissKeyboard>
  <View style={styles.container}>
   <TextInput style={styles.input} placeholder="email" />
   <TextInput style={styles.input} placeholder="password" />
  </View>
</DismissKeyboard>

Thats it..🤗
Thanks for reading..🙏

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment