mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
730 lines
82 KiB
HTML
730 lines
82 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>TextInput · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta 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 name="docsearch:version" content="0.48"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="TextInput · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta 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."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
|
||
ga('create', 'UA-41298772-2', 'auto');
|
||
ga('send', 'pageview');
|
||
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.48</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/react-native/docs/0.48/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Components</span></h2></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">The Basics</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/tutorial">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/props">Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/state">State</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/style">Style</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/more-resources">More Resources</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Guides</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/components-and-apis">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/images">Images</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/animations">Animations</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/accessibility">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/improvingux">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/timers">Timers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/performance">Performance</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/gesture-responder-system">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/javascript-environment">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/direct-manipulation">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/colors">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/running-on-device">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/upgrading">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/troubleshooting">Troubleshooting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Guides (iOS)</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/native-modules-ios">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/native-components-ios">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/linking-libraries-ios">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/running-on-simulator-ios">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/communication-ios">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/building-for-apple-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/app-extensions">App Extensions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Guides (Android)</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/native-modules-android">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/native-components-android">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/headless-js-android">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/signed-apk-android">Generating Signed APK</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Contributing</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/contributing">How to Contribute</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/maintainers">What to Expect from Maintainers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/building-from-source">Building React Native from source</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/testing">Testing your Changes</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/understanding-cli">Understanding the CLI</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Components</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/activityindicator">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/button">Button</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/datepickerios">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/flatlist">FlatList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/image">Image</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/keyboardavoidingview">KeyboardAvoidingView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/listview">ListView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/maskedviewios">MaskedViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/navigatorios">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/picker">Picker</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/pickerios">PickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/progressbarandroid">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/progressviewios">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/refreshcontrol">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/sectionlist">SectionList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/segmentedcontrolios">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/slider">Slider</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/snapshotviewios">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/statusbar">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/tabbarios">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/tabbarios-item">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/text">Text</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/react-native/docs/0.48/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/toolbarandroid">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/touchablenativefeedback">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/view">View</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/viewpagerandroid">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/virtualizedlist">VirtualizedList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/webview">WebView</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">APIs</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/accessibilityinfo">AccessibilityInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/alert">Alert</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/alertios">AlertIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/appregistry">AppRegistry</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/appstate">AppState</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/asyncstorage">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/backandroid">BackAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/backhandler">BackHandler</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/cameraroll">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/clipboard">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/datepickerandroid">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/geolocation">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/imageeditor">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/imagepickerios">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/imagestore">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/keyboard">Keyboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/layoutanimation">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/linking">Linking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/listviewdatasource">ListViewDataSource</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/netinfo">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/panresponder">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/permissionsandroid">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/pushnotificationios">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/settings">Settings</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/shadow-props">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/share">Share</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/statusbarios">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/systrace">Systrace</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/timepickerandroid">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/toastandroid">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/vibration">Vibration</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/vibrationios">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.48/view-style-props">View Style Props</a></li></ul></div></div></section></div><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
const headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
if (event.target.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
}
|
||
}, false);
|
||
|
||
function createToggler(togglerSelector, targetSelector, className) {
|
||
var toggler = document.querySelector(togglerSelector);
|
||
var target = document.querySelector(targetSelector);
|
||
|
||
toggler.onclick = function(event) {
|
||
event.preventDefault();
|
||
|
||
target.classList.toggle(className);
|
||
};
|
||
}
|
||
});
|
||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/textinput.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">TextInput</h1></header><article><div><span><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>
|
||
<p>The simplest 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 simple example:</p>
|
||
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||
<span class="hljs-keyword">import</span> { AppRegistry, TextInput } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||
|
||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UselessTextInput</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||
<span class="hljs-keyword">constructor</span>(props) {
|
||
<span class="hljs-keyword">super</span>(props);
|
||
<span class="hljs-keyword">this</span>.state = { <span class="hljs-attr">text</span>: <span class="hljs-string">'Useless Placeholder'</span> };
|
||
}
|
||
|
||
render() {
|
||
<span class="hljs-keyword">return</span> (
|
||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">TextInput</span>
|
||
<span class="hljs-attr">style</span>=<span class="hljs-string">{{height:</span> <span class="hljs-attr">40</span>, <span class="hljs-attr">borderColor:</span> '<span class="hljs-attr">gray</span>', <span class="hljs-attr">borderWidth:</span> <span class="hljs-attr">1</span>}}
|
||
<span class="hljs-attr">onChangeText</span>=<span class="hljs-string">{(text)</span> =></span> this.setState({text})}
|
||
value={this.state.text}
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
|
||
// skip this line if using Create React Native App
|
||
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
|
||
</span></code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20TextInput%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20UselessTextInput%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%20text%3A%20'Useless%20Placeholder'%20%7D%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%2C%20borderColor%3A%20'gray'%2C%20borderWidth%3A%201%7D%7D%0A%20%20%20%20%20%20%20%20onChangeText%3D%7B(text)%20%3D%3E%20this.setState(%7Btext%7D)%7D%0A%20%20%20%20%20%20%20%20value%3D%7Bthis.state.text%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20UselessTextInput)%3B%0A" frame-border="0"></iframe></div>
|
||
|
||
<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=false</code>. To achieve the same effect, you can wrap your <code>TextInput</code> in a <code>View</code>:</p>
|
||
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||
<span class="hljs-keyword">import</span> { AppRegistry, View, TextInput } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||
|
||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UselessTextInput</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||
render() {
|
||
<span class="hljs-keyword">return</span> (
|
||
<TextInput
|
||
{...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
|
||
editable = {true}
|
||
maxLength = {40}
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default class UselessTextInputMultiline extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
text: 'Useless Multiline Placeholder',
|
||
};
|
||
}
|
||
|
||
// If you type something in the text box that is a color, the background will change to that
|
||
// color.
|
||
render() {
|
||
return (
|
||
<View style={{
|
||
backgroundColor: this.state.text,
|
||
borderBottomColor: '#000000',
|
||
borderBottomWidth: 1 }}
|
||
>
|
||
<UselessTextInput
|
||
multiline = {true}
|
||
numberOfLines = {4}
|
||
onChangeText={(text) => this.setState({text})}
|
||
value={this.state.text}
|
||
/>
|
||
</View>
|
||
);
|
||
}
|
||
}
|
||
|
||
// skip these lines if using Create React Native App
|
||
AppRegistry.registerComponent(
|
||
'AwesomeProject',
|
||
() => UselessTextInputMultiline
|
||
);
|
||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%2C%20TextInput%20%7D%20from%20'react-native'%3B%0A%0Aclass%20UselessTextInput%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20%7B...this.props%7D%20%2F%2F%20Inherit%20any%20props%20passed%20to%20it%3B%20e.g.%2C%20multiline%2C%20numberOfLines%20below%0A%20%20%20%20%20%20%20%20editable%20%3D%20%7Btrue%7D%0A%20%20%20%20%20%20%20%20maxLength%20%3D%20%7B40%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20UselessTextInputMultiline%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20text%3A%20'Useless%20Multiline%20Placeholder'%2C%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%0A%20%20%2F%2F%20If%20you%20type%20something%20in%20the%20text%20box%20that%20is%20a%20color%2C%20the%20background%20will%20change%20to%20that%0A%20%20%2F%2F%20color.%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20backgroundColor%3A%20this.state.text%2C%0A%20%20%20%20%20%20%20borderBottomColor%3A%20'%23000000'%2C%0A%20%20%20%20%20%20%20borderBottomWidth%3A%201%20%7D%7D%0A%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%3CUselessTextInput%0A%20%20%20%20%20%20%20%20%20multiline%20%3D%20%7Btrue%7D%0A%20%20%20%20%20%20%20%20%20numberOfLines%20%3D%20%7B4%7D%0A%20%20%20%20%20%20%20%20%20onChangeText%3D%7B(text)%20%3D%3E%20this.setState(%7Btext%7D)%7D%0A%20%20%20%20%20%20%20%20%20value%3D%7Bthis.state.text%7D%0A%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20'AwesomeProject'%2C%0A%20()%20%3D%3E%20UselessTextInputMultiline%0A)%3B%0A" frame-border="0"></iframe></div>
|
||
|
||
<p><code>TextInput</code> has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which 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>
|
||
<p>Note that on Android performing text selection in input can change app's activity <code>windowSoftInputMode</code> param to <code>adjustResize</code>. This may cause issues with components that have position: 'absolute' while 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">https://developer.android.com/guide/topics/manifest/activity-element.html</a> ) or control this param programmatically with native code.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
|
||
<ul>
|
||
<li><a href="/react-native/docs/0.48/view#props">View props...</a></li>
|
||
</ul>
|
||
<ul>
|
||
<li><a href="/react-native/docs/0.48/textinput#returnkeytype"><code>returnKeyType</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#autocapitalize"><code>autoCapitalize</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#autofocus"><code>autoFocus</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#bluronsubmit"><code>blurOnSubmit</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#carethidden"><code>caretHidden</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#defaultvalue"><code>defaultValue</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#editable"><code>editable</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#keyboardtype"><code>keyboardType</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#maxlength"><code>maxLength</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#multiline"><code>multiline</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#onblur"><code>onBlur</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#onchange"><code>onChange</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#onchangetext"><code>onChangeText</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#oncontentsizechange"><code>onContentSizeChange</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#onendediting"><code>onEndEditing</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#onfocus"><code>onFocus</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#onlayout"><code>onLayout</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#onscroll"><code>onScroll</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#onselectionchange"><code>onSelectionChange</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#onsubmitediting"><code>onSubmitEditing</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#placeholder"><code>placeholder</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#placeholdertextcolor"><code>placeholderTextColor</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#autocorrect"><code>autoCorrect</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#securetextentry"><code>secureTextEntry</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#selecttextonfocus"><code>selectTextOnFocus</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#selection"><code>selection</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#selectioncolor"><code>selectionColor</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#style"><code>style</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#value"><code>value</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#disablefullscreenui"><code>disableFullscreenUI</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#inlineimageleft"><code>inlineImageLeft</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#inlineimagepadding"><code>inlineImagePadding</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#numberoflines"><code>numberOfLines</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#returnkeylabel"><code>returnKeyLabel</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#textbreakstrategy"><code>textBreakStrategy</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#underlinecolorandroid"><code>underlineColorAndroid</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#clearbuttonmode"><code>clearButtonMode</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#cleartextonfocus"><code>clearTextOnFocus</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#datadetectortypes"><code>dataDetectorTypes</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#enablesreturnkeyautomatically"><code>enablesReturnKeyAutomatically</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#keyboardappearance"><code>keyboardAppearance</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#onkeypress"><code>onKeyPress</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#selectionstate"><code>selectionState</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#spellcheck"><code>spellCheck</code></a></li>
|
||
</ul>
|
||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||
<ul>
|
||
<li><a href="/react-native/docs/0.48/textinput#isfocused"><code>isFocused</code></a></li>
|
||
<li><a href="/react-native/docs/0.48/textinput#clear"><code>clear</code></a></li>
|
||
</ul>
|
||
<hr>
|
||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||
<h2><a class="anchor" aria-hidden="true" id="props-1"></a><a href="#props-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h2>
|
||
<h3><a class="anchor" aria-hidden="true" id="returnkeytype"></a><a href="#returnkeytype" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>returnKeyType</code></h3>
|
||
<p>Determines how the return key should look. On Android you can also use <code>returnKeyLabel</code>.</p>
|
||
<p><em>Cross platform</em></p>
|
||
<p>The following values work across platforms:</p>
|
||
<ul>
|
||
<li><code>done</code></li>
|
||
<li><code>go</code></li>
|
||
<li><code>next</code></li>
|
||
<li><code>search</code></li>
|
||
<li><code>send</code></li>
|
||
</ul>
|
||
<p><em>Android Only</em></p>
|
||
<p>The following values work on Android only:</p>
|
||
<ul>
|
||
<li><code>none</code></li>
|
||
<li><code>previous</code></li>
|
||
</ul>
|
||
<p><em>iOS Only</em></p>
|
||
<p>The following values work on iOS only:</p>
|
||
<ul>
|
||
<li><code>default</code></li>
|
||
<li><code>emergency-call</code></li>
|
||
<li><code>google</code></li>
|
||
<li><code>join</code></li>
|
||
<li><code>route</code></li>
|
||
<li><code>yahoo</code></li>
|
||
</ul>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="autocapitalize"></a><a href="#autocapitalize" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>autoCapitalize</code></h3>
|
||
<p>Can tell <code>TextInput</code> to automatically capitalize certain characters.</p>
|
||
<ul>
|
||
<li><code>characters</code>: all characters.</li>
|
||
<li><code>words</code>: first letter of each word.</li>
|
||
<li><code>sentences</code>: first letter of each sentence (<em>default</em>).</li>
|
||
<li><code>none</code>: don't auto capitalize anything.</li>
|
||
</ul>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>enum('none', 'sentences', 'words', 'characters')</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="autofocus"></a><a href="#autofocus" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>autoFocus</code></h3>
|
||
<p>If <code>true</code>, focuses the input on <code>componentDidMount</code>. The default value is <code>false</code>.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>bool</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="bluronsubmit"></a><a href="#bluronsubmit" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>blurOnSubmit</code></h3>
|
||
<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>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>bool</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="carethidden"></a><a href="#carethidden" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>caretHidden</code></h3>
|
||
<p>If <code>true</code>, caret is hidden. The default value is <code>false</code>.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>bool</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="defaultvalue"></a><a href="#defaultvalue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultValue</code></h3>
|
||
<p>Provides an initial value that will change when the user starts typing. Useful for simple 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>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>string</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="editable"></a><a href="#editable" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>editable</code></h3>
|
||
<p>If <code>false</code>, text is not editable. The default value is <code>true</code>.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>bool</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="keyboardtype"></a><a href="#keyboardtype" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>keyboardType</code></h3>
|
||
<p>Determines which keyboard to open, e.g.<code>numeric</code>.</p>
|
||
<p>The following values work across platforms:</p>
|
||
<ul>
|
||
<li><code>default</code></li>
|
||
<li><code>numeric</code></li>
|
||
<li><code>email-address</code></li>
|
||
<li><code>phone-pad</code></li>
|
||
</ul>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<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')</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="maxlength"></a><a href="#maxlength" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>maxLength</code></h3>
|
||
<p>Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>number</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="multiline"></a><a href="#multiline" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>multiline</code></h3>
|
||
<p>If <code>true</code>, the text input can be multiple lines. The default value is <code>false</code>.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>bool</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="onblur"></a><a href="#onblur" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onBlur</code></h3>
|
||
<p>Callback that is called when the text input is blurred.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>function</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="onchange"></a><a href="#onchange" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onChange</code></h3>
|
||
<p>Callback that is called when the text input's text changes.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>function</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="onchangetext"></a><a href="#onchangetext" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onChangeText</code></h3>
|
||
<p>Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>function</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="oncontentsizechange"></a><a href="#oncontentsizechange" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onContentSizeChange</code></h3>
|
||
<p>Callback that is called when the text input's content size changes. This will be called with <code>{ nativeEvent: { contentSize: { width, height } } }</code>.</p>
|
||
<p>Only called for multiline text inputs.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>function</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="onendediting"></a><a href="#onendediting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onEndEditing</code></h3>
|
||
<p>Callback that is called when text input ends.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>function</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="onfocus"></a><a href="#onfocus" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onFocus</code></h3>
|
||
<p>Callback that is called when the text input is focused.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>function</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="onlayout"></a><a href="#onlayout" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onLayout</code></h3>
|
||
<p>Invoked on mount and layout changes with <code>{x, y, width, height}</code>.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>function</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="onscroll"></a><a href="#onscroll" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onScroll</code></h3>
|
||
<p>Invoked on content scroll with <code>{ nativeEvent: { contentOffset: { x, y } } }</code>. May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>function</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="onselectionchange"></a><a href="#onselectionchange" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onSelectionChange</code></h3>
|
||
<p>Callback that is called when the text input selection is changed. This will be called with <code>{ nativeEvent: { selection: { start, end } } }</code>.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>function</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="onsubmitediting"></a><a href="#onsubmitediting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onSubmitEditing</code></h3>
|
||
<p>Callback that is called when the text input's submit button is pressed. Invalid if <code>multiline={true}</code> is specified.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>function</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="placeholder"></a><a href="#placeholder" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>placeholder</code></h3>
|
||
<p>The string that will be rendered before text input has been entered.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>node</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="placeholdertextcolor"></a><a href="#placeholdertextcolor" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>placeholderTextColor</code></h3>
|
||
<p>The text color of the placeholder string.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><a href="/react-native/docs/0.48/colors">color</a></td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="autocorrect"></a><a href="#autocorrect" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>autoCorrect</code></h3>
|
||
<p>If <code>false</code>, disables auto-correct. The default value is <code>true</code>.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>bool</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="securetextentry"></a><a href="#securetextentry" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>secureTextEntry</code></h3>
|
||
<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>.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>bool</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="selecttextonfocus"></a><a href="#selecttextonfocus" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>selectTextOnFocus</code></h3>
|
||
<p>If <code>true</code>, all text will automatically be selected on focus.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>bool</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="selection"></a><a href="#selection" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>selection</code></h3>
|
||
<p>The start and end of the text input's selection. Set start and end to the same value to position the cursor.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>object: {start: number,end: number}</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="selectioncolor"></a><a href="#selectioncolor" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>selectionColor</code></h3>
|
||
<p>The highlight and cursor color of the text input.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><a href="/react-native/docs/0.48/colors">color</a></td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="style"></a><a href="#style" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>style</code></h3>
|
||
<p>Note that not all Text styles are supported, see <a href="https://github.com/facebook/react-native/issues/7070">Issue#7070</a> for more detail.</p>
|
||
<p><a href="/react-native/docs/0.48/style">Styles</a></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><a href="/react-native/docs/0.48/text#style">Text</a></td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="value"></a><a href="#value" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>value</code></h3>
|
||
<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 simply setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>string</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="disablefullscreenui"></a><a href="#disablefullscreenui" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>disableFullscreenUI</code></h3>
|
||
<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>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>bool</td><td>No</td><td>Android</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="inlineimageleft"></a><a href="#inlineimageleft" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>inlineImageLeft</code></h3>
|
||
<p>If defined, the provided image resource will be rendered on the left.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>string</td><td>No</td><td>Android</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="inlineimagepadding"></a><a href="#inlineimagepadding" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>inlineImagePadding</code></h3>
|
||
<p>Padding between the inline image, if any, and the text input itself.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="numberoflines"></a><a href="#numberoflines" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>numberOfLines</code></h3>
|
||
<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>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="returnkeylabel"></a><a href="#returnkeylabel" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>returnKeyLabel</code></h3>
|
||
<p>Sets the return key to the label. Use it instead of <code>returnKeyType</code>.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>string</td><td>No</td><td>Android</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="textbreakstrategy"></a><a href="#textbreakstrategy" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>textBreakStrategy</code></h3>
|
||
<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>simple</code>.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>enum('simple', 'highQuality', 'balanced')</td><td>No</td><td>Android</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="underlinecolorandroid"></a><a href="#underlinecolorandroid" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>underlineColorAndroid</code></h3>
|
||
<p>The color of the <code>TextInput</code> underline.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><a href="/react-native/docs/0.48/colors">color</a></td><td>No</td><td>Android</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="clearbuttonmode"></a><a href="#clearbuttonmode" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>clearButtonMode</code></h3>
|
||
<p>When the clear button should appear on the right side of the text view.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>enum('never', 'while-editing', 'unless-editing', 'always')</td><td>No</td><td>iOS</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="cleartextonfocus"></a><a href="#cleartextonfocus" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>clearTextOnFocus</code></h3>
|
||
<p>If <code>true</code>, clears the text field automatically when editing begins.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="datadetectortypes"></a><a href="#datadetectortypes" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>dataDetectorTypes</code></h3>
|
||
<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>
|
||
<p>You can provide one type or an array of many types.</p>
|
||
<p>Possible values for <code>dataDetectorTypes</code> are:</p>
|
||
<ul>
|
||
<li><code>'phoneNumber'</code></li>
|
||
<li><code>'link'</code></li>
|
||
<li><code>'address'</code></li>
|
||
<li><code>'calendarEvent'</code></li>
|
||
<li><code>'none'</code></li>
|
||
<li><code>'all'</code></li>
|
||
</ul>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')</td><td>No</td><td>iOS</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="enablesreturnkeyautomatically"></a><a href="#enablesreturnkeyautomatically" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>enablesReturnKeyAutomatically</code></h3>
|
||
<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>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="keyboardappearance"></a><a href="#keyboardappearance" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>keyboardAppearance</code></h3>
|
||
<p>Determines the color of the keyboard.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>enum('default', 'light', 'dark')</td><td>No</td><td>iOS</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="onkeypress"></a><a href="#onkeypress" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onKeyPress</code></h3>
|
||
<p>Callback that is called when a key is pressed. This will be called with <code>{ nativeEvent: { key: keyValue } }</code> 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.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>function</td><td>No</td><td>iOS</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="selectionstate"></a><a href="#selectionstate" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>selectionState</code></h3>
|
||
<p>An instance of <code>DocumentSelectionState</code>, this is some state that is responsible for maintaining selection information for a document.</p>
|
||
<p>Some functionality that can be performed with this instance is:</p>
|
||
<ul>
|
||
<li><code>blur()</code></li>
|
||
<li><code>focus()</code></li>
|
||
<li><code>update()</code></li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>You can reference <code>DocumentSelectionState</code> in <a href="https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js"><code>vendor/document/selection/DocumentSelectionState.js</code></a></p>
|
||
</blockquote>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>DocumentSelectionState</td><td>No</td><td>iOS</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="spellcheck"></a><a href="#spellcheck" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>spellCheck</code></h3>
|
||
<p>If <code>false</code>, disables spell-check style (i.e. red underlines). The default value is inherited from <code>autoCorrect</code>.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||
<h3><a class="anchor" aria-hidden="true" id="isfocused"></a><a href="#isfocused" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isFocused()</code></h3>
|
||
<pre><code class="hljs css languages- javascript">isFocused():
|
||
</code></pre>
|
||
<p>Returns <code>true</code> if the input is currently focused; <code>false</code> otherwise.</p>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="clear"></a><a href="#clear" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>clear()</code></h3>
|
||
<pre><code class="hljs css languages- javascript">clear();
|
||
</code></pre>
|
||
<p>Removes all text from the <code>TextInput</code>.</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.48/text">← Text</a><a class="docs-next button" href="/react-native/docs/0.48/toolbarandroid">ToolbarAndroid →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||
var search = docsearch({
|
||
|
||
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
||
indexName: 'react-native-versions',
|
||
inputSelector: '#search_input_react',
|
||
algoliaOptions: {"facetFilters":["tags:0.48"],"hitsPerPage":5}
|
||
});
|
||
</script></body></html> |