Skip to main content

앱에 텍스트를 입력할 수 있는 기본 컴포넌트로, 키보드를 통해 사용자 입력을 받는다. 여러 기능을 설정할 수 있는 props를 제공하며, 자동 수정, 자동 대문자 변환, 플레이스홀더 텍스트, 숫자 키패드 등 다양한 키보드 타입을 지원한다.

가장 기본적인 사용법은 TextInput을 배치하고 onChangeText 이벤트를 구독해 사용자 입력을 읽는 것이다. onSubmitEditingonFocus 같은 다른 이벤트도 구독할 수 있다. 간단한 예제는 다음과 같다:

네이티브 엘리먼트를 통해 .focus().blur() 메서드를 사용해 프로그래밍 방식으로 TextInput에 포커스를 주거나 해제할 수 있다.

일부 props는 multiline={true/false}일 때만 사용 가능하다. 또한 borderBottomColor, borderLeftWidth처럼 엘리먼트의 한쪽 면에만 적용되는 스타일은 multiline=true일 때 적용되지 않는다. 같은 효과를 내려면 TextInputView로 감싸면 된다:

TextInput은 기본적으로 뷰 하단에 테두리가 있다. 이 테두리의 패딩은 시스템이 제공한 배경 이미지에 의해 설정되며 변경할 수 없다. 이를 피하려면 높이를 명시적으로 설정하지 않아 시스템이 테두리를 올바른 위치에 표시하도록 하거나, underlineColorAndroid를 투명으로 설정해 테두리를 표시하지 않으면 된다.

안드로이드에서는 입력란에서 텍스트를 선택할 때 앱의 windowSoftInputMode 매개변수가 adjustResize로 변경될 수 있다. 이로 인해 키보드가 활성화된 동안 position: 'absolute'인 컴포넌트에 문제가 발생할 수 있다. 이 동작을 피하려면 AndroidManifest.xml에서 windowSoftInputMode를 지정하거나 네이티브 코드로 이 매개변수를 프로그래밍 방식으로 제어하면 된다.

참조

Props

View Props

View Props를 상속한다.

allowFontScaling

폰트가 접근성 설정 중 텍스트 크기 설정을 반영해 크기를 조정할지 여부를 지정한다. 기본값은 true이다.

타입
bool

autoCapitalize

TextInput에 특정 문자를 자동으로 대문자로 변환하도록 지시한다. 이 속성은 name-phone-pad와 같은 일부 키보드 타입에서는 지원되지 않는다.

  • characters: 모든 문자를 대문자로 변환한다.
  • words: 각 단어의 첫 글자를 대문자로 변환한다.
  • sentences: 각 문장의 첫 글자를 대문자로 변환한다 (기본값).
  • none: 자동 대문자 변환을 사용하지 않는다.
타입
enum('none', 'sentences', 'words', 'characters')

autoComplete

시스템에 자동 완성 힌트를 제공해 자동 채우기를 활성화한다. 안드로이드에서는 시스템이 콘텐츠 타입을 식별하기 위해 휴리스틱을 사용해 자동 채우기를 시도한다. 자동 완성을 비활성화하려면 autoCompleteoff로 설정한다.

다음 값들은 플랫폼 간에 동작한다:

  • additional-name
  • address-line1
  • address-line2
  • birthdate-day (iOS 17+)
  • birthdate-full (iOS 17+)
  • birthdate-month (iOS 17+)
  • birthdate-year (iOS 17+)
  • cc-csc (iOS 17+)
  • cc-exp (iOS 17+)
  • cc-exp-day (iOS 17+)
  • cc-exp-month (iOS 17+)
  • cc-exp-year (iOS 17+)
  • cc-number
  • country
  • current-password
  • email
  • family-name
  • given-name
  • honorific-prefix
  • honorific-suffix
  • name
  • new-password
  • off
  • one-time-code
  • postal-code
  • street-address
  • tel
  • username
iOS

다음 값들은 iOS에서만 동작한다:

  • cc-family-name (iOS 17+)
  • cc-given-name (iOS 17+)
  • cc-middle-name (iOS 17+)
  • cc-name (iOS 17+)
  • cc-type (iOS 17+)
  • nickname
  • organization
  • organization-title
  • url
Android

다음 값들은 안드로이드에서만 동작한다:

  • gender
  • name-family
  • name-given
  • name-middle
  • name-middle-initial
  • name-prefix
  • name-suffix
  • password
  • password-new
  • postal-address
  • postal-address-country
  • postal-address-extended
  • postal-address-extended-postal-code
  • postal-address-locality
  • postal-address-region
  • sms-otp
  • tel-country-code
  • tel-device
  • tel-national
  • username-new
Type
enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new')

autoCorrectfalse로 설정되면 자동 수정 기능이 비활성화된다. 기본값은 true이다.

타입
bool

autoFocus

true로 설정하면 입력 필드에 자동으로 포커스가 맞춰진다. 기본값은 false이다.

타입
bool

blurOnSubmit

사용 중단됨. submitBehaviorblurOnSubmit을 대체하며, blurOnSubmit에 정의된 모든 동작을 무시한다. 자세한 내용은 submitBehavior를 참고한다.

true로 설정하면, 입력 필드가 제출될 때 포커스가 해제된다. 기본값은 단일 행 필드에서는 true, 여러 행 필드에서는 false다. 여러 행 필드에서 blurOnSubmittrue로 설정하면, 엔터 키를 눌렀을 때 새로운 줄을 삽입하는 대신 필드의 포커스가 해제되고 onSubmitEditing 이벤트가 발생한다.

타입
bool

caretHidden

이 값을 true로 설정하면 커서가 숨겨진다. 기본값은 false이다.

타입
bool

clearButtonMode
iOS

텍스트 뷰의 오른쪽에 지우기 버튼이 언제 나타날지 설정한다. 이 속성은 단일 라인 TextInput 컴포넌트에서만 지원된다. 기본값은 never이다.

타입
enum('never', 'while-editing', 'unless-editing', 'always')

clearTextOnFocus
iOS

true로 설정하면 편집이 시작될 때 텍스트 필드의 내용이 자동으로 지워진다.

타입
bool

contextMenuHidden

이 값이 true로 설정되면 컨텍스트 메뉴가 숨겨진다. 기본값은 false이다.

타입
bool

dataDetectorTypes
iOS

텍스트 입력에서 클릭 가능한 URL로 변환할 데이터 타입을 지정한다. 이 옵션은 multiline={true}이고 editable={false}일 때만 유효하다. 기본적으로 어떤 데이터 타입도 감지하지 않는다.

하나의 타입을 지정하거나 여러 타입을 배열로 제공할 수 있다.

dataDetectorTypes에 사용 가능한 값은 다음과 같다:

  • 'phoneNumber'
  • 'link'
  • 'address'
  • 'calendarEvent'
  • 'none'
  • 'all'
타입
enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')

defaultValue

사용자가 입력을 시작하기 전에 초기값을 제공한다. 이벤트를 감지하고 제어 상태를 동기화하기 위해 값 프로퍼티를 업데이트하는 작업을 처리하고 싶지 않은 경우에 유용하다.

타입
string

cursorColor
Android

이 속성을 제공하면 컴포넌트 내 커서(또는 "캐럿")의 색상을 설정한다. selectionColor의 동작과 달리, 커서 색상은 텍스트 선택 박스의 색상과 독립적으로 설정된다.

타입
color

disableFullscreenUI
Android

false로 설정하면, 텍스트 입력 주변에 사용 가능한 공간이 적을 때(예: 휴대폰의 가로 모드), 운영체제가 전체 화면 텍스트 입력 모드에서 사용자가 텍스트를 편집하도록 선택할 수 있다. true로 설정하면 이 기능이 비활성화되고, 사용자는 항상 텍스트 입력 필드 내에서 직접 텍스트를 편집한다. 기본값은 false이다.

타입
bool

editable 속성이 false로 설정되면 텍스트를 편집할 수 없다. 기본값은 true이다.

타입
bool

enablesReturnKeyAutomatically
iOS

true로 설정하면 텍스트가 없을 때 키보드의 리턴 키를 비활성화하고, 텍스트가 입력되면 자동으로 활성화한다. 기본값은 false이다.

타입
bool

enterKeyHint

리턴 키에 표시할 텍스트를 결정한다. returnKeyType 프로퍼티보다 우선순위가 높다.

다음 값들은 모든 플랫폼에서 동작한다:

  • enter
  • done
  • next
  • search
  • send

안드로이드 전용

다음 값들은 안드로이드에서만 동작한다:

  • previous
