kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_textinput.html
at main 95 kB view raw
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-textinput" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>TextInput · React Native</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true property=og:url content=https://reactnative.dev/docs/textinput><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true property=og:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true name=twitter:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:site content=@reactnative><meta data-rh=true name=docusaurus_version content=0.79><meta data-rh=true name=docusaurus_tag content=docs-default-0.79><meta data-rh=true name=docsearch:version content=0.79><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-0.79><meta data-rh=true property=og:title content="TextInput · React Native"><meta data-rh=true name=description content="A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad."><meta data-rh=true property=og:description content="A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/textinput><link data-rh=true rel=alternate href=https://reactnative.dev/docs/textinput hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/textinput hreflang=x-default><link data-rh=true rel=preconnect href=https://8TDSE0OHGQ-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Native RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Native Atom Feed"><link rel=alternate type=application/json href=/blog/feed.json title="React Native JSON Feed"><link rel=preconnect href=https://www.google-analytics.com><script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script><script async src=https://www.google-analytics.com/analytics.js></script><link rel=preconnect href=https://www.google-analytics.com><link rel=preconnect href=https://www.googletagmanager.com><script async src="https://www.googletagmanager.com/gtag/js?id=G-58L13S6BDP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-58L13S6BDP",{})</script><link rel=search type=application/opensearchdescription+xml title="React Native" href=/opensearch.xml><link rel=icon href=/img/pwa/manifest-icon-512.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#20232a><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=#20232a><link rel=apple-touch-icon href=/img/pwa/manifest-icon-512.png><link rel=mask-icon href=/img/pwa/manifest-icon-512.png color=#06bcee><meta name=msapplication-TileImage href=/img/pwa/manifest-icon-512.png><meta name=msapplication-TileColor content=#20232a><script src=https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js defer></script><script src=https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd8ryO5qrZo8Exadq9qmt1wtm4_2FdZGEAKHDFEt_2BBlwwM4.js defer></script><script src=https://snack.expo.dev/embed.js defer></script><script src=https://platform.twitter.com/widgets.js async></script><link rel=stylesheet href=/assets/css/styles.883cb042.css><script src=/assets/js/runtime~main.8ac1e6f0.js defer></script><script src=/assets/js/main.341783f5.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs> 2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol> 3</defs></svg> 4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class="theme-announcement-bar announcementBar_zJRd" style=background-color:#20232a;color:#fff role=banner><div class="content_bSb_ announcementBarContent_t7IR">Join us for React Conf on Oct 7-8. <a target=_blank rel="noopener noreferrer" href=https://conf.react.dev>Learn more</a>.</div></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--light_hHel"><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--dark_yETr"></div><b class="navbar__title text--truncate">React Native</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/docs/textinput>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/textinput>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/textinput>0.79</a><li><a class=dropdown__link href=/docs/0.78/textinput>0.78</a><li><a class=dropdown__link href=/docs/0.77/textinput>0.77</a><li><a class=dropdown__link href=/docs/0.76/textinput>0.76</a><li><a class=dropdown__link href=/docs/0.75/textinput>0.75</a><li><a class=dropdown__link href=/docs/0.74/textinput>0.74</a><li><a class=dropdown__link href=/docs/0.73/textinput>0.73</a><li><a class=dropdown__link href=/docs/0.72/textinput>0.72</a><li><a class=dropdown__link href=/docs/0.71/textinput>0.71</a><li><a class=dropdown__link href=/docs/0.70/textinput>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/getting-started>Guides</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</a><a class="navbar__item navbar__link" href=/blog>Blog</a><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><aside class="theme-doc-sidebar-container docSidebarContainer_c7NB"><div class=sidebarViewport_KYo0><div class=sidebar_CUen><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/components-and-apis>Core Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/components-and-apis>Core Components and APIs</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/activityindicator>ActivityIndicator</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/button>Button</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/flatlist>FlatList</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/image>Image</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/imagebackground>ImageBackground</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/keyboardavoidingview>KeyboardAvoidingView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/modal>Modal</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/pressable>Pressable</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/refreshcontrol>RefreshControl</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/scrollview>ScrollView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sectionlist>SectionList</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/statusbar>StatusBar</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/switch>Switch</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/text>Text</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/textinput>TextInput</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablehighlight>TouchableHighlight</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchableopacity>TouchableOpacity</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablewithoutfeedback>TouchableWithoutFeedback</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/view>View</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/virtualizedlist>VirtualizedList</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/drawerlayoutandroid>Android Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/drawerlayoutandroid>DrawerLayoutAndroid</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablenativefeedback>TouchableNativeFeedback</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/inputaccessoryview>iOS Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/inputaccessoryview>InputAccessoryView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/safeareaview>SafeAreaView</a></ul></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/image-style-props>Props</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/boxshadowvalue>Object Types</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>TextInput</h1></header><p>A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.</p> 5<p>The most basic use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A minimal example:</p> 6<div class=snack-player data-snack-name="TextInput Example" data-snack-description="Example usage" data-snack-files="%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%20from%20'react'%3B%5Cnimport%20%7BStyleSheet%2C%20TextInput%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20TextInputExample%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5Btext%2C%20onChangeText%5D%20%3D%20React.useState('Useless%20Text')%3B%5Cn%20%20const%20%5Bnumber%2C%20onChangeNumber%5D%20%3D%20React.useState('')%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%3E%5Cn%20%20%20%20%20%20%20%20%3CTextInput%5Cn%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.input%7D%5Cn%20%20%20%20%20%20%20%20%20%20onChangeText%3D%7BonChangeText%7D%5Cn%20%20%20%20%20%20%20%20%20%20value%3D%7Btext%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%3CTextInput%5Cn%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.input%7D%5Cn%20%20%20%20%20%20%20%20%20%20onChangeText%3D%7BonChangeNumber%7D%5Cn%20%20%20%20%20%20%20%20%20%20value%3D%7Bnumber%7D%5Cn%20%20%20%20%20%20%20%20%20%20placeholder%3D%5C%22useless%20placeholder%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20keyboardType%3D%5C%22numeric%5C%22%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%20%20%3C%2FSafeAreaProvider%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20input%3A%20%7B%5Cn%20%20%20%20height%3A%2040%2C%5Cn%20%20%20%20margin%3A%2012%2C%5Cn%20%20%20%20borderWidth%3A%201%2C%5Cn%20%20%20%20padding%3A%2010%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20TextInputExample%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div> 7<p>Two methods exposed via the native element are <code>.focus()</code> and <code>.blur()</code> that will focus or blur the TextInput programmatically.</p> 8<p>Note that some props are only available with <code>multiline={true/false}</code>. Additionally, border styles that apply to only one side of the element (e.g., <code>borderBottomColor</code>, <code>borderLeftWidth</code>, etc.) will not be applied if <code>multiline=true</code>. To achieve the same effect, you can wrap your <code>TextInput</code> in a <code>View</code>:</p> 9<div class=snack-player data-snack-name="Multiline TextInput Example" data-snack-description="Example usage" data-snack-files="%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%20from%20'react'%3B%5Cnimport%20%7BTextInput%2C%20StyleSheet%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20MultilineTextInputExample%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5Bvalue%2C%20onChangeText%5D%20%3D%20React.useState('Useless%20Multiline%20Placeholder')%3B%5Cn%5Cn%20%20%2F%2F%20If%20you%20type%20something%20in%20the%20text%20box%20that%20is%20a%20color%2C%5Cn%20%20%2F%2F%20the%20background%20will%20change%20to%20that%20color.%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%5Cn%20%20%20%20%20%20%20%20style%3D%7B%5B%5Cn%20%20%20%20%20%20%20%20%20%20styles.container%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20value%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5D%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CTextInput%5Cn%20%20%20%20%20%20%20%20%20%20editable%5Cn%20%20%20%20%20%20%20%20%20%20multiline%5Cn%20%20%20%20%20%20%20%20%20%20numberOfLines%3D%7B4%7D%5Cn%20%20%20%20%20%20%20%20%20%20maxLength%3D%7B40%7D%5Cn%20%20%20%20%20%20%20%20%20%20onChangeText%3D%7Btext%20%3D%3E%20onChangeText(text)%7D%5Cn%20%20%20%20%20%20%20%20%20%20value%3D%7Bvalue%7D%5Cn%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.textInput%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%20%20%3C%2FSafeAreaProvider%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20borderBottomColor%3A%20'%23000'%2C%5Cn%20%20%20%20borderBottomWidth%3A%201%2C%5Cn%20%20%7D%2C%5Cn%20%20textInput%3A%20%7B%5Cn%20%20%20%20padding%3A%2010%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20MultilineTextInputExample%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div> 10<p><code>TextInput</code> has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting <code>underlineColorAndroid</code> to transparent.</p> 11<p>Note that on Android performing text selection in an input can change the app's activity <code>windowSoftInputMode</code> param to <code>adjustResize</code>. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify <code>windowSoftInputMode</code> in AndroidManifest.xml ( <a href=https://developer.android.com/guide/topics/manifest/activity-element.html target=_blank rel="noopener noreferrer">https://developer.android.com/guide/topics/manifest/activity-element.html</a> ) or control this param programmatically with native code.</p> 12<hr> 13<h1>Reference</h1> 14<h2 class="anchor anchorWithStickyNavbar_JmGV" id=props>Props<a href=#props class=hash-link aria-label="Direct link to Props" title="Direct link to Props">​</a></h2> 15<h3 class="anchor anchorWithStickyNavbar_JmGV" id=view-props><a href=/docs/view#props>View Props</a><a href=#view-props class=hash-link aria-label="Direct link to view-props" title="Direct link to view-props">​</a></h3> 16<p>Inherits <a href=/docs/view#props>View Props</a>.</p> 17<hr> 18<h3 class="anchor anchorWithStickyNavbar_JmGV" id=allowfontscaling><code>allowFontScaling</code><a href=#allowfontscaling class=hash-link aria-label="Direct link to allowfontscaling" title="Direct link to allowfontscaling">​</a></h3> 19<p>Specifies whether fonts should scale to respect Text Size accessibility settings. The default is <code>true</code>.</p> 20<table><thead><tr><th>Type<tbody><tr><td>bool</table> 21<hr> 22<h3 class="anchor anchorWithStickyNavbar_JmGV" id=autocapitalize><code>autoCapitalize</code><a href=#autocapitalize class=hash-link aria-label="Direct link to autocapitalize" title="Direct link to autocapitalize">​</a></h3> 23<p>Tells <code>TextInput</code> to automatically capitalize certain characters. This property is not supported by some keyboard types such as <code>name-phone-pad</code>.</p> 24<ul> 25<li><code>characters</code>: all characters.</li> 26<li><code>words</code>: first letter of each word.</li> 27<li><code>sentences</code>: first letter of each sentence (<em>default</em>).</li> 28<li><code>none</code>: don't auto capitalize anything.</li> 29</ul> 30<table><thead><tr><th>Type<tbody><tr><td>enum('none', 'sentences', 'words', 'characters')</table> 31<hr> 32<h3 class="anchor anchorWithStickyNavbar_JmGV" id=autocomplete><code>autoComplete</code><a href=#autocomplete class=hash-link aria-label="Direct link to autocomplete" title="Direct link to autocomplete">​</a></h3> 33<p>Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set <code>autoComplete</code> to <code>off</code>.</p> 34<p>The following values work across platforms:</p> 35<ul> 36<li><code>additional-name</code></li> 37<li><code>address-line1</code></li> 38<li><code>address-line2</code></li> 39<li><code>birthdate-day</code> (iOS 17+)</li> 40<li><code>birthdate-full</code> (iOS 17+)</li> 41<li><code>birthdate-month</code> (iOS 17+)</li> 42<li><code>birthdate-year</code> (iOS 17+)</li> 43<li><code>cc-csc</code> (iOS 17+)</li> 44<li><code>cc-exp</code> (iOS 17+)</li> 45<li><code>cc-exp-day</code> (iOS 17+)</li> 46<li><code>cc-exp-month</code> (iOS 17+)</li> 47<li><code>cc-exp-year</code> (iOS 17+)</li> 48<li><code>cc-number</code></li> 49<li><code>country</code></li> 50<li><code>current-password</code></li> 51<li><code>email</code></li> 52<li><code>family-name</code></li> 53<li><code>given-name</code></li> 54<li><code>honorific-prefix</code></li> 55<li><code>honorific-suffix</code></li> 56<li><code>name</code></li> 57<li><code>new-password</code></li> 58<li><code>off</code></li> 59<li><code>one-time-code</code></li> 60<li><code>postal-code</code></li> 61<li><code>street-address</code></li> 62<li><code>tel</code></li> 63<li><code>username</code></li> 64</ul> 65<div class="label basic ios">iOS</div> 66<p>The following values work on iOS only:</p> 67<ul> 68<li><code>cc-family-name</code> (iOS 17+)</li> 69<li><code>cc-given-name</code> (iOS 17+)</li> 70<li><code>cc-middle-name</code> (iOS 17+)</li> 71<li><code>cc-name</code> (iOS 17+)</li> 72<li><code>cc-type</code> (iOS 17+)</li> 73<li><code>nickname</code></li> 74<li><code>organization</code></li> 75<li><code>organization-title</code></li> 76<li><code>url</code></li> 77</ul> 78<div class="label basic android">Android</div> 79<p>The following values work on Android only:</p> 80<ul> 81<li><code>gender</code></li> 82<li><code>name-family</code></li> 83<li><code>name-given</code></li> 84<li><code>name-middle</code></li> 85<li><code>name-middle-initial</code></li> 86<li><code>name-prefix</code></li> 87<li><code>name-suffix</code></li> 88<li><code>password</code></li> 89<li><code>password-new</code></li> 90<li><code>postal-address</code></li> 91<li><code>postal-address-country</code></li> 92<li><code>postal-address-extended</code></li> 93<li><code>postal-address-extended-postal-code</code></li> 94<li><code>postal-address-locality</code></li> 95<li><code>postal-address-region</code></li> 96<li><code>sms-otp</code></li> 97<li><code>tel-country-code</code></li> 98<li><code>tel-device</code></li> 99<li><code>tel-national</code></li> 100<li><code>username-new</code></li> 101</ul> 102<table><thead><tr><th>Type<tbody><tr><td>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')</table> 103<hr> 104<h3 class="anchor anchorWithStickyNavbar_JmGV" id=autocorrect><code>autoCorrect</code><a href=#autocorrect class=hash-link aria-label="Direct link to autocorrect" title="Direct link to autocorrect">​</a></h3> 105<p>If <code>false</code>, disables auto-correct. The default value is <code>true</code>.</p> 106<table><thead><tr><th>Type<tbody><tr><td>bool</table> 107<hr> 108<h3 class="anchor anchorWithStickyNavbar_JmGV" id=autofocus><code>autoFocus</code><a href=#autofocus class=hash-link aria-label="Direct link to autofocus" title="Direct link to autofocus">​</a></h3> 109<p>If <code>true</code>, focuses the input. The default value is <code>false</code>.</p> 110<table><thead><tr><th>Type<tbody><tr><td>bool</table> 111<hr> 112<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bluronsubmit><code>blurOnSubmit</code><a href=#bluronsubmit class=hash-link aria-label="Direct link to bluronsubmit" title="Direct link to bluronsubmit">​</a></h3> 113<blockquote> 114<p><strong>Deprecated.</strong> Note that <code>submitBehavior</code> now takes the place of <code>blurOnSubmit</code> and will override any behavior defined by <code>blurOnSubmit</code>. See <a href=/docs/textinput#submitbehavior>submitBehavior</a></p> 115</blockquote> 116<p>If <code>true</code>, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting <code>blurOnSubmit</code> to <code>true</code> means that pressing return will blur the field and trigger the <code>onSubmitEditing</code> event instead of inserting a newline into the field.</p> 117<table><thead><tr><th>Type<tbody><tr><td>bool</table> 118<hr> 119<h3 class="anchor anchorWithStickyNavbar_JmGV" id=carethidden><code>caretHidden</code><a href=#carethidden class=hash-link aria-label="Direct link to carethidden" title="Direct link to carethidden">​</a></h3> 120<p>If <code>true</code>, caret is hidden. The default value is <code>false</code>.</p> 121<table><thead><tr><th>Type<tbody><tr><td>bool</table> 122<hr> 123<h3 class="anchor anchorWithStickyNavbar_JmGV" id=clearbuttonmode-ios><code>clearButtonMode</code> <div class="label ios">iOS</div><a href=#clearbuttonmode-ios class=hash-link aria-label="Direct link to clearbuttonmode-ios" title="Direct link to clearbuttonmode-ios">​</a></h3> 124<p>When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is <code>never</code>.</p> 125<table><thead><tr><th>Type<tbody><tr><td>enum('never', 'while-editing', 'unless-editing', 'always')</table> 126<hr> 127<h3 class="anchor anchorWithStickyNavbar_JmGV" id=cleartextonfocus-ios><code>clearTextOnFocus</code> <div class="label ios">iOS</div><a href=#cleartextonfocus-ios class=hash-link aria-label="Direct link to cleartextonfocus-ios" title="Direct link to cleartextonfocus-ios">​</a></h3> 128<p>If <code>true</code>, clears the text field automatically when editing begins.</p> 129<table><thead><tr><th>Type<tbody><tr><td>bool</table> 130<hr> 131<h3 class="anchor anchorWithStickyNavbar_JmGV" id=contextmenuhidden><code>contextMenuHidden</code><a href=#contextmenuhidden class=hash-link aria-label="Direct link to contextmenuhidden" title="Direct link to contextmenuhidden">​</a></h3> 132<p>If <code>true</code>, context menu is hidden. The default value is <code>false</code>.</p> 133<table><thead><tr><th>Type<tbody><tr><td>bool</table> 134<hr> 135<h3 class="anchor anchorWithStickyNavbar_JmGV" id=datadetectortypes-ios><code>dataDetectorTypes</code> <div class="label ios">iOS</div><a href=#datadetectortypes-ios class=hash-link aria-label="Direct link to datadetectortypes-ios" title="Direct link to datadetectortypes-ios">​</a></h3> 136<p>Determines the types of data converted to clickable URLs in the text input. Only valid if <code>multiline={true}</code> and <code>editable={false}</code>. By default no data types are detected.</p> 137<p>You can provide one type or an array of many types.</p> 138<p>Possible values for <code>dataDetectorTypes</code> are:</p> 139<ul> 140<li><code>'phoneNumber'</code></li> 141<li><code>'link'</code></li> 142<li><code>'address'</code></li> 143<li><code>'calendarEvent'</code></li> 144<li><code>'none'</code></li> 145<li><code>'all'</code></li> 146</ul> 147<table><thead><tr><th>Type<tbody><tr><td>enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')</table> 148<hr> 149<h3 class="anchor anchorWithStickyNavbar_JmGV" id=defaultvalue><code>defaultValue</code><a href=#defaultvalue class=hash-link aria-label="Direct link to defaultvalue" title="Direct link to defaultvalue">​</a></h3> 150<p>Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p> 151<table><thead><tr><th>Type<tbody><tr><td>string</table> 152<hr> 153<h3 class="anchor anchorWithStickyNavbar_JmGV" id=cursorcolor-android><code>cursorColor</code> <div class="label android">Android</div><a href=#cursorcolor-android class=hash-link aria-label="Direct link to cursorcolor-android" title="Direct link to cursorcolor-android">​</a></h3> 154<p>When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of <code>selectionColor</code> the cursor color will be set independently from the color of the text selection box.</p> 155<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table> 156<hr> 157<h3 class="anchor anchorWithStickyNavbar_JmGV" id=disablefullscreenui-android><code>disableFullscreenUI</code> <div class="label android">Android</div><a href=#disablefullscreenui-android class=hash-link aria-label="Direct link to disablefullscreenui-android" title="Direct link to disablefullscreenui-android">​</a></h3> 158<p>When <code>false</code>, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When <code>true</code>, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to <code>false</code>.</p> 159<table><thead><tr><th>Type<tbody><tr><td>bool</table> 160<hr> 161<h3 class="anchor anchorWithStickyNavbar_JmGV" id=editable><code>editable</code><a href=#editable class=hash-link aria-label="Direct link to editable" title="Direct link to editable">​</a></h3> 162<p>If <code>false</code>, text is not editable. The default value is <code>true</code>.</p> 163<table><thead><tr><th>Type<tbody><tr><td>bool</table> 164<hr> 165<h3 class="anchor anchorWithStickyNavbar_JmGV" id=enablesreturnkeyautomatically-ios><code>enablesReturnKeyAutomatically</code> <div class="label ios">iOS</div><a href=#enablesreturnkeyautomatically-ios class=hash-link aria-label="Direct link to enablesreturnkeyautomatically-ios" title="Direct link to enablesreturnkeyautomatically-ios">​</a></h3> 166<p>If <code>true</code>, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is <code>false</code>.</p> 167<table><thead><tr><th>Type<tbody><tr><td>bool</table> 168<hr> 169<h3 class="anchor anchorWithStickyNavbar_JmGV" id=enterkeyhint><code>enterKeyHint</code><a href=#enterkeyhint class=hash-link aria-label="Direct link to enterkeyhint" title="Direct link to enterkeyhint">​</a></h3> 170<p>Determines what text should be shown to the return key. Has precedence over the <code>returnKeyType</code> prop.</p> 171<p>The following values work across platforms:</p> 172<ul> 173<li><code>enter</code></li> 174<li><code>done</code></li> 175<li><code>next</code></li> 176<li><code>search</code></li> 177<li><code>send</code></li> 178</ul> 179<p><em>Android Only</em></p> 180<p>The following values work on Android only:</p> 181<ul> 182<li><code>previous</code></li> 183</ul> 184<table><thead><tr><th>Type<tbody><tr><td>enum('enter', 'done', 'next', 'previous', 'search', 'send')</table> 185<hr> 186<h3 class="anchor anchorWithStickyNavbar_JmGV" id=importantforautofill-android><code>importantForAutofill</code> <div class="label android">Android</div><a href=#importantforautofill-android class=hash-link aria-label="Direct link to importantforautofill-android" title="Direct link to importantforautofill-android">​</a></h3> 187<p>Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are <code>auto</code>, <code>no</code>, <code>noExcludeDescendants</code>, <code>yes</code>, and <code>yesExcludeDescendants</code>. The default value is <code>auto</code>.</p> 188<ul> 189<li><code>auto</code>: Let the Android System use its heuristics to determine if the view is important for autofill.</li> 190<li><code>no</code>: This view isn't important for autofill.</li> 191<li><code>noExcludeDescendants</code>: This view and its children aren't important for autofill.</li> 192<li><code>yes</code>: This view is important for autofill.</li> 193<li><code>yesExcludeDescendants</code>: This view is important for autofill, but its children aren't important for autofill.</li> 194</ul> 195<table><thead><tr><th>Type<tbody><tr><td>enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants')</table> 196<hr> 197<h3 class="anchor anchorWithStickyNavbar_JmGV" id=inlineimageleft-android><code>inlineImageLeft</code> <div class="label android">Android</div><a href=#inlineimageleft-android class=hash-link aria-label="Direct link to inlineimageleft-android" title="Direct link to inlineimageleft-android">​</a></h3> 198<p>If defined, the provided image resource will be rendered on the left. The image resource must be inside <code>/android/app/src/main/res/drawable</code> and referenced like</p> 199<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>TextInput</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>inlineImageLeft</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>'</span><span class="token tag attr-value" style=color:#8dc891>search_icon</span><span class="token tag attr-value punctuation" style=color:#657b83>'</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e></span><span class="token tag punctuation" style=color:#657b83>/></span><br></span></code></pre></div></div> 200<table><thead><tr><th>Type<tbody><tr><td>string</table> 201<hr> 202<h3 class="anchor anchorWithStickyNavbar_JmGV" id=inlineimagepadding-android><code>inlineImagePadding</code> <div class="label android">Android</div><a href=#inlineimagepadding-android class=hash-link aria-label="Direct link to inlineimagepadding-android" title="Direct link to inlineimagepadding-android">​</a></h3> 203<p>Padding between the inline image, if any, and the text input itself.</p> 204<table><thead><tr><th>Type<tbody><tr><td>number</table> 205<hr> 206<h3 class="anchor anchorWithStickyNavbar_JmGV" id=inputaccessoryviewid-ios><code>inputAccessoryViewID</code> <div class="label ios">iOS</div><a href=#inputaccessoryviewid-ios class=hash-link aria-label="Direct link to inputaccessoryviewid-ios" title="Direct link to inputaccessoryviewid-ios">​</a></h3> 207<p>An optional identifier which links a custom <a href=/docs/inputaccessoryview>InputAccessoryView</a> to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.</p> 208<table><thead><tr><th>Type<tbody><tr><td>string</table> 209<hr> 210<h3 class="anchor anchorWithStickyNavbar_JmGV" id=inputaccessoryviewbuttonlabel-ios><code>inputAccessoryViewButtonLabel</code> <div class="label ios">iOS</div><a href=#inputaccessoryviewbuttonlabel-ios class=hash-link aria-label="Direct link to inputaccessoryviewbuttonlabel-ios" title="Direct link to inputaccessoryviewbuttonlabel-ios">​</a></h3> 211<p>An optional label that overrides the default <a href=/docs/inputaccessoryview>InputAccessoryView</a> button label.</p> 212<p>By default, the default button label is not localized. Use this property to provide a localized version.</p> 213<table><thead><tr><th>Type<tbody><tr><td>string</table> 214<hr> 215<h3 class="anchor anchorWithStickyNavbar_JmGV" id=inputmode><code>inputMode</code><a href=#inputmode class=hash-link aria-label="Direct link to inputmode" title="Direct link to inputmode">​</a></h3> 216<p>Works like the <code>inputmode</code> attribute in HTML, it determines which keyboard to open, e.g. <code>numeric</code> and has precedence over <code>keyboardType</code>.</p> 217<p>Support the following values:</p> 218<ul> 219<li><code>none</code></li> 220<li><code>text</code></li> 221<li><code>decimal</code></li> 222<li><code>numeric</code></li> 223<li><code>tel</code></li> 224<li><code>search</code></li> 225<li><code>email</code></li> 226<li><code>url</code></li> 227</ul> 228<table><thead><tr><th>Type<tbody><tr><td>enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url')</table> 229<hr> 230<h3 class="anchor anchorWithStickyNavbar_JmGV" id=keyboardappearance-ios><code>keyboardAppearance</code> <div class="label ios">iOS</div><a href=#keyboardappearance-ios class=hash-link aria-label="Direct link to keyboardappearance-ios" title="Direct link to keyboardappearance-ios">​</a></h3> 231<p>Determines the color of the keyboard.</p> 232<table><thead><tr><th>Type<tbody><tr><td>enum('default', 'light', 'dark')</table> 233<hr> 234<h3 class="anchor anchorWithStickyNavbar_JmGV" id=keyboardtype><code>keyboardType</code><a href=#keyboardtype class=hash-link aria-label="Direct link to keyboardtype" title="Direct link to keyboardtype">​</a></h3> 235<p>Determines which keyboard to open, e.g.<code>numeric</code>.</p> 236<p>See screenshots of all the types <a href=https://lefkowitz.me/2018/04/30/visual-guide-to-react-native-textinput-keyboardtype-options/ target=_blank rel="noopener noreferrer">here</a>.</p> 237<p>The following values work across platforms:</p> 238<ul> 239<li><code>default</code></li> 240<li><code>number-pad</code></li> 241<li><code>decimal-pad</code></li> 242<li><code>numeric</code></li> 243<li><code>email-address</code></li> 244<li><code>phone-pad</code></li> 245<li><code>url</code></li> 246</ul> 247<p><em>iOS Only</em></p> 248<p>The following values work on iOS only:</p> 249<ul> 250<li><code>ascii-capable</code></li> 251<li><code>numbers-and-punctuation</code></li> 252<li><code>name-phone-pad</code></li> 253<li><code>twitter</code></li> 254<li><code>web-search</code></li> 255</ul> 256<p><em>Android Only</em></p> 257<p>The following values work on Android only:</p> 258<ul> 259<li><code>visible-password</code></li> 260</ul> 261<table><thead><tr><th>Type<tbody><tr><td>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')</table> 262<hr> 263<h3 class="anchor anchorWithStickyNavbar_JmGV" id=maxfontsizemultiplier><code>maxFontSizeMultiplier</code><a href=#maxfontsizemultiplier class=hash-link aria-label="Direct link to maxfontsizemultiplier" title="Direct link to maxfontsizemultiplier">​</a></h3> 264<p>Specifies largest possible scale a font can reach when <code>allowFontScaling</code> is enabled. Possible values:</p> 265<ul> 266<li><code>null/undefined</code> (default): inherit from the parent node or the global default (0)</li> 267<li><code>0</code>: no max, ignore parent/global default</li> 268<li><code>>= 1</code>: sets the <code>maxFontSizeMultiplier</code> of this node to this value</li> 269</ul> 270<table><thead><tr><th>Type<tbody><tr><td>number</table> 271<hr> 272<h3 class="anchor anchorWithStickyNavbar_JmGV" id=maxlength><code>maxLength</code><a href=#maxlength class=hash-link aria-label="Direct link to maxlength" title="Direct link to maxlength">​</a></h3> 273<p>Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.</p> 274<table><thead><tr><th>Type<tbody><tr><td>number</table> 275<hr> 276<h3 class="anchor anchorWithStickyNavbar_JmGV" id=multiline><code>multiline</code><a href=#multiline class=hash-link aria-label="Direct link to multiline" title="Direct link to multiline">​</a></h3> 277<p>If <code>true</code>, the text input can be multiple lines. The default value is <code>false</code>.</p> 278<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p>It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with <code>textAlignVertical</code> set to <code>top</code> for the same behavior in both platforms.</div></div> 279<table><thead><tr><th>Type<tbody><tr><td>bool</table> 280<hr> 281<h3 class="anchor anchorWithStickyNavbar_JmGV" id=numberoflines><code>numberOfLines</code><a href=#numberoflines class=hash-link aria-label="Direct link to numberoflines" title="Direct link to numberoflines">​</a></h3> 282<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p><code>numberOfLines</code> on iOS is only available on the <a href=/architecture/landing-page>New Architecture</a></div></div> 283<p>Sets the maximum number of lines for a <code>TextInput</code>. Use it with multiline set to <code>true</code> to be able to fill the lines.</p> 284<table><thead><tr><th>Type<tbody><tr><td>number</table> 285<hr> 286<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onblur><code>onBlur</code><a href=#onblur class=hash-link aria-label="Direct link to onblur" title="Direct link to onblur">​</a></h3> 287<p>Callback that is called when the text input is blurred.</p> 288<blockquote> 289<p>Note: If you are attempting to access the <code>text</code> value from <code>nativeEvent</code> keep in mind that the resulting value you get can be <code>undefined</code> which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the <a href=/docs/textinput#onendediting><code>onEndEditing</code></a> event, which is fired upon completion of editing.</p> 290</blockquote> 291<table><thead><tr><th>Type<tbody><tr><td>function</table> 292<hr> 293<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onchange><code>onChange</code><a href=#onchange class=hash-link aria-label="Direct link to onchange" title="Direct link to onchange">​</a></h3> 294<p>Callback that is called when the text input's text changes.</p> 295<table><thead><tr><th>Type<tbody><tr><td>(<code>{nativeEvent: {eventCount, target, text}}</code>) => void</table> 296<hr> 297<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onchangetext><code>onChangeText</code><a href=#onchangetext class=hash-link aria-label="Direct link to onchangetext" title="Direct link to onchangetext">​</a></h3> 298<p>Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.</p> 299<table><thead><tr><th>Type<tbody><tr><td>function</table> 300<hr> 301<h3 class="anchor anchorWithStickyNavbar_JmGV" id=oncontentsizechange><code>onContentSizeChange</code><a href=#oncontentsizechange class=hash-link aria-label="Direct link to oncontentsizechange" title="Direct link to oncontentsizechange">​</a></h3> 302<p>Callback that is called when the text input's content size changes.</p> 303<p>Only called for multiline text inputs.</p> 304<table><thead><tr><th>Type<tbody><tr><td>(<code>{nativeEvent: {contentSize: {width, height} }}</code>) => void</table> 305<hr> 306<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onendediting><code>onEndEditing</code><a href=#onendediting class=hash-link aria-label="Direct link to onendediting" title="Direct link to onendediting">​</a></h3> 307<p>Callback that is called when text input ends.</p> 308<table><thead><tr><th>Type<tbody><tr><td>function</table> 309<hr> 310<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onpressin><code>onPressIn</code><a href=#onpressin class=hash-link aria-label="Direct link to onpressin" title="Direct link to onpressin">​</a></h3> 311<p>Callback that is called when a touch is engaged.</p> 312<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => void</code></table> 313<hr> 314<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onpressout><code>onPressOut</code><a href=#onpressout class=hash-link aria-label="Direct link to onpressout" title="Direct link to onpressout">​</a></h3> 315<p>Callback that is called when a touch is released.</p> 316<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/pressevent>PressEvent</a>}) => void</code></table> 317<hr> 318<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onfocus><code>onFocus</code><a href=#onfocus class=hash-link aria-label="Direct link to onfocus" title="Direct link to onfocus">​</a></h3> 319<p>Callback that is called when the text input is focused.</p> 320<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/layoutevent>LayoutEvent</a>}) => void</code></table> 321<hr> 322<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onkeypress><code>onKeyPress</code><a href=#onkeypress class=hash-link aria-label="Direct link to onkeypress" title="Direct link to onkeypress">​</a></h3> 323<p>Callback that is called when a key is pressed. This will be called with object where <code>keyValue</code> is <code>'Enter'</code> or <code>'Backspace'</code> for respective keys and the typed-in character otherwise including <code>' '</code> for space. Fires before <code>onChange</code> callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.</p> 324<table><thead><tr><th>Type<tbody><tr><td>(<code>{nativeEvent: {key: keyValue} }</code>) => void</table> 325<hr> 326<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onlayout><code>onLayout</code><a href=#onlayout class=hash-link aria-label="Direct link to onlayout" title="Direct link to onlayout">​</a></h3> 327<p>Invoked on mount and on layout changes.</p> 328<table><thead><tr><th>Type<tbody><tr><td><code>({nativeEvent: <a href=/docs/layoutevent>LayoutEvent</a>}) => void</code></table> 329<hr> 330<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onscroll><code>onScroll</code><a href=#onscroll class=hash-link aria-label="Direct link to onscroll" title="Direct link to onscroll">​</a></h3> 331<p>Invoked on content scroll. May also contain other properties from <code>ScrollEvent</code> but on Android <code>contentSize</code> is not provided for performance reasons.</p> 332<table><thead><tr><th>Type<tbody><tr><td>(<code>{nativeEvent: {contentOffset: {x, y} }}</code>) => void</table> 333<hr> 334<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onselectionchange><code>onSelectionChange</code><a href=#onselectionchange class=hash-link aria-label="Direct link to onselectionchange" title="Direct link to onselectionchange">​</a></h3> 335<p>Callback that is called when the text input selection is changed.</p> 336<table><thead><tr><th>Type<tbody><tr><td>(<code>{nativeEvent: {selection: {start, end} }}</code>) => void</table> 337<hr> 338<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onsubmitediting><code>onSubmitEditing</code><a href=#onsubmitediting class=hash-link aria-label="Direct link to onsubmitediting" title="Direct link to onsubmitediting">​</a></h3> 339<p>Callback that is called when the text input's submit button is pressed.</p> 340<table><thead><tr><th>Type<tbody><tr><td>(<code>{nativeEvent: {text, eventCount, target}}</code>) => void</table> 341<p>Note that on iOS this method isn't called when using <code>keyboardType="phone-pad"</code>.</p> 342<hr> 343<h3 class="anchor anchorWithStickyNavbar_JmGV" id=placeholder><code>placeholder</code><a href=#placeholder class=hash-link aria-label="Direct link to placeholder" title="Direct link to placeholder">​</a></h3> 344<p>The string that will be rendered before text input has been entered.</p> 345<table><thead><tr><th>Type<tbody><tr><td>string</table> 346<hr> 347<h3 class="anchor anchorWithStickyNavbar_JmGV" id=placeholdertextcolor><code>placeholderTextColor</code><a href=#placeholdertextcolor class=hash-link aria-label="Direct link to placeholdertextcolor" title="Direct link to placeholdertextcolor">​</a></h3> 348<p>The text color of the placeholder string.</p> 349<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table> 350<hr> 351<h3 class="anchor anchorWithStickyNavbar_JmGV" id=readonly><code>readOnly</code><a href=#readonly class=hash-link aria-label="Direct link to readonly" title="Direct link to readonly">​</a></h3> 352<p>If <code>true</code>, text is not editable. The default value is <code>false</code>.</p> 353<table><thead><tr><th>Type<tbody><tr><td>bool</table> 354<hr> 355<h3 class="anchor anchorWithStickyNavbar_JmGV" id=returnkeylabel-android><code>returnKeyLabel</code> <div class="label android">Android</div><a href=#returnkeylabel-android class=hash-link aria-label="Direct link to returnkeylabel-android" title="Direct link to returnkeylabel-android">​</a></h3> 356<p>Sets the return key to the label. Use it instead of <code>returnKeyType</code>.</p> 357<table><thead><tr><th>Type<tbody><tr><td>string</table> 358<hr> 359<h3 class="anchor anchorWithStickyNavbar_JmGV" id=returnkeytype><code>returnKeyType</code><a href=#returnkeytype class=hash-link aria-label="Direct link to returnkeytype" title="Direct link to returnkeytype">​</a></h3> 360<p>Determines how the return key should look. On Android you can also use <code>returnKeyLabel</code>.</p> 361<p><em>Cross platform</em></p> 362<p>The following values work across platforms:</p> 363<ul> 364<li><code>done</code></li> 365<li><code>go</code></li> 366<li><code>next</code></li> 367<li><code>search</code></li> 368<li><code>send</code></li> 369</ul> 370<p><em>Android Only</em></p> 371<p>The following values work on Android only:</p> 372<ul> 373<li><code>none</code></li> 374<li><code>previous</code></li> 375</ul> 376<p><em>iOS Only</em></p> 377<p>The following values work on iOS only:</p> 378<ul> 379<li><code>default</code></li> 380<li><code>emergency-call</code></li> 381<li><code>google</code></li> 382<li><code>join</code></li> 383<li><code>route</code></li> 384<li><code>yahoo</code></li> 385</ul> 386<table><thead><tr><th>Type<tbody><tr><td>enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')</table> 387<h3 class="anchor anchorWithStickyNavbar_JmGV" id=rejectrespondertermination-ios><code>rejectResponderTermination</code> <div class="label ios">iOS</div><a href=#rejectrespondertermination-ios class=hash-link aria-label="Direct link to rejectrespondertermination-ios" title="Direct link to rejectrespondertermination-ios">​</a></h3> 388<p>If <code>true</code>, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If <code>false</code>, TextInput always asks to handle the input (except when disabled). The default value is <code>true</code>.</p> 389<table><thead><tr><th>Type<tbody><tr><td>bool</table> 390<hr> 391<h3 class="anchor anchorWithStickyNavbar_JmGV" id=rows-android><code>rows</code> <div class="label android">Android</div><a href=#rows-android class=hash-link aria-label="Direct link to rows-android" title="Direct link to rows-android">​</a></h3> 392<p>Sets the number of lines for a <code>TextInput</code>. Use it with multiline set to <code>true</code> to be able to fill the lines.</p> 393<table><thead><tr><th>Type<tbody><tr><td>number</table> 394<hr> 395<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrollenabled-ios><code>scrollEnabled</code> <div class="label ios">iOS</div><a href=#scrollenabled-ios class=hash-link aria-label="Direct link to scrollenabled-ios" title="Direct link to scrollenabled-ios">​</a></h3> 396<p>If <code>false</code>, scrolling of the text view will be disabled. The default value is <code>true</code>. Only works with <code>multiline={true}</code>.</p> 397<table><thead><tr><th>Type<tbody><tr><td>bool</table> 398<hr> 399<h3 class="anchor anchorWithStickyNavbar_JmGV" id=securetextentry><code>secureTextEntry</code><a href=#securetextentry class=hash-link aria-label="Direct link to securetextentry" title="Direct link to securetextentry">​</a></h3> 400<p>If <code>true</code>, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is <code>false</code>. Does not work with <code>multiline={true}</code>.</p> 401<table><thead><tr><th>Type<tbody><tr><td>bool</table> 402<hr> 403<h3 class="anchor anchorWithStickyNavbar_JmGV" id=selection><code>selection</code><a href=#selection class=hash-link aria-label="Direct link to selection" title="Direct link to selection">​</a></h3> 404<p>The start and end of the text input's selection. Set start and end to the same value to position the cursor.</p> 405<table><thead><tr><th>Type<tbody><tr><td>object: <code>{start: number,end: number}</code></table> 406<hr> 407<h3 class="anchor anchorWithStickyNavbar_JmGV" id=selectioncolor><code>selectionColor</code><a href=#selectioncolor class=hash-link aria-label="Direct link to selectioncolor" title="Direct link to selectioncolor">​</a></h3> 408<p>The highlight, selection handle and cursor color of the text input.</p> 409<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table> 410<hr> 411<h3 class="anchor anchorWithStickyNavbar_JmGV" id=selectionhandlecolor-android><code>selectionHandleColor</code> <div class="label android">Android</div><a href=#selectionhandlecolor-android class=hash-link aria-label="Direct link to selectionhandlecolor-android" title="Direct link to selectionhandlecolor-android">​</a></h3> 412<p>Sets the color of the selection handle. Unlike <code>selectionColor</code>, it allows the selection handle color to be customized independently of the selection's color.</p> 413<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table> 414<hr> 415<h3 class="anchor anchorWithStickyNavbar_JmGV" id=selecttextonfocus><code>selectTextOnFocus</code><a href=#selecttextonfocus class=hash-link aria-label="Direct link to selecttextonfocus" title="Direct link to selecttextonfocus">​</a></h3> 416<p>If <code>true</code>, all text will automatically be selected on focus.</p> 417<table><thead><tr><th>Type<tbody><tr><td>bool</table> 418<hr> 419<h3 class="anchor anchorWithStickyNavbar_JmGV" id=showsoftinputonfocus><code>showSoftInputOnFocus</code><a href=#showsoftinputonfocus class=hash-link aria-label="Direct link to showsoftinputonfocus" title="Direct link to showsoftinputonfocus">​</a></h3> 420<p>When <code>false</code>, it will prevent the soft keyboard from showing when the field is focused. The default value is <code>true</code>.</p> 421<table><thead><tr><th>Type<tbody><tr><td>bool</table> 422<hr> 423<h3 class="anchor anchorWithStickyNavbar_JmGV" id=spellcheck-ios><code>spellCheck</code> <div class="label ios">iOS</div><a href=#spellcheck-ios class=hash-link aria-label="Direct link to spellcheck-ios" title="Direct link to spellcheck-ios">​</a></h3> 424<p>If <code>false</code>, disables spell-check style (i.e. red underlines). The default value is inherited from <code>autoCorrect</code>.</p> 425<table><thead><tr><th>Type<tbody><tr><td>bool</table> 426<hr> 427<h3 class="anchor anchorWithStickyNavbar_JmGV" id=submitbehavior><code>submitBehavior</code><a href=#submitbehavior class=hash-link aria-label="Direct link to submitbehavior" title="Direct link to submitbehavior">​</a></h3> 428<p>When the return key is pressed,</p> 429<p>For single line inputs:</p> 430<ul> 431<li><code>'newline'</code> defaults to <code>'blurAndSubmit'</code></li> 432<li><code>undefined</code> defaults to <code>'blurAndSubmit'</code></li> 433</ul> 434<p>For multiline inputs:</p> 435<ul> 436<li><code>'newline'</code> adds a newline</li> 437<li><code>undefined</code> defaults to <code>'newline'</code></li> 438</ul> 439<p>For both single line and multiline inputs:</p> 440<ul> 441<li><code>'submit'</code> will only send a submit event and not blur the input</li> 442<li><code>'blurAndSubmit</code>' will both blur the input and send a submit event</li> 443</ul> 444<table><thead><tr><th>Type<tbody><tr><td>enum('submit', 'blurAndSubmit', 'newline')</table> 445<hr> 446<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textalign><code>textAlign</code><a href=#textalign class=hash-link aria-label="Direct link to textalign" title="Direct link to textalign">​</a></h3> 447<p>Align the input text to the left, center, or right sides of the input field.</p> 448<p>Possible values for <code>textAlign</code> are:</p> 449<ul> 450<li><code>left</code></li> 451<li><code>center</code></li> 452<li><code>right</code></li> 453</ul> 454<table><thead><tr><th>Type<tbody><tr><td>enum('left', 'center', 'right')</table> 455<hr> 456<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textcontenttype-ios><code>textContentType</code> <div class="label ios">iOS</div><a href=#textcontenttype-ios class=hash-link aria-label="Direct link to textcontenttype-ios" title="Direct link to textcontenttype-ios">​</a></h3> 457<p>Give the keyboard and the system information about the expected semantic meaning for the content that users enter.</p> 458<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p><a href=#autocomplete><code>autoComplete</code></a>, provides the same functionality and is available for all platforms. You can use <a href=/docs/next/platform#select><code>Platform.select</code></a> for differing platform behaviors.<p>Avoid using both <code>textContentType</code> and <code>autoComplete</code>. For backwards compatibility, <code>textContentType</code> takes precedence when both properties are set.</div></div> 459<p>You can set <code>textContentType</code> to <code>username</code> or <code>password</code> to enable autofill of login details from the device keychain.</p> 460<p><code>newPassword</code> can be used to indicate a new password input the user may want to save in the keychain, and <code>oneTimeCode</code> can be used to indicate that a field can be autofilled by a code arriving in an SMS.</p> 461<p>To disable autofill, set <code>textContentType</code> to <code>none</code>.</p> 462<p>Possible values for <code>textContentType</code> are:</p> 463<ul> 464<li><code>none</code></li> 465<li><code>addressCity</code></li> 466<li><code>addressCityAndState</code></li> 467<li><code>addressState</code></li> 468<li><code>birthdate</code> (iOS 17+)</li> 469<li><code>birthdateDay</code> (iOS 17+)</li> 470<li><code>birthdateMonth</code> (iOS 17+)</li> 471<li><code>birthdateYear</code> (iOS 17+)</li> 472<li><code>countryName</code></li> 473<li><code>creditCardExpiration</code> (iOS 17+)</li> 474<li><code>creditCardExpirationMonth</code> (iOS 17+)</li> 475<li><code>creditCardExpirationYear</code> (iOS 17+)</li> 476<li><code>creditCardFamilyName</code> (iOS 17+)</li> 477<li><code>creditCardGivenName</code> (iOS 17+)</li> 478<li><code>creditCardMiddleName</code> (iOS 17+)</li> 479<li><code>creditCardName</code> (iOS 17+)</li> 480<li><code>creditCardNumber</code></li> 481<li><code>creditCardSecurityCode</code> (iOS 17+)</li> 482<li><code>creditCardType</code> (iOS 17+)</li> 483<li><code>emailAddress</code></li> 484<li><code>familyName</code></li> 485<li><code>fullStreetAddress</code></li> 486<li><code>givenName</code></li> 487<li><code>jobTitle</code></li> 488<li><code>location</code></li> 489<li><code>middleName</code></li> 490<li><code>name</code></li> 491<li><code>namePrefix</code></li> 492<li><code>nameSuffix</code></li> 493<li><code>newPassword</code></li> 494<li><code>nickname</code></li> 495<li><code>oneTimeCode</code></li> 496<li><code>organizationName</code></li> 497<li><code>password</code></li> 498<li><code>postalCode</code></li> 499<li><code>streetAddressLine1</code></li> 500<li><code>streetAddressLine2</code></li> 501<li><code>sublocality</code></li> 502<li><code>telephoneNumber</code></li> 503<li><code>URL</code></li> 504<li><code>username</code></li> 505</ul> 506<table><thead><tr><th>Type<tbody><tr><td>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')</table> 507<hr> 508<h3 class="anchor anchorWithStickyNavbar_JmGV" id=passwordrules-ios><code>passwordRules</code> <div class="label ios">iOS</div><a href=#passwordrules-ios class=hash-link aria-label="Direct link to passwordrules-ios" title="Direct link to passwordrules-ios">​</a></h3> 509<p>When using <code>textContentType</code> as <code>newPassword</code> on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for <code>PasswordRules</code> take a look to the <a href=https://developer.apple.com/password-rules/ target=_blank rel="noopener noreferrer">Apple Docs</a>.</p> 510<blockquote> 511<p>If passwords generation dialog doesn't appear please make sure that:</p> 512<ul> 513<li>AutoFill is enabled: <strong>Settings</strong> → <strong>Passwords & Accounts</strong> → toggle "On" the <strong>AutoFill Passwords</strong>,</li> 514<li>iCloud Keychain is used: <strong>Settings</strong> → <strong>Apple ID</strong> → <strong>iCloud</strong> → <strong>Keychain</strong> → toggle "On" the <strong>iCloud Keychain</strong>.</li> 515</ul> 516</blockquote> 517<table><thead><tr><th>Type<tbody><tr><td>string</table> 518<hr> 519<h3 class="anchor anchorWithStickyNavbar_JmGV" id=style><code>style</code><a href=#style class=hash-link aria-label="Direct link to style" title="Direct link to style">​</a></h3> 520<p>Note that not all Text styles are supported, an incomplete list of what is not supported includes:</p> 521<ul> 522<li><code>borderLeftWidth</code></li> 523<li><code>borderTopWidth</code></li> 524<li><code>borderRightWidth</code></li> 525<li><code>borderBottomWidth</code></li> 526<li><code>borderTopLeftRadius</code></li> 527<li><code>borderTopRightRadius</code></li> 528<li><code>borderBottomRightRadius</code></li> 529<li><code>borderBottomLeftRadius</code></li> 530</ul> 531<p><a href=/docs/style>Styles</a></p> 532<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/text#style>Text</a></table> 533<hr> 534<h3 class="anchor anchorWithStickyNavbar_JmGV" id=textbreakstrategy-android><code>textBreakStrategy</code> <div class="label android">Android</div><a href=#textbreakstrategy-android class=hash-link aria-label="Direct link to textbreakstrategy-android" title="Direct link to textbreakstrategy-android">​</a></h3> 535<p>Set text break strategy on Android API Level 23+, possible values are <code>simple</code>, <code>highQuality</code>, <code>balanced</code> The default value is <code>highQuality</code>.</p> 536<table><thead><tr><th>Type<tbody><tr><td>enum('simple', 'highQuality', 'balanced')</table> 537<hr> 538<h3 class="anchor anchorWithStickyNavbar_JmGV" id=underlinecolorandroid-android><code>underlineColorAndroid</code> <div class="label android">Android</div><a href=#underlinecolorandroid-android class=hash-link aria-label="Direct link to underlinecolorandroid-android" title="Direct link to underlinecolorandroid-android">​</a></h3> 539<p>The color of the <code>TextInput</code> underline.</p> 540<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table> 541<hr> 542<h3 class="anchor anchorWithStickyNavbar_JmGV" id=value><code>value</code><a href=#value class=hash-link aria-label="Direct link to value" title="Direct link to value">​</a></h3> 543<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p> 544<table><thead><tr><th>Type<tbody><tr><td>string</table> 545<hr> 546<h3 class="anchor anchorWithStickyNavbar_JmGV" id=linebreakstrategyios-ios><code>lineBreakStrategyIOS</code> <div class="label ios">iOS</div><a href=#linebreakstrategyios-ios class=hash-link aria-label="Direct link to linebreakstrategyios-ios" title="Direct link to linebreakstrategyios-ios">​</a></h3> 547<p>Set line break strategy on iOS 14+. Possible values are <code>none</code>, <code>standard</code>, <code>hangul-word</code> and <code>push-out</code>.</p> 548<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'none'</code>, <code>'standard'</code>, <code>'hangul-word'</code>, <code>'push-out'</code>)<td><code>'none'</code></table> 549<hr> 550<h3 class="anchor anchorWithStickyNavbar_JmGV" id=disablekeyboardshortcuts-ios><code>disableKeyboardShortcuts</code> <div class="label ios">iOS</div><a href=#disablekeyboardshortcuts-ios class=hash-link aria-label="Direct link to disablekeyboardshortcuts-ios" title="Direct link to disablekeyboardshortcuts-ios">​</a></h3> 551<p>If <code>true</code>, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is <code>false</code>.</p> 552<table><thead><tr><th>Type<tbody><tr><td>bool</table> 553<h2 class="anchor anchorWithStickyNavbar_JmGV" id=methods>Methods<a href=#methods class=hash-link aria-label="Direct link to Methods" title="Direct link to Methods">​</a></h2> 554<h3 class="anchor anchorWithStickyNavbar_JmGV" id=focus><code>.focus()</code><a href=#focus class=hash-link aria-label="Direct link to focus" title="Direct link to focus">​</a></h3> 555<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>focus</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 556<p>Makes the native input request focus.</p> 557<h3 class="anchor anchorWithStickyNavbar_JmGV" id=blur><code>.blur()</code><a href=#blur class=hash-link aria-label="Direct link to blur" title="Direct link to blur">​</a></h3> 558<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>blur</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 559<p>Makes the native input lose focus.</p> 560<h3 class="anchor anchorWithStickyNavbar_JmGV" id=clear><code>clear()</code><a href=#clear class=hash-link aria-label="Direct link to clear" title="Direct link to clear">​</a></h3> 561<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>clear</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 562<p>Removes all text from the <code>TextInput</code>.</p> 563<hr> 564<h3 class="anchor anchorWithStickyNavbar_JmGV" id=isfocused><code>isFocused()</code><a href=#isfocused class=hash-link aria-label="Direct link to isfocused" title="Direct link to isfocused">​</a></h3> 565<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>isFocused</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>boolean</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 566<p>Returns <code>true</code> if the input is currently focused; <code>false</code> otherwise.</p> 567<h1>Known issues</h1> 568<ul> 569<li><a href=https://github.com/facebook/react-native/issues/19096 target=_blank rel="noopener noreferrer">react-native#19096</a>: Doesn't support Android's <code>onKeyPreIme</code>.</li> 570<li><a href=https://github.com/facebook/react-native/issues/19366 target=_blank rel="noopener noreferrer">react-native#19366</a>: Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.</li> 571<li><a href=https://github.com/facebook/react-native/issues/26799 target=_blank rel="noopener noreferrer">react-native#26799</a>: Doesn't support Android's <code>secureTextEntry</code> when <code>keyboardType="email-address"</code> or <code>keyboardType="phone-pad"</code>.</li> 572</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/textinput.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for next release</a><a href=https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/textinput.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for current release</a></div><div class=lastUpdated_VsjB><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2025-06-03T13:06:33.000Z itemprop=dateModified>Jun 3, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/text><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Text</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/touchablehighlight><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>TouchableHighlight</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#props class="table-of-contents__link toc-highlight">Props</a><ul><li><a href=#view-props class="table-of-contents__link toc-highlight">View Props</a><li><a href=#allowfontscaling class="table-of-contents__link toc-highlight"><code>allowFontScaling</code></a><li><a href=#autocapitalize class="table-of-contents__link toc-highlight"><code>autoCapitalize</code></a><li><a href=#autocomplete class="table-of-contents__link toc-highlight"><code>autoComplete</code></a><li><a href=#autocorrect class="table-of-contents__link toc-highlight"><code>autoCorrect</code></a><li><a href=#autofocus class="table-of-contents__link toc-highlight"><code>autoFocus</code></a><li><a href=#bluronsubmit class="table-of-contents__link toc-highlight"><code>blurOnSubmit</code></a><li><a href=#carethidden class="table-of-contents__link toc-highlight"><code>caretHidden</code></a><li><a href=#clearbuttonmode-ios class="table-of-contents__link toc-highlight"><code>clearButtonMode</code> <div class="label ios">iOS</div></a><li><a href=#cleartextonfocus-ios class="table-of-contents__link toc-highlight"><code>clearTextOnFocus</code> <div class="label ios">iOS</div></a><li><a href=#contextmenuhidden class="table-of-contents__link toc-highlight"><code>contextMenuHidden</code></a><li><a href=#datadetectortypes-ios class="table-of-contents__link toc-highlight"><code>dataDetectorTypes</code> <div class="label ios">iOS</div></a><li><a href=#defaultvalue class="table-of-contents__link toc-highlight"><code>defaultValue</code></a><li><a href=#cursorcolor-android class="table-of-contents__link toc-highlight"><code>cursorColor</code> <div class="label android">Android</div></a><li><a href=#disablefullscreenui-android class="table-of-contents__link toc-highlight"><code>disableFullscreenUI</code> <div class="label android">Android</div></a><li><a href=#editable class="table-of-contents__link toc-highlight"><code>editable</code></a><li><a href=#enablesreturnkeyautomatically-ios class="table-of-contents__link toc-highlight"><code>enablesReturnKeyAutomatically</code> <div class="label ios">iOS</div></a><li><a href=#enterkeyhint class="table-of-contents__link toc-highlight"><code>enterKeyHint</code></a><li><a href=#importantforautofill-android class="table-of-contents__link toc-highlight"><code>importantForAutofill</code> <div class="label android">Android</div></a><li><a href=#inlineimageleft-android class="table-of-contents__link toc-highlight"><code>inlineImageLeft</code> <div class="label android">Android</div></a><li><a href=#inlineimagepadding-android class="table-of-contents__link toc-highlight"><code>inlineImagePadding</code> <div class="label android">Android</div></a><li><a href=#inputaccessoryviewid-ios class="table-of-contents__link toc-highlight"><code>inputAccessoryViewID</code> <div class="label ios">iOS</div></a><li><a href=#inputaccessoryviewbuttonlabel-ios class="table-of-contents__link toc-highlight"><code>inputAccessoryViewButtonLabel</code> <div class="label ios">iOS</div></a><li><a href=#inputmode class="table-of-contents__link toc-highlight"><code>inputMode</code></a><li><a href=#keyboardappearance-ios class="table-of-contents__link toc-highlight"><code>keyboardAppearance</code> <div class="label ios">iOS</div></a><li><a href=#keyboardtype class="table-of-contents__link toc-highlight"><code>keyboardType</code></a><li><a href=#maxfontsizemultiplier class="table-of-contents__link toc-highlight"><code>maxFontSizeMultiplier</code></a><li><a href=#maxlength class="table-of-contents__link toc-highlight"><code>maxLength</code></a><li><a href=#multiline class="table-of-contents__link toc-highlight"><code>multiline</code></a><li><a href=#numberoflines class="table-of-contents__link toc-highlight"><code>numberOfLines</code></a><li><a href=#onblur class="table-of-contents__link toc-highlight"><code>onBlur</code></a><li><a href=#onchange class="table-of-contents__link toc-highlight"><code>onChange</code></a><li><a href=#onchangetext class="table-of-contents__link toc-highlight"><code>onChangeText</code></a><li><a href=#oncontentsizechange class="table-of-contents__link toc-highlight"><code>onContentSizeChange</code></a><li><a href=#onendediting class="table-of-contents__link toc-highlight"><code>onEndEditing</code></a><li><a href=#onpressin class="table-of-contents__link toc-highlight"><code>onPressIn</code></a><li><a href=#onpressout class="table-of-contents__link toc-highlight"><code>onPressOut</code></a><li><a href=#onfocus class="table-of-contents__link toc-highlight"><code>onFocus</code></a><li><a href=#onkeypress class="table-of-contents__link toc-highlight"><code>onKeyPress</code></a><li><a href=#onlayout class="table-of-contents__link toc-highlight"><code>onLayout</code></a><li><a href=#onscroll class="table-of-contents__link toc-highlight"><code>onScroll</code></a><li><a href=#onselectionchange class="table-of-contents__link toc-highlight"><code>onSelectionChange</code></a><li><a href=#onsubmitediting class="table-of-contents__link toc-highlight"><code>onSubmitEditing</code></a><li><a href=#placeholder class="table-of-contents__link toc-highlight"><code>placeholder</code></a><li><a href=#placeholdertextcolor class="table-of-contents__link toc-highlight"><code>placeholderTextColor</code></a><li><a href=#readonly class="table-of-contents__link toc-highlight"><code>readOnly</code></a><li><a href=#returnkeylabel-android class="table-of-contents__link toc-highlight"><code>returnKeyLabel</code> <div class="label android">Android</div></a><li><a href=#returnkeytype class="table-of-contents__link toc-highlight"><code>returnKeyType</code></a><li><a href=#rejectrespondertermination-ios class="table-of-contents__link toc-highlight"><code>rejectResponderTermination</code> <div class="label ios">iOS</div></a><li><a href=#rows-android class="table-of-contents__link toc-highlight"><code>rows</code> <div class="label android">Android</div></a><li><a href=#scrollenabled-ios class="table-of-contents__link toc-highlight"><code>scrollEnabled</code> <div class="label ios">iOS</div></a><li><a href=#securetextentry class="table-of-contents__link toc-highlight"><code>secureTextEntry</code></a><li><a href=#selection class="table-of-contents__link toc-highlight"><code>selection</code></a><li><a href=#selectioncolor class="table-of-contents__link toc-highlight"><code>selectionColor</code></a><li><a href=#selectionhandlecolor-android class="table-of-contents__link toc-highlight"><code>selectionHandleColor</code> <div class="label android">Android</div></a><li><a href=#selecttextonfocus class="table-of-contents__link toc-highlight"><code>selectTextOnFocus</code></a><li><a href=#showsoftinputonfocus class="table-of-contents__link toc-highlight"><code>showSoftInputOnFocus</code></a><li><a href=#spellcheck-ios class="table-of-contents__link toc-highlight"><code>spellCheck</code> <div class="label ios">iOS</div></a><li><a href=#submitbehavior class="table-of-contents__link toc-highlight"><code>submitBehavior</code></a><li><a href=#textalign class="table-of-contents__link toc-highlight"><code>textAlign</code></a><li><a href=#textcontenttype-ios class="table-of-contents__link toc-highlight"><code>textContentType</code> <div class="label ios">iOS</div></a><li><a href=#passwordrules-ios class="table-of-contents__link toc-highlight"><code>passwordRules</code> <div class="label ios">iOS</div></a><li><a href=#style class="table-of-contents__link toc-highlight"><code>style</code></a><li><a href=#textbreakstrategy-android class="table-of-contents__link toc-highlight"><code>textBreakStrategy</code> <div class="label android">Android</div></a><li><a href=#underlinecolorandroid-android class="table-of-contents__link toc-highlight"><code>underlineColorAndroid</code> <div class="label android">Android</div></a><li><a href=#value class="table-of-contents__link toc-highlight"><code>value</code></a><li><a href=#linebreakstrategyios-ios class="table-of-contents__link toc-highlight"><code>lineBreakStrategyIOS</code> <div class="label ios">iOS</div></a><li><a href=#disablekeyboardshortcuts-ios class="table-of-contents__link toc-highlight"><code>disableKeyboardShortcuts</code> <div class="label ios">iOS</div></a></ul><li><a href=#methods class="table-of-contents__link toc-highlight">Methods</a><ul><li><a href=#focus class="table-of-contents__link toc-highlight"><code>.focus()</code></a><li><a href=#blur class="table-of-contents__link toc-highlight"><code>.blur()</code></a><li><a href=#clear class="table-of-contents__link toc-highlight"><code>clear()</code></a><li><a href=#isfocused class="table-of-contents__link toc-highlight"><code>isFocused()</code></a></ul></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>