React Native Dynamically Hide Soft Keyboard on Button Click iOS Android

Soft keypad is basic input medium in both android and iOS devices, because without its we cannot submit any input in android and iOS devices. The Soft keyboard will automatically show when user selects the TextInput component and hide after pressing the enter button on Keypad. But sometimes developer needs to Manually Hide Soft Keyboard on button click or Image click to show another window on screen, Just like we have seen in Whats-app and Hike and other social chatting apps. So in this tutorial we would going to Manually Dynamically Hide Soft Keyboard on Button Click in iOS Android react native applications using Keyboard.dismiss() method.

We are using the Keyboard.dismiss() method to hide the Soft keypad from phone’s screen.

Contents in this project Dynamically Hide Soft Keyboard on Button Click in iOS Android App:

1. Import StyleSheet, View, Platform, Keyboard, TextInput, TouchableOpacity and Text component in your project’s class.

2. Create a function named as Hide_Soft_Keyboard() in your class, Inside this function we would call the Keyboard.dismiss() method. We would call this function on Button onPress event.

3. Create a Root View in render’s return block.

4. Create a Button in root view using TouchableOpacity component, we would call the Hide_Soft_Keyboard() function on its onPress event. After that we would make a TextInput component.

5. Creating Style.

6. Complete source code for App.js File :

Screenshot in Android device:

Dynamically Hide Soft Keyboard

Screenshot in iOS device:

4 Comments

  1. You read my mind with these tutorials, i needed this one particulary, thanks.

    • Welcome bro 🙂 . You can also suggest me some tutorials .

      • well, since you asked me. I was wondering when are you gonna make something with google maps. Like a get Latitute and Longitude based on a textInput Search, then place the result into two textInput, i personally would like it. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *