회원가입 폼을 만들면서 비밀번호 부분을 작성해야 했었는데, 기본적으로 다뤄지는 secureTextEntry={true}를 작성하니까 글씨가 안보이기는 하는데 배경이 하얀색이라 진짜 안보임 + 눈 아이콘 클릭하면 보이도록 만들고 싶었다. 그래서 도전해보았다!
https://algoroot.tistory.com/124

폰트 충돌

TextInput 컴포넌트 안에 secureTextEntry를 true로 설정해줬는데, 전에 textInput에 적용해놓았던 커스텀 폰트때문에 글자를 입력해도 .이나*이 뜨지 않았다... 이유가 무엇인지 한참 찾다가 결국 지피티에게 물어보니 폰트가 이를 지원하지 않아서 그런거라고 했다!!! 그래서 폰트를 잠시 주석처리했더니 해결되었당...^^

그래서 비밀번호 칠 때만은 그냥 기본 폰트로 하기로 했다! 어쩔 수 없지 모...

일단 해결~

눈 아이콘

비밀번호를 치고 비밀번호가 맞는지 아닌지 긴가민가할 때 꼭 필요한 기능인 "눈 아이콘"을 기존 TextInput 옆에 넣기 위한 코드를 작성했다.

방법은 아래 블로그를 참고했다!
https://velog.io/@cmaw/React-%EB%B9%84%EB%B0%80%EB%B2%88%ED%98%B8-%EB%B3%B4%EC%9E%84%EC%88%A8%EA%B9%80-%EA%B8%B0%EB%8A%A5-useState

먼저, 눈 아이콘의 활성화 및 비활성화를 위한 변수를 만들었다. 처음에는 보안이 활성화되어야하니까 디폴트 값으로 true를 작성해주었다.

const [seePassword, setSeePassword] = useState(true);

그리고 이 변수를 다루는 핸들러 함수를 만들어준다.

const seePasswordHandler = () => {
        setSeePassword(!seePassword);
    };

이 함수가 발동되면 변수가 반대값으로 전환된다. 눈 아이콘을 누를 때마다 전환되도록 했다.

그리고 아이콘을 추가하기 위해 찾아보다가 expo를 위한 아이콘 사이트가 존재한다는 것을 알았다.
https://icons.expo.fyi/Index
여기에서 원하는 아이콘 검색해서 나와있는 라이브러리 import하고 나와있는 방법으로 사용하면 된다! 나는 eye를 검색해서 나온 두 가지 아이콘을 사용했다.

그런데 textInput 바로 옆에 아이콘이 떴으면 했는데, 바로 아래 뜨길래 새로운 View를 하나 만들어주었다. 그리고 borderBottom도 다 합쳐서 떴으면 해서 이 view에 속성을 추가해주었다.

<View style={{
                            flexDirection: "row",
                            borderBottomColor: borderBottomColor,
                            borderBottomWidth: 1,
                            width: '100%',
                            height: '70%',
                            backgroundColor: 'white',
                            alignItems: 'center',
                        }}>
                            <TextInput
                                style={[styles.textInput, { width: '90%', borderBottomWidth: 0,}]}
                                value={password}
                                secureTextEntry={seePassword}                               
                                placeholder="비밀번호를 입력해주세요"
                                onChangeText={(value) => setPassword(value)}
                                onFocus={() => setBorderBottomColor('#71de83')}
                                onEndEditing={() => setBorderBottomColor('lightgray')}
                            />
                            {seePassword ? (
                                <TouchableOpacity onPress={seePasswordHandler}>
                                    <Feather name="eye" size={24} color="gray" style={{ marginLeft: 5 }} />
                                </TouchableOpacity>
                            ) : (
                                <TouchableOpacity onPress={seePasswordHandler}>
                                    <Feather name="eye-off" size={24} color="gray" style={{ marginLeft: 5 }} />
                                </TouchableOpacity>
                            )}
                        </View>

이런식으로 textInput과 아이콘을 묶어 view를 만들어주면 다음과 같이 출력된다.

보안이 활성화되었을 때

보안이 비활성화됐을 때

정리

secureTextEntry 속성이 존재할 때, 폰트를 적용할 수 없다는 점이 좀 거슬린다! 나중에 코드 다듬을 때 다시 한 번 찾아보고 적용해봐야겠다.