Textinput .blur() when pressing Icon

Question

when pressing an Icon, I want the TextInput to lose focus. I found this: Unfocus a TextInput in React Native and tried everything, but its just not working. Like this I get the error:

Undefined is not an object (evaluating '_this.myInput.blur')

My Code:

<TextInputCustom
  ref={(ref) => { this.myInput= ref }}
 iconType={
          Platform.OS === "android" ? 
         isSearchbarFocused? 'chevron-left' : 
           'search'
          :'search'}
 iconPress= {() => { Platform.OS === "android" && isSearchbarFocused ?(setSearchbarFocused(false), this.myInput.blur()):(console.log("Hi")}}
/>

My TextInputCustom is looking like this:

const TextInputCustom = ({
  iconType,
  placeholder,
  onChange,
  onFocus,
  textContentType,
  autoCapitalize,
  autoCompleteType,
  iconPress,
  ref
}) => {
  return (
    <View style={styles.inputView}>
      <Icon name={iconType} onPress={iconPress} size={20}    
      />
      <TextInput
        style={{
          flex: 1,
          paddingHorizontal: 12,
        }}
        placeholder={placeholder}
        textContentType={textContentType}
        autoCapitalize={autoCapitalize}
        autoCompleteType={autoCompleteType}
        autoCorrect={false}
        onChangeText={(e) => onChange(e)}
        onFocus={onFocus}
      />
    </View>
  );
};

Or is the mistake, that Im using a custom element, so I cant use .blur like this? What am I doing wrong, and how can I do this?

Answer 1

Example with createRef, you can try here online https://snack.expo.io/@vasylnahuliak/6c94c6

import React, { Component, createRef } from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  TextInput,
  StyleSheet,
} from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);

     this.textInputRef = createRef();

  }

  handleIconPress = () => {
    this.textInputRef.current.blur();
  };


  render() {
    return (
      <View style={styles.root} >
        <TextInputCustom
          textInputRef={this.textInputRef}
          onIconPress={this.handleIconPress}
        />
      </View>
    );
  }
}

const TextInputCustom = ({ onChange, onIconPress, textInputRef }) => {
  return (
    <View style={styles.inputContainer}>
      <TouchableOpacity style={styles.icon} onPress={onIconPress}>
        <Text style={styles.emoji}>👁️</Text>
      </TouchableOpacity>
      <TextInput
        style={styles.input}
        onChangeText={onChange}
        ref={textInputRef}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    paddingVertical: 48,
  },
  emoji: {
    fontSize: 40,
  },
  inputContainer: {
    flexDirection: 'row',
  },
  input: {
    flex: 1,
    marginLeft: 16,
    borderColor: 'black',
    borderWidth: 1,
  },
});

export default App;