[React Native] Dismiss the Keyboard in React Native

In this lesson you will learn how create a re-usable component that gives the user the ability to dismiss the keyboard whenever they tap outside of a TextInput. To accomplish this we'll take a look at the TouchableWithoutFeedback component and the Keyboard API.

 

The whole idea for dismiss keyboard is calling:

Keyboard.dismiss()

So build a High-Order-component, which wraps the actually inputs element, when click happens outside the inputs, close the keyboard.

 

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

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

const App = () => (
  <DismissKeyboard>
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="email"
        keyboardType="numeric"
      />
      <TextInput
        style={styles.input}
        placeholder="password"
      />
    </View>
  </DismissKeyboard>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#2374AB',
  },
  input: {
    width: '80%',
    paddingVertical: 10,
    paddingHorizontal: 5,
    borderRadius: 3,
    backgroundColor: '#ffffff70',
    marginVertical: 5,
  },
});

export default App;