React Native: TextInput Focus시 Border 색상 변경하기

react 웹개발할땐 스타일에 :focus {}를 주면 쉽게 할 수 있었다.

react native에서는 :focus가 전혀 먹히지 않아서 다른 방법으로 기능을 구현했다.

onFocus, onBlur를 활용하니 문제를 해결할 수 있었다.

 

onFocus는 포커스가 되어있을때,

onBlur는 포커스가 아닐때

 

export default function InputBasic(props) {
  const [isFocus, setIsFocus] = useState(false);

  function onFocusInput() {
    setIsFocus(true);
  }

  function onBlurInput() {
    setIsFocus(false);
  }

  return (
    <View style={isFocus ? styles.textInputFocused : styles.textInput}> )