Sometimes, we want to check when the focus is lost in a React Native TextInput.

In this article, we’ll look at how to check when the focus is lost in a React Native TextInput.

How to check when the focus is lost in a React Native TextInput?

To check when the focus is lost in a React Native TextInput, we can set the onBlur prop to a function that runs when focus is lost.

For instance, we write:

import * as React from 'react';
import { TextInput, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
import { Icon } from 'react-native-elements';

export default function App() {
  return (
    <View>
      <TextInput onBlur={() => console.log('focus lost')} placeholder="Name" />
    </View>
  );
}

to set the onBlur prop to a function that logs 'focus lost' when we move focus away from the text input.

Conclusion

To check when the focus is lost in a React Native TextInput, we can set the onBlur prop to a function that runs when focus is lost.