타입
enum('enter', 'done', 'next', 'previous', 'search', 'send')

importantForAutofill
Android

앱의 개별 필드가 Android API 레벨 26 이상에서 자동 채우기를 위한 뷰 구조에 포함되어야 하는지 여부를 운영체제에 알려준다. 가능한 값은 auto, no, noExcludeDescendants, yes, yesExcludeDescendants이며, 기본값은 auto이다.

  • auto: Android 시스템이 뷰가 자동 채우기에 중요한지 여부를 휴리스틱으로 결정하도록 한다.
  • no: 이 뷰는 자동 채우기에 중요하지 않다.
  • noExcludeDescendants: 이 뷰와 그 하위 뷰들은 자동 채우기에 중요하지 않다.
  • yes: 이 뷰는 자동 채우기에 중요하다.
  • yesExcludeDescendants: 이 뷰는 자동 채우기에 중요하지만, 그 하위 뷰들은 중요하지 않다.
타입
enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants')

inlineImageLeft
Android

이 속성을 정의하면 제공된 이미지 리소스가 왼쪽에 렌더링된다. 이미지 리소스는 /android/app/src/main/res/drawable 디렉토리 안에 위치해야 하며, 다음과 같이 참조한다.

<TextInput
inlineImageLeft='search_icon'
/>
타입
string

inlineImagePadding
Android

인라인 이미지와 텍스트 입력 필드 사이의 패딩을 설정한다. 인라인 이미지가 있을 경우에만 적용된다.

타입
number

inputAccessoryViewID
iOS

이 텍스트 입력에 커스텀 InputAccessoryView를 연결할 수 있는 선택적 식별자이다. 이 텍스트 입력이 포커스를 받으면 InputAccessoryView가 키보드 위에 렌더링된다.

타입
string

inputMode

HTML의 inputmode 속성과 동일하게 동작한다. numeric과 같은 값을 지정하여 어떤 키보드를 열지 결정한다. keyboardType보다 우선순위가 높다.

다음 값을 지원한다:

  • none
  • text
  • decimal
  • numeric
  • tel
  • search
  • email
  • url
타입
enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url')

keyboardAppearance
iOS

키보드의 색상을 결정한다.

타입
enum('default', 'light', 'dark')

keyboardType

어떤 키보드를 열지 결정한다. 예를 들어 numeric을 사용하면 숫자 키보드가 열린다.

모든 타입의 스크린샷은 여기에서 확인할 수 있다.

다음 값들은 모든 플랫폼에서 동작한다:

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

iOS 전용

다음 값들은 iOS에서만 동작한다:

  • ascii-capable
  • numbers-and-punctuation
  • name-phone-pad
  • twitter
  • web-search

Android 전용

다음 값은 Android에서만 동작한다:

  • visible-password
타입
enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password')

maxFontSizeMultiplier

allowFontScaling이 활성화된 상태에서 폰트가 도달할 수 있는 최대 크기 비율을 지정한다. 가능한 값은 다음과 같다:

  • null/undefined (기본값): 부모 노드나 전역 기본값(0)을 상속받음
  • 0: 최대값 없음, 부모/전역 기본값 무시
  • >= 1: 이 노드의 maxFontSizeMultiplier를 해당 값으로 설정
타입
number

maxLength

입력할 수 있는 최대 문자 수를 제한한다. 이 기능은 깜빡임 현상을 방지하기 위해 자바스크립트에서 로직을 구현하는 대신 사용한다.

타입
number

multiline

true로 설정하면 텍스트 입력을 여러 줄로 할 수 있다. 기본값은 false이다.

note

이 설정은 iOS에서는 텍스트를 상단에 정렬하고, Android에서는 중앙에 정렬한다. 두 플랫폼에서 동일한 동작을 원한다면 textAlignVerticaltop으로 설정해야 한다.

타입
bool

numberOfLines
Android

TextInput에 표시할 줄 수를 설정한다. 여러 줄 입력이 가능한 상태에서(multilinetrue로 설정) 사용하면 지정한 줄 수만큼 입력할 수 있다.

타입
number

onBlur

텍스트 입력 필드가 포커스를 잃을 때 호출되는 콜백이다.

