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.

did you try http://stackoverflow.com/questions/29685421/react-native-hide-keyboard/39772206#39772206 ? — vinayr, Mar 08 '17 at 13:57
Does this answer your question? [Hide keyboard in react-native](https://stackoverflow.com/questions/29685421/hide-keyboard-in-react-native) — Bhavin Parghi, May 11 '23 at 13:47

score 2 · Answer 1 · answered Sep 12 '17 at 07:28

2

This helped me:

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss();

answered Sep 12 '17 at 07:28

Aishwarya

987
3
10
26

score 1 · Answer 2 · answered Jul 21 '17 at 06:11

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>

score 0 · Answer 3 · answered Jul 05 '22 at 08:13

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

Keyboard Hiding in react-native

3 Answers3