How to get the value in TextInput when onBlur is called with React Native?

Sometimes, we want to get the value in TextInput when onBlur is called with React Native.

In this article, we’ll look at how to get the value in TextInput when onBlur is called with React Native.

How to get the value in TextInput when onBlur is called with React Native?

To get the value in TextInput when onBlur is called with React Native, we can get the value from the onEndEditing callback.

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';

export default function App() {
  return (
    <View style={{ padding: 30 }}>
      <TextInput
        onEndEditing={(e) => console.log(e.nativeEvent.text)}
        placeholder="Name"
      />
    </View>
  );
}

to set onEndEditing to (e) => console.log(e.nativeEvent.text) after we press enter.

Conclusion

To get the value in TextInput when onBlur is called with React Native, we can get the value from the onEndEditing callback.