React Native TextInput

input이 굉장히 굉장히 많은 페이지 작업을 진행 중인 관계로...
공식 문서의 TextInput를 보며 유용한 기능들을 정리해보자!

Props

onChange

TextInput의 text가 변경될 때 호출되는 콜백 함수.

( { nativeEvent: { eventCount, target, text} }) => void

onChangeText

onChange와 마찬가지로, TextInput의 text가 변경될 때 호출되는 콜백 함수.
onChange와의 차이점은?

<TextInput
	onChangeText={(text) => console.log(text)}
/>

// 입력한 text

콜백 함수의 argument로 → 입력한 단일 string이 넘어간다!

autoFocus

default는 false.
true시 componentDidMount or useEffect시 input에 포커스!
inputRef.current.focus()를 해줄 필요가 없었다...

editable

default true.
false시 텍스트를 편집할 수 없다!

이런 기능이 왜 필요...한거지?
→ input과 동일한 UI를 가지는데, input이 아닌 버튼의 역할을 수행한다거나 하는 상황에서 쓸 수 있겠다.
(실제로 발생하기도 했다. 하하!)

keyboardType

어떤 키보드가 open 될지 지정!
해당 props를 통해 가격, 전화번호 등의 유효성 검사에서 (조금) 자유로워 질 수 있다.

default
number-pad
decimal-pad
numeric
email-address
phone-pad
url

/// iOS Only
ascii-capable
numbers-and-punctuation
name-phone-pad
twitter
web-search


/// Android Only
visible-password

maxFontSizeMultiplier

allowFontScaling이 true시(기본값), 가능한 최대 scale을 지정!

• null/undefined (default): 부모 node or global default(0)를 상속
• 0: 최대 제한X, 부모/global default를 무시
• more than 1: 해당 값으로 최대 scale 지정

글꼴/화면크기 확대 시 글자가 지나치게 커져서 input을 삐져나올 때가 있는데... 이를 방지할 수 있겠다!

multiline

true시 multiline이 가능하다.
이 때 주의점!!!
→ 텍스트가 iOS에서는 상단, Android에서는 중앙에 정렬된다!
공식문서에서는 textAlignVertical: top을 통한 플랫폼 대응을 권고한다.

현재 앱에서는 multiline + height에 여유가 있는 입력창의 형태라...
바깥쪽 wrapper의 alignItems를 flex-start로 준 상태에서 height를 지정한 후,
textAlignVertical을 top으로 줘 해당 UI를 구현했던 기억이!

onPressIn

터치가 관여될 때 호출되는 콜백.

({ nativeEvent: PressEvent }) => void

input 접근 횟수 등을 측정할 때 사용할 수 있겠다!

onPressOut

터치 종료 시 호출되는 콜백

({ nativeEvent: PressEvent }) => void

returnKeyType

return key의 모양을 결정한다.
웹의 input의 enterkeyhint 속성과 유사한 기능!

// common
done
go
next
search
send

// IOS
default
emergency-call
google
join
route
yahoo

// android
none
previous

secureTextEntry

입력된 텍스트를 가린다!
→ 암호와 같은 민감한 텍스트 제어 시 사용할 수 있겠다.
단 multiline={true}에서는 동작 X