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.

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"
  }
});