CODEWITHSUNDEEP
react-nativeonblur
dishate
dishate

Reputation: 14

how can i operate onBlur event in react-native?

I'm trying to develop a search app using expo react-natvie.

<TextInput
  placeholder="placeholder"
  onBlur={() => console.log('blur')}
  onFocus={() => console.log('focus')}
/>

in this code, onFocus is working. but, onBlur is not working.

i think "i clicked other text, so onBlur event will work" but, still focus.

how can i operate onBlur event?

i add my code

import { View, TextInput, TouchableOpacity } from 'react-native';

const App = () => {
  return (
    <View style={{ borderWidth: 1, height: 1000, backgroundColor: 'gray' }}>
      <TextInput
        onBlur={() => console.log('blur1')}
        onEndEditing={() => console.log('blur2')}
        onFocus={() => console.log('focus')}
        style={{ marginTop: 40, borderWidth: 1 }}
      />
      <TouchableOpacity style={{ height: 600 }} onPress={() => console.log('press')} />
    </View>
  );
};

export default App;

first, i clicked textinput. the onFocus event is work. second, i clicked out. TouchableOpacity onPress event is work, but Textinput onBlur is not work...

Upvotes: -1

Views: 1153

Answers (1)

Mohamed Elgazar
Mohamed Elgazar

Reputation: 794

You can try using the onEndEditing prop on the TextInput component.

<TextInput
  placeholder="placeholder"
  onEndEditing={() => console.log('blur')}
  onFocus={() => console.log('focus')}
/>

Upvotes: 2

Related Questions