title: react native TextInput border when press
body: <p>i need to create border green on TextInput when it get selected/pressed
  it mean
  the TextInput should be with black border / none border for default
  and when its pressed (the input) it will set border with green color
  the issuse is : i create state and change it by &quot;onFocus&quot; when the input will press it will change to green
  but i have a 4  inputs and when i press on each of them it will set the border to green but i want only one of them each time will set the border
  so i add &quot;onBlur&quot; that will disable the border
  and its look like the wrong way (its worked but still look like the wrong way)
  please show me the right way</p>
  <pre><code>
  import { StyleSheet, TextInput } from &quot;react-native&quot;;
  import React, { useState } from &quot;react&quot;;
  
  const Input = ({ placeholder, keyPad, onChangeText, stylesProps }) =&gt; {
    const [isFocus, setIsFocus] = useState(null);
    const focusHandler = () =&gt; {
      setIsFocus(&quot;green&quot;);
    };
    const blurHandler = () =&gt; {
      setIsFocus(null);
    };
    return (
      &lt;TextInput
        style={[{ borderWidth: isFocus ? 2 : 0, borderColor: isFocus }, stylesProps ? stylesProps : styles.sign_up_inp]}
        placeholder={placeholder}
        onFocus={focusHandler}
        onBlur={blurHandler}
        keyboardType={keyPad}
        onChangeText={onChangeText}
      /&gt;
    );
  };
  
  export default Input;
  </code></pre>