참고: nativeEvent에서 text 값을 가져오려고 할 때, 결과 값이 undefined가 될 수 있다는 점에 유의한다. 이로 인해 예기치 못한 오류가 발생할 수 있다. TextInput의 마지막 값을 찾으려면, 편집이 완료될 때 발생하는 onEndEditing 이벤트를 사용할 수 있다.

타입
function

onChange

텍스트 입력의 내용이 변경될 때 호출되는 콜백 함수이다.

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

onChangeText

텍스트 입력 필드의 내용이 변경될 때 호출되는 콜백 함수이다. 변경된 텍스트는 문자열 인자로 콜백 핸들러에 전달된다.

타입
function

onContentSizeChange

텍스트 입력의 내용 크기가 변경될 때 호출되는 콜백 함수이다. 멀티라인 텍스트 입력에서만 호출된다.

타입
({nativeEvent: {contentSize: {width, height} }}) => void

onEndEditing

텍스트 입력이 끝날 때 호출되는 콜백 함수다.

타입
function

onPressIn

터치가 시작될 때 호출되는 콜백 함수이다.

타입
({nativeEvent: PressEvent}) => void

onPressOut

터치가 해제될 때 호출되는 콜백 함수이다.

타입
({nativeEvent: PressEvent}) => void

onFocus

텍스트 입력이 포커스를 받을 때 호출되는 콜백 함수이다.

타입
({nativeEvent: LayoutEvent}) => void

onKeyPress

키를 눌렀을 때 호출되는 콜백 함수이다. 이 함수는 keyValue'Enter''Backspace'와 같은 특정 키에 해당하거나, 그 외에는 입력된 문자(공백인 경우 ' ' 포함)를 담은 객체와 함께 호출된다. 이 콜백은 onChange 콜백보다 먼저 실행된다. 참고: 안드로이드에서는 소프트 키보드 입력만 처리되며, 하드웨어 키보드 입력은 처리되지 않는다.

타입
({nativeEvent: {key: keyValue} }) => void

onLayout

마운트 시와 레이아웃 변경 시 호출된다.

타입
({nativeEvent: LayoutEvent}) => void

onScroll

콘텐츠 스크롤 시 호출된다. ScrollEvent의 다른 속성들도 포함될 수 있지만, 안드로이드에서는 성능상의 이유로 contentSize가 제공되지 않는다.

타입
({nativeEvent: {contentOffset: {x, y} }}) => void

onSelectionChange

텍스트 입력의 선택 영역이 변경될 때 호출되는 콜백 함수다.

타입
({nativeEvent: {selection: {start, end} }}) => void

onSubmitEditing

텍스트 입력 필드의 제출 버튼을 눌렀을 때 호출되는 콜백 함수이다.

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

iOS에서는 keyboardType="phone-pad"를 사용할 때 이 메서드가 호출되지 않는다는 점에 유의한다.

입력란에 텍스트가 입력되기 전에 표시될 문자열이다.

타입
string

placeholderTextColor

플레이스홀더 문자열의 텍스트 색상을 지정한다.

타입
color

readOnly

이 값을 true로 설정하면 텍스트를 편집할 수 없다. 기본값은 false다.

타입
bool

returnKeyLabel
Android

리턴 키의 라벨을 설정한다. returnKeyType 대신 이 속성을 사용한다.

타입
string

returnKeyType

이 속성은 리턴 키의 모양을 결정한다. 안드로이드에서는 returnKeyLabel도 사용할 수 있다.

크로스 플랫폼

다음 값들은 모든 플랫폼에서 동작한다:

  • done
  • go
  • next
  • search
  • send

안드로이드 전용

다음 값들은 안드로이드에서만 동작한다:

  • none
  • previous

iOS 전용

다음 값들은 iOS에서만 동작한다:

  • default
  • emergency-call
  • google
  • join
  • route
  • yahoo
타입
enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')

rejectResponderTermination
iOS

true로 설정하면 TextInput이 터치 이벤트를 부모 컴포넌트로 전달한다. 이렇게 하면 SwipeableListView와 같은 컴포넌트가 TextInput에서도 스와이프 가능해지며, 이는 기본적으로 Android에서와 동일한 동작이다. false로 설정하면 TextInput은 항상 입력 처리를 요청한다(비활성화 상태일 때는 제외). 기본값은 true이다.

타입
bool

rows
Android

TextInput의 행 수를 설정한다. 여러 줄 입력을 활성화하려면 multilinetrue로 설정한 후 이 속성을 사용한다.

