Keyboard Hiding in react-native

Question

I just followed the answer from the link react-native: hide keyboard

But the keyboard is coming as flash for fraction of seconds then it is dismissing. Is there is a way to avoid keyboard totally.

• vinayr: did you try stackoverflow.com/questions/29685421/react-native-hide-keyboard/… ?
• Bhavin Parghi: Does this answer your question? Hide keyboard in react-native

Answer 1

This helped me:

import { Keyboard } from 'react-native'
// Hide that keyboard!
Keyboard.dismiss();

Answer 2

Correct way is to dismiss View with TouchableWithoutFeedback and calling Keyboard.dismiss()

import {Keyboard} from 'react-native'
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
 <View style={styles.container}>
 <TextInput keyboardType='numeric'/>
 </View>
</TouchableWithoutFeedback>

Answer 3

You can use Keyboard.dismiss() for keyboard hide.

import React from "react";
import {
 Keyboard,
 StyleSheet,
 View,
 TextInput,
 TouchableOpacity
} from "react-native";
export default function App() {
 return (
 <TouchableOpacity onPress={() => Keyboard.dismiss()}>
 <View style={styles.MainContainer}>
 <TextInput
 style={styles.textinput}
 placeholder="Enter Your Name"
 />
 </View>
 </TouchableOpacity>
 );
}
const styles = StyleSheet.create({
 MainContainer: {
 flex: 1,
 justifyContent: "center",
 alignItems: "center"
 },
 text: {
 fontSize: 28,
 textAlign: "center"
 },
 textinput: {
 paddingVertical: 12,
 margin: 8,
 borderRadius: 7,
 backgroundColor: "#F9FBE7",
 borderWidth: 2,
 borderColor: "#000000",
 textAlign: "center"
 }
});