Sometimes, we want to unfocus a TextInput in React Native.

In this article, we’ll look at how to unfocus a TextInput in React Native.

How to unfocus a TextInput in React Native?

To unfocus a TextInput in React Native, we can use the Keyboard.dismiss method.

For instance, we write:

import * as React from 'react';
import { View, Keyboard, TextInput } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={{ flex: 1, padding: 30 }}>
      <TextInput onSubmitEditing={Keyboard.dismiss} placeholder="Name" />
    </View>
  );
}

to set the onSubmitEditing prop to Keyboard.dismiss.

As a result, when we press enter when we’re focus on the text input, the focus will move away from the text input.

Conclusion

To unfocus a TextInput in React Native, we can use the Keyboard.dismiss method.