타입
number

scrollEnabled
iOS

false로 설정하면 텍스트 뷰의 스크롤이 비활성화된다. 기본값은 true이다. 이 속성은 multiline={true}일 때만 동작한다.

타입
bool

secureTextEntry

이 값을 true로 설정하면 텍스트 입력 시 문자가 가려져서 패스워드와 같은 민감한 정보를 안전하게 보호한다. 기본값은 false이다. 이 기능은 multiline={true}와 함께 사용할 수 없다.

타입
bool

selection

텍스트 입력의 선택 범위를 나타낸다. 커서를 특정 위치에 놓으려면 시작과 끝 값을 동일하게 설정한다.

타입
객체: {start: number,end: number}

selectionColor

텍스트 입력란의 하이라이트, 선택 핸들, 커서 색상을 지정한다.

타입
color

selectionHandleColor
Android

선택 핸들의 색상을 설정한다. selectionColor와 달리, 선택 영역의 색상과 독립적으로 선택 핸들의 색상을 커스터마이징할 수 있다.

타입
color

selectTextOnFocus

이 값을 true로 설정하면 포커스가 잡힐 때 모든 텍스트가 자동으로 선택된다.

타입
bool

showSoftInputOnFocus는 필드가 포커스를 받을 때 소프트 키보드가 나타나는지 여부를 제어한다. 기본값은 true로, 필드가 포커스를 받으면 자동으로 소프트 키보드가 표시된다. 이 값을 false로 설정하면 필드가 포커스를 받아도 소프트 키보드가 나타나지 않는다.

타입
bool

spellCheck
iOS

false로 설정하면 맞춤법 검사 스타일(예: 빨간색 밑줄)을 비활성화한다. 기본값은 autoCorrect에서 상속받는다.

타입
bool

submitBehavior

엔터 키를 눌렀을 때의 동작을 정의한다.

단일 줄 입력 필드의 경우:

  • 'newline'은 기본적으로 'blurAndSubmit'으로 설정된다.
  • undefined일 때도 기본적으로 'blurAndSubmit'으로 설정된다.

여러 줄 입력 필드의 경우:

  • 'newline'은 새로운 줄을 추가한다.
  • undefined일 때는 기본적으로 'newline'으로 설정된다.

단일 줄과 여러 줄 입력 필드 모두에서:

  • 'submit'은 제출 이벤트만 발생시키고 입력 필드의 포커스를 해제하지 않는다.
  • 'blurAndSubmit'은 입력 필드의 포커스를 해제하고 제출 이벤트를 발생시킨다.
타입
enum('submit', 'blurAndSubmit', 'newline')

textAlign

입력 필드 내 텍스트를 왼쪽, 가운데, 또는 오른쪽으로 정렬한다.

textAlign의 가능한 값은 다음과 같다:

  • left
  • center
  • right
타입
enum('left', 'center', 'right')

textContentType
iOS

사용자가 입력하는 콘텐츠의 의미를 키보드와 시스템에 알려준다.

note

autoComplete는 모든 플랫폼에서 동일한 기능을 제공한다. 플랫폼별로 다른 동작이 필요하다면 Platform.select를 사용할 수 있다.

textContentTypeautoComplete를 동시에 사용하지 않는 것이 좋다. 하위 호환성을 위해 두 속성이 모두 설정된 경우 textContentType이 우선 적용된다.

textContentTypeusername 또는 password로 설정하면 디바이스 키체인에서 로그인 정보를 자동으로 채울 수 있다.

newPassword는 사용자가 키체인에 저장할 수 있는 새 비밀번호 입력 필드를 나타내고, oneTimeCode는 SMS로 전송된 코드를 자동으로 채울 수 있는 필드를 나타낸다.

자동 채우기를 비활성화하려면 textContentTypenone으로 설정한다.

