title: React Native: onFocus and onBlur for custom inputs
body: <p>in my react native project I`ve created a custom input component, let's call it &quot;CustomInput&quot;. This just returns a standard .</p>
  <pre class="lang-js prettyprint-override"><code>const CustomInput = (props) =&gt; {
    return (
      &lt;TextInput
        style={{
          backgroundColor: &quot;white&quot;,
          padding: 10,
          borderWidth: 1,
          borderColor: &quot;#eee&quot;,
          borderRadius: 2,
          marginBottom: 12,
        }}
        placeholder={props.placeholder}
        value={props.value}
      &gt;&lt;/TextInput&gt;
    );
  };
  </code></pre>
  <p>I want to call it in a parent component, like:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;CustomInput
    placeholder=&quot;Family Name&quot;
    value={this.state.familyName}
    onChangeText={(text) =&gt; this.setState({ familyName: text })}
  /&gt;;
  </code></pre>
  <p>How can I dynamically use the onFocus() and onBlur() method to highlight them when the user-focused it?</p>
  <p>If I don't use a custom input I can do it like that:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;TextInput
    ref={(input) =&gt; {
      this.inputFullName = input;
    }}
    style={styles.loginTextInput}
    placeholder=&quot;Fullname&quot;
    value={this.state.fullName}
    onChangeText={(text) =&gt; this.setState({ fullName: text })}
    onFocus={() =&gt; this.focusedInput(this.inputFullName)}
    onBlur={() =&gt; this.blurInput(this.inputFullName)}
  /&gt;;
  
  focusedInput = (inputField) =&gt; {
    inputField.setNativeProps({
      style: { borderColor: &quot;#4094ec&quot; },
    });
  };
  </code></pre>