How lose focus of TextFiled when tapped on a button?

Question

I have a TextInput and TouchableOpacity inside ScrollView like follows,

<ScrollView keyboardShouldPersistTaps={'handled'}>
     <TextInput
        placeholder='Text'
        value={this.state.value}
        onChangeText={value => this.setState({ value })}
        onBlur={() => console.log('TextInput lost it's focus)}
     />
     <TouchableOpacity onPress={() => console.log('This Onpress action opens a modal')}>
         <Text>Tap Here</Text>
     </TouchableOpacity>
</ScrollView>

After typing data in TextInput If I tap on TouchableOpacity then Modal opens as per login(Which I didn't mention here). After closing the Modal , Still the TextInput is in focus.

But I want the TextInput to lose focus as soon as I tapped on TouchableOpacity . onBlur function is getting called if I tap any where else other than ToucahbleOpacity .

How can I make TextField lose focus when tapped on TouchableOpacity ?

Note: I cannot use references since I am using Redux Form where there are number of fields other than mentioned above and these fields may vary screen to screen dynamically.

Answer 1

You could add a ref="input" on TextInput and call this.refs.input.blur() when you click TouchableOpacity . Something like:

<ScrollView keyboardShouldPersistTaps={'handled'}>
     <TextInput
        ref="input"
        placeholder='Text'
        value={this.state.value}
        onChangeText={value => this.setState({ value })}
        onBlur={() => console.log('TextInput lost it's focus)}
     />
     <TouchableOpacity onPress={() => {
         this.refs.input.blur(); //<-- here blur the TextInput
         console.log('This Onpress action opens a modal');
     }}>
         <Text>Tap Here</Text>
     </TouchableOpacity>
</ScrollView>

EDIT: In case you are using Redux Form you have to use a callback function in ref and then call ReactDOM.findDOMNode to get the TextInput .Something like:

<ScrollView keyboardShouldPersistTaps={'handled'}>
     <TextInput
        ref={(input) => { this.input = input; }}
        placeholder='Text'
        value={this.state.value}
        onChangeText={value => this.setState({ value })}
        onBlur={() => console.log('TextInput lost it's focus)}
     />
     <TouchableOpacity onPress={() => {
         ReactDOM.findDOMNode(this.input).blur(); //<-- here blur the TextInput
         console.log('This Onpress action opens a modal');
     }}>
         <Text>Tap Here</Text>
     </TouchableOpacity>
</ScrollView>

Answer 2

I assume you are using functional component so you can achieve this by taking a ref and by using useRef hook.

Example

const componentName = ({ params }) => {
  const textInputRef = useRef(); // initialising ref hook

  return (
    <ScrollView keyboardShouldPersistTaps={'handled'}>
      <TextInput
        ref={textInputRef} // passing ref to textinput
        placeholder="Text"
        value={this.state.value}
        onChangeText={value => this.setState({ value })}
      />
      <TouchableOpacity
        onPress={() => {
          textInputRef.current.blur(); //<-- by taking ref calling blur function of textinput.
          console.log('This Onpress action opens a modal');
        }}
      >
        <Text>Tap Here</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};