Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
602d811d3b1987bc0f31dfcb3f2ee2f62f2dfefc
react-native/docs/direct-manipulation.html
T
Website Deployment Script 56421d76dd Deploy website 
Deploy website version based on c935904090
2018-07-04 17:16:16 +00:00

237 lines
50 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Direct Manipulation · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Direct Manipulation · 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="It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node."/><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.56</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/react-native/docs/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>Guides</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/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/tutorial">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/props">Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/state">State</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/style">Style</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/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/components-and-apis">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/images">Images</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/animations">Animations</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/accessibility">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/improvingux">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/timers">Timers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/performance">Performance</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/gesture-responder-system">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/javascript-environment">JavaScript Environment</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/react-native/docs/direct-manipulation">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/colors">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/building-for-apple-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/running-on-device">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/upgrading">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/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/native-modules-ios">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/native-components-ios">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/linking-libraries-ios">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/running-on-simulator-ios">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/communication-ios">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/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/native-modules-android">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/native-components-android">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/headless-js-android">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/signed-apk-android">Generating Signed APK</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/removing-default-permissions">Removing Default Permissions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Contributing</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/contributing">How to Contribute</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/maintainers">What to Expect from Maintainers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/building-from-source">Building React Native from source</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/testing">Testing your Changes</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/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/activityindicator">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/button">Button</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/datepickerios">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/flatlist">FlatList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/image">Image</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/inputaccessoryview">InputAccessoryView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/keyboardavoidingview">KeyboardAvoidingView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/listview">ListView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/maskedviewios">MaskedViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/navigatorios">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/picker">Picker</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/pickerios">PickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/progressbarandroid">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/progressviewios">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/refreshcontrol">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/safeareaview">SafeAreaView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/sectionlist">SectionList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/segmentedcontrolios">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/slider">Slider</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/snapshotviewios">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/statusbar">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/tabbarios">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/tabbarios-item">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/text">Text</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/toolbarandroid">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/touchablenativefeedback">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/view">View</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/viewpagerandroid">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/virtualizedlist">VirtualizedList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/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/accessibilityinfo">AccessibilityInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/alert">Alert</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/alertios">AlertIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/appregistry">AppRegistry</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/appstate">AppState</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/asyncstorage">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/backandroid">BackAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/backhandler">BackHandler</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/cameraroll">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/clipboard">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/datepickerandroid">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/geolocation">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/imageeditor">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/imagepickerios">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/imagestore">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/keyboard">Keyboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/layoutanimation">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/linking">Linking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/listviewdatasource">ListViewDataSource</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/netinfo">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/panresponder">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/permissionsandroid">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/pushnotificationios">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/settings">Settings</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/shadow-props">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/share">Share</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/statusbarios">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/systrace">Systrace</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/timepickerandroid">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/toastandroid">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/vibration">Vibration</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/vibrationios">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/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/direct-manipulation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Direct Manipulation</h1></header><article><div><span><p>It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. <code>setNativeProps</code> is the React Native equivalent to setting properties directly on a DOM node.</p>
<blockquote>
<p>Use setNativeProps when frequent re-rendering creates a performance bottleneck</p>
<p>Direct manipulation will not be a tool that you reach for frequently; you will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. <code>setNativeProps</code> is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. Before you use it, try to solve your problem with <code>setState</code> and <a href="http://facebook.github.io/react/advanced-performance.md#shouldcomponentupdate-in-action">shouldComponentUpdate</a>.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="setnativeprops-with-touchableopacity"></a><a href="#setnativeprops-with-touchableopacity" 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>setNativeProps with TouchableOpacity</h2>
<p><a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableOpacity.js">TouchableOpacity</a> uses <code>setNativeProps</code> internally to update the opacity of its child component:</p>
<pre><code class="hljs css languages- javascript">setOpacityTo(value) {
<span class="hljs-comment">// Redacted: animation related code</span>
<span class="hljs-keyword">this</span>.refs[CHILD_REF].setNativeProps({
<span class="hljs-attr">opacity</span>: value
});
},
</code></pre>
<p>This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:</p>
<pre><code class="hljs css languages- javascript">&lt;TouchableOpacity onPress={this._handlePress}&gt;
&lt;View style={styles.button}&gt;
&lt;Text&gt;Press me!&lt;/Text&gt;
&lt;/View&gt;
&lt;/TouchableOpacity&gt;
</code></pre>
<p>Let's imagine that <code>setNativeProps</code> was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever <code>onPress</code> is fired:</p>
<pre><code class="hljs css languages- javascript"><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">myButtonOpacity</span>: <span class="hljs-number">1</span>, };
}
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">TouchableOpacity</span> <span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =&gt;</span> this.setState({myButtonOpacity: 0.5})}
onPressOut={() =&gt; this.setState({myButtonOpacity: 1})}&gt;
<span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.button,</span> {<span class="hljs-attr">opacity:</span> <span class="hljs-attr">this.state.myButtonOpacity</span>}]}&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>Press me!<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">TouchableOpacity</span>&gt;</span></span>
)
}
</code></pre>
<p>This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.</p>
<p>If you look at the implementation of <code>setNativeProps</code> in <a href="https://github.com/facebook/react/blob/master/src/renderers/native/NativeMethodsMixin.js">NativeMethodsMixin.js</a> you will notice that it is a wrapper around <code>RCTUIManager.updateView</code> - this is the exact same function call that results from re-rendering - see <a href="https://github.com/facebook/react/blob/master/src/renderers/native/ReactNativeBaseComponent.js">receiveComponent in ReactNativeBaseComponent.js</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="composite-components-and-setnativeprops"></a><a href="#composite-components-and-setnativeprops" 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>Composite components and setNativeProps</h2>
<p>Composite components are not backed by a native view, so you cannot call <code>setNativeProps</code> on them. Consider this example:</p>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { Text, TouchableOpacity, View } <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">MyButton</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>{this.props.label}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span></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">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">TouchableOpacity</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">MyButton</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Press me!"</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">TouchableOpacity</span>&gt;</span>
)
}
}
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="setNativeProps with Composite Components"
data-snack-description="Example usage"
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TouchableOpacity%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20MyButton%20extends%20React.Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%3E%7Bthis.props.label%7D%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20App%20extends%20React.Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CTouchableOpacity%3E%0A%20%20%20%20%20%20%20%20%3CMyButton%20label%3D%22Press%20me!%22%20%2F%3E%0A%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20)%0A%20%20%7D%0A%7D%0A"
data-snack-platform="ios"
data-snack-preview="true"
data-snack-sdk-version="26.0.0"
style="
overflow: hidden;
background: #fafafa;
border: 1px solid rgba(0,0,0,.16);
border-radius: 4px;
height: 514px;
width: 880px;
"
></div></div></div><p>If you run this you will immediately see this error: <code>Touchable child must either be native or forward setNativeProps to a native component</code>. This occurs because <code>MyButton</code> isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with <code>createReactClass</code> you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward <code>setNativeProps</code> to a native-backed child component.</p>
<h4><a class="anchor" aria-hidden="true" id="forward-setnativeprops-to-a-child"></a><a href="#forward-setnativeprops-to-a-child" 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>Forward setNativeProps to a child</h4>
<p>All we need to do is provide a <code>setNativeProps</code> method on our component that calls <code>setNativeProps</code> on the appropriate child with the given arguments.</p>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { Text, TouchableOpacity, View } <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">MyButton</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
setNativeProps = <span class="hljs-function">(<span class="hljs-params">nativeProps</span>) =&gt;</span> {
<span class="hljs-keyword">this</span>._root.setNativeProps(nativeProps);
}
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{component</span> =&gt;</span> this._root = component} {...this.props}&gt;
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>{this.props.label}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span></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">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">TouchableOpacity</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">MyButton</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Press me!"</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">TouchableOpacity</span>&gt;</span>
)
}
}
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="Forwarding setNativeProps"
data-snack-description="Example usage"
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TouchableOpacity%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20MyButton%20extends%20React.Component%20%7B%0A%20%20setNativeProps%20%3D%20(nativeProps)%20%3D%3E%20%7B%0A%20%20%20%20this._root.setNativeProps(nativeProps)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20ref%3D%7Bcomponent%20%3D%3E%20this._root%20%3D%20component%7D%20%7B...this.props%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3E%7Bthis.props.label%7D%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20App%20extends%20React.Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CTouchableOpacity%3E%0A%20%20%20%20%20%20%20%20%3CMyButton%20label%3D%22Press%20me!%22%20%2F%3E%0A%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20)%0A%20%20%7D%0A%7D%0A"
data-snack-platform="ios"
data-snack-preview="true"
data-snack-sdk-version="26.0.0"
style="
overflow: hidden;
background: #fafafa;
border: 1px solid rgba(0,0,0,.16);
border-radius: 4px;
height: 514px;
width: 880px;
"
></div></div></div><p>You can now use <code>MyButton</code> inside of <code>TouchableOpacity</code>! A sidenote for clarity: we used the <a href="https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element">ref callback</a> syntax here, rather than the traditional string-based ref.</p>
<p>You may have noticed that we passed all of the props down to the child view using <code>{...this.props}</code>. The reason for this is that <code>TouchableOpacity</code> is actually a composite component, and so in addition to depending on <code>setNativeProps</code> on its child, it also requires that the child perform touch handling. To do this, it passes on <a href="/react-native/docs/view#onmoveshouldsetresponder">various props</a> that call back to the <code>TouchableOpacity</code> component. <code>TouchableHighlight</code>, in contrast, is backed by a native view and only requires that we implement <code>setNativeProps</code>.</p>
<h2><a class="anchor" aria-hidden="true" id="setnativeprops-to-clear-textinput-value"></a><a href="#setnativeprops-to-clear-textinput-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>setNativeProps to clear TextInput value</h2>
<p>Another very common use case of <code>setNativeProps</code> is to clear the value of a TextInput. The <code>controlled</code> prop of TextInput can sometimes drop characters when the <code>bufferDelay</code> is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use <code>setNativeProps</code> to directly manipulate the TextInput value when necessary. For example, the following code demonstrates clearing the input when you tap a button:</p>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { TextInput, Text, TouchableOpacity, View } <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">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
clearText = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
<span class="hljs-keyword">this</span>._textInput.setNativeProps({<span class="hljs-attr">text</span>: <span class="hljs-string">''</span>});
}
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{flex:</span> <span class="hljs-attr">1</span>}}&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">TextInput</span>
<span class="hljs-attr">ref</span>=<span class="hljs-string">{component</span> =&gt;</span> this._textInput = component}
style={{height: 50, flex: 1, marginHorizontal: 20, borderWidth: 1, borderColor: '#ccc'}}
/&gt;
<span class="hljs-tag">&lt;<span class="hljs-name">TouchableOpacity</span> <span class="hljs-attr">onPress</span>=<span class="hljs-string">{this.clearText}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>Clear text<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">TouchableOpacity</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
);
}
}
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="Clear text"
data-snack-description="Example usage"
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20TextInput%2C%20Text%2C%20TouchableOpacity%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20App%20extends%20React.Component%20%7B%0A%20%20clearText%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20this._textInput.setNativeProps(%7Btext%3A%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%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20%20%20ref%3D%7Bcomponent%20%3D%3E%20this._textInput%20%3D%20component%7D%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2050%2C%20flex%3A%201%2C%20marginHorizontal%3A%2020%2C%20borderWidth%3A%201%2C%20borderColor%3A%20'%23ccc'%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CTouchableOpacity%20onPress%3D%7Bthis.clearText%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%3EClear%20text%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A"
data-snack-platform="ios"
data-snack-preview="true"
data-snack-sdk-version="26.0.0"
style="
overflow: hidden;
background: #fafafa;
border: 1px solid rgba(0,0,0,.16);
border-radius: 4px;
height: 514px;
width: 880px;
"
></div></div></div><h2><a class="anchor" aria-hidden="true" id="avoiding-conflicts-with-the-render-function"></a><a href="#avoiding-conflicts-with-the-render-function" 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>Avoiding conflicts with the render function</h2>
<p>If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from <code>setNativeProps</code> will be completely ignored and overridden.</p>
<h2><a class="anchor" aria-hidden="true" id="setnativeprops-shouldcomponentupdate"></a><a href="#setnativeprops-shouldcomponentupdate" 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>setNativeProps &amp; shouldComponentUpdate</h2>
<p>By <a href="https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation">intelligently applying <code>shouldComponentUpdate</code></a> you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use <code>setState</code> instead of <code>setNativeProps</code>.</p>
<h2><a class="anchor" aria-hidden="true" id="other-native-methods"></a><a href="#other-native-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>Other native methods</h2>
<p>The methods described here are available on most of the default components provided by React Native. Note, however, that they are <em>not</em> available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.</p>
<h3><a class="anchor" aria-hidden="true" id="measurecallback"></a><a href="#measurecallback" 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>measure(callback)</h3>
<p>Determines the location on screen, width, and height of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:</p>
<ul>
<li>x</li>
<li>y</li>
<li>width</li>
<li>height</li>
<li>pageX</li>
<li>pageY</li>
</ul>
<p>Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the <a href="/react-native/docs/view#onlayout"><code>onLayout</code> prop</a> instead.</p>
<h3><a class="anchor" aria-hidden="true" id="measureinwindowcallback"></a><a href="#measureinwindowcallback" 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>measureInWindow(callback)</h3>
<p>Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:</p>
<ul>
<li>x</li>
<li>y</li>
<li>width</li>
<li>height</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="measurelayoutrelativetonativenode-onsuccess-onfail"></a><a href="#measurelayoutrelativetonativenode-onsuccess-onfail" 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>measureLayout(relativeToNativeNode, onSuccess, onFail)</h3>
<p>Like <code>measure()</code>, but measures the view relative an ancestor, specified as <code>relativeToNativeNode</code>. This means that the returned x, y are relative to the origin x, y of the ancestor view.</p>
<p>As always, to obtain a native node handle for a component, you can use <code>ReactNative.findNodeHandle(component)</code>.</p>
<h3><a class="anchor" aria-hidden="true" id="focus"></a><a href="#focus" 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>focus()</h3>
<p>Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.</p>
<h3><a class="anchor" aria-hidden="true" id="blur"></a><a href="#blur" 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>blur()</h3>
<p>Removes focus from an input or view. This is the opposite of <code>focus()</code>.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/javascript-environment">← JavaScript Environment</a><a class="docs-next button" href="/react-native/docs/colors">Color Reference →</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&#x27;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:current"],"hitsPerPage":5}
});
</script></body></html>
Reference in New Issue View Git Blame Copy Permalink