Issue in onBlur event of TextInput in react-native - react-native

Question

I want to do some task on press of "Do Some Work" button but after calling of onBlur event of any of the focused TextInput.
Here is my sample code:-
'use strict';
var React = require('react-native');
var {AppRegistry,View,Text,ScrollView,TextInput,TouchableOpacity} = React;
var MyApp = React.createClass({
doSomeWork: function () {
console.log("doSomeWork called....");
},
render: function () {
return (
<View>
<TouchableOpacity style={{padding:10,alignItems:"center",backgroundColor:"blue"}}
onPress={this.doSomeWork}>
<Text>Do Some Work</Text>
</TouchableOpacity>
<View style={{height:400}}>
<ScrollView keyboardShouldPersistTaps={true}>
<View>
<TextInput ref="first" onBlur={()=>{console.log("TextInput 1 blurred....")}}/>
</View>
<View>
<TextInput ref="second" onBlur={()=>{console.log("TextInput 2 blurred....")}}/>
</View>
<View>
<TextInput ref="third" onBlur={()=>{console.log("TextInput 3 blurred....")}}/>
</View>
</ScrollView>
</View>
</View>
);
}
});
AppRegistry.registerComponent('nativeApp', () => MyApp);
I have tried to call
this.refs.first.blur()
manually, but that is in async and i don't know TextInput's event has called or not.
Any help will be appreciated.

Answer 1

work for me
import React, { useState } from 'react';
import { TextInput } from 'react-native';
const MyTextInput = () => {
const [value, setValue] = useState('');
const handleBlur = () => {
console.log('Input lost focus');
}
return (
<TextInput
value={value}
onChangeText={setValue}
onBlur={handleBlur}
/>
);
}