더북(TheBook)

지금은 비밀번호 인풋에 비밀번호를 입력하면 화면에 그대로 노출되는데, 입력한 비밀번호를 화면에서 숨기려면 secureTextEntry라는 Props를 활성화해야 합니다. 그리고 이메일 인풋에서 이메일을 더 편하게 입력할 수 있도록 첫 번째 문자 자동 대문자, 자동 수정을 비활성화하고, 이메일 자동 완성과 이메일 전용 키보드를 활성화하겠습니다.

screens/SignInScreen.js - BorderedInput

<BorderedInput
  hasMarginBottom
  placeholder="이메일"
  value={form.email}
  onChangeText={createChangeTextHandler('email')}
  autoCapitalize="none"
  autoCorrect={false}
  autoCompleteType="email"
  keyboardType="email-address"
/>
<BorderedInput
  placeholder="비밀번호"
  hasMarginBottom={isSignUp}
  value={form.password}
  onChangeText={createChangeTextHandler('password')}
  secureTextEntry
/>
{isSignUp && (
  <BorderedInput
    placeholder="비밀번호 확인"
    value={form.confirmPassword}
    onChangeText={createChangeTextHandler('confirmPassword')}
    secureTextEntry
  />
)}

설정이 잘 적용됐다면 비밀번호를 입력할 때 텍스트가 마스킹되어 점으로 나타나고, 이메일을 입력할 때 키보드에서 @가 특수문자를 선택하지 않아도 보입니다. 추가로 iOS에서 자동 수정 및 첫 글자 대문자 기능이 비활성화됩니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.