textContentType의 가능한 값은 다음과 같다:

  • none
  • addressCity
  • addressCityAndState
  • addressState
  • birthdate (iOS 17+)
  • birthdateDay (iOS 17+)
  • birthdateMonth (iOS 17+)
  • birthdateYear (iOS 17+)
  • countryName
  • creditCardExpiration (iOS 17+)
  • creditCardExpirationMonth (iOS 17+)
  • creditCardExpirationYear (iOS 17+)
  • creditCardFamilyName (iOS 17+)
  • creditCardGivenName (iOS 17+)
  • creditCardMiddleName (iOS 17+)
  • creditCardName (iOS 17+)
  • creditCardNumber
  • creditCardSecurityCode (iOS 17+)
  • creditCardType (iOS 17+)
  • emailAddress
  • familyName
  • fullStreetAddress
  • givenName
  • jobTitle
  • location
  • middleName
  • name
  • namePrefix
  • nameSuffix
  • newPassword
  • nickname
  • oneTimeCode
  • organizationName
  • password
  • postalCode
  • streetAddressLine1
  • streetAddressLine2
  • sublocality
  • telephoneNumber
  • URL
  • username
Type
enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username')

passwordRules
iOS

iOS에서 textContentTypenewPassword로 설정할 때, PasswordRules를 사용해 OS에게 패스워드의 최소 요구 사항을 알려줄 수 있다. 이를 통해 OS가 해당 조건을 만족하는 패스워드를 생성할 수 있다. 유효한 PasswordRules 문자열을 생성하려면 Apple Docs를 참고한다.

패스워드 생성 대화 상자가 나타나지 않는다면 다음 사항을 확인한다:

  • AutoFill이 활성화되어 있는지: 설정암호 및 계정AutoFill 암호를 "켬"으로 설정,
  • iCloud Keychain을 사용 중인지: 설정Apple IDiCloudKeychainiCloud Keychain을 "켬"으로 설정.
타입
문자열

style

일부 텍스트 스타일은 지원되지 않는다는 점에 유의하자. 지원되지 않는 스타일의 불완전한 목록은 다음과 같다:

  • borderLeftWidth
  • borderTopWidth
  • borderRightWidth
  • borderBottomWidth
  • borderTopLeftRadius
  • borderTopRightRadius
  • borderBottomRightRadius
  • borderBottomLeftRadius

스타일

타입
텍스트

textBreakStrategy
Android

Android API 레벨 23 이상에서 텍스트 줄바꿈 전략을 설정한다. 가능한 값은 simple, highQuality, balanced이며, 기본값은 highQuality이다.

타입
enum('simple', 'highQuality', 'balanced')

underlineColorAndroid
Android

TextInput의 밑줄 색상을 지정한다.

타입
color

value는 텍스트 입력 필드에 표시할 값을 의미한다. TextInput은 제어되는 컴포넌트이므로, 이 value prop이 제공되면 네이티브 값이 이 값과 강제로 일치하게 된다. 대부분의 경우 이 방식은 잘 작동하지만, 특정 상황에서는 깜빡임 현상을 일으킬 수 있다. 흔한 원인 중 하나는 값을 동일하게 유지함으로써 편집을 방지하는 경우다. 깜빡임 없이 원치 않는 편집을 막으려면 동일한 값을 설정하는 것 외에도 editable={false}를 설정하거나 maxLength를 설정하거나 업데이트해야 한다.

타입
string

lineBreakStrategyIOS
iOS

iOS 14 이상에서 줄바꿈 전략을 설정한다. 가능한 값은 none, standard, hangul-word, push-out이다.

타입기본값
enum('none', 'standard', 'hangul-word', 'push-out')'none'

disableKeyboardShortcuts
iOS

이 값을 true로 설정하면 키보드 단축키(실행 취소/다시 실행 및 복사 버튼)를 비활성화한다. 기본값은 false이다.

타입
bool

메서드

.focus()

tsx
focus();

네이티브 입력 엘리먼트에 포커스를 요청한다.

.blur()

tsx
blur();

네이티브 입력 엘리먼트의 포커스를 해제한다.

clear()

tsx
clear();

TextInput의 모든 텍스트를 제거한다.

isFocused()

tsx
isFocused(): boolean;

현재 입력이 포커스된 상태라면 true를 반환하고, 그렇지 않으면 false를 반환한다.

알려진 이슈

  • react-native#19096: Android의 onKeyPreIme를 지원하지 않는다.
  • react-native#19366: 뒤로 가기 버튼을 통해 Android 키보드를 닫은 후 .focus()를 호출하면 키보드가 다시 나타나지 않는다.
  • react-native#26799: keyboardType="email-address" 또는 keyboardType="phone-pad"일 때 Android의 secureTextEntry를 지원하지 않는다.