[React Native] Dismiss the Keyboard in React Native

admin2024-10-07 55

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({
 : {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#2374AB',
  },
  input: {
    width: '80%',
    paddingVertical: 10,
    paddingHorizontal: 5,
    borderRadius: 3,
    backgroundColor: '#ffffff70',
    marginVertical: 5,
  },
});

export default App;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明原文出处。如若内容造成侵权/违法违规/事实不符，请联系SD编程学习网：675289112@qq.com进行投诉反馈，一经查实，立即删除！

[React Native] Dismiss the Keyboard in React Native

ide

react native