react-native/docs/next/direct-manipulation.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-alpha.70">
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
<link rel="icon" href="/img/pwa/manifest-icon-512.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#20232a">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#20232a">
<link rel="apple-touch-icon" href="/img/pwa/manifest-icon-512.png">
<link rel="mask-icon" href="/img/pwa/manifest-icon-512.png" color="#06bcee">
<meta name="msapplication-TileImage" href="/img/pwa/manifest-icon-512.png">
<meta name="msapplication-TileColor" content="#20232a">
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Direct Manipulation · React Native</title><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="current"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="Direct Manipulation · React Native"><meta data-react-helmet="true" 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 data-react-helmet="true" 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 data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/next/direct-manipulation"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/next/direct-manipulation"><link rel="stylesheet" href="/styles.f56da522.css">
<link rel="stylesheet" href="/main.3de2b5ef.css">
<link rel="preload" href="/styles.9d29dd5a.js" as="script">
<link rel="preload" href="/runtime~main.b00a5634.js" as="script">
<link rel="preload" href="/main.4103a08e.js" as="script">
<link rel="preload" href="/1.7a6193e2.js" as="script">
<link rel="preload" href="/2.9b40dc51.js" as="script">
<link rel="preload" href="/1089.caa7a648.js" as="script">
<link rel="preload" href="/935f2afb.358510f7.js" as="script">
<link rel="preload" href="/17896441.b54b3e3c.js" as="script">
<link rel="preload" href="/c5f28506.18cc2d05.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<nav aria-label="Skip navigation links"><button type="button" tabindex="0" class="skipToContent_3aLp">Skip to main content</button></nav><nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg aria-label="Menu" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--light_VJaY navbar__logo"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--dark_1NF3 navbar__logo"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/next/getting-started">Next</a><ul class="dropdown__menu"><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/next/direct-manipulation">Next</a></li><li><a class="dropdown__link" href="/docs/direct-manipulation">0.64</a></li><li><a class="dropdown__link" href="/docs/0.63/direct-manipulation">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/direct-manipulation">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/direct-manipulation">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/direct-manipulation">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link navbar__link--active" href="/docs/next/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/next/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/next/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_Bh6k"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_1UDy">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_1UDy">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--light_VJaY navbar__logo"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--dark_1NF3 navbar__logo"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/next/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/next/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/next/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/next/direct-manipulation">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/direct-manipulation">0.64</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.63/direct-manipulation">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/direct-manipulation">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/direct-manipulation">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/direct-manipulation">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_1mVJ"><div class="docSidebarContainer_uPTz" role="complementary"><div class="sidebar_M-Lc"><div class="menu menu--responsive thin-scrollbar menu_tgpy"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_1e05" width="24" height="24" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/intro-react-native-components">Core Components and Native Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/intro-react">React Fundamentals</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/handling-text-input">Handling Text Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/using-a-scrollview">Using a ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/using-a-listview">Using List Views</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/troubleshooting">Troubleshooting</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/platform-specific-code">Platform Specific Code</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/more-resources">More Resources</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Environment setup</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/environment-setup">Setting up the development environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/integration-with-android-fragment">Integration with an Android Fragment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Workflow</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/running-on-device">Running On Device</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/fast-refresh">Fast Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/symbolication">Symbolicating a stack trace</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/testing-overview">Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/libraries">Using Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/typescript">Using TypeScript</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/upgrading">Upgrading to new versions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Design</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/style">Style</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/height-and-width">Height and Width</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/flexbox">Layout with Flexbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/colors">Color Reference</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Interaction</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/handling-touches">Handling Touches</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/navigation">Navigating Between Screens</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/animations">Animations</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/gesture-responder-system">Gesture Responder System</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Inclusion</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/accessibility">Accessibility</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Performance</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/performance">Performance Overview</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/ram-bundles-inline-requires">RAM Bundles and Inline Requires</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/profiling">Profiling</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/profile-hermes">Profiling with Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">JavaScript Runtime</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/javascript-environment">JavaScript Environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/timers">Timers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/hermes">Using Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Connectivity</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/network">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/security">Security</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Modules</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-modules-intro">Native Modules Intro</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-modules-android">Android Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-modules-ios">iOS Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-modules-setup">Native Modules NPM Package Setup</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Native Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/native-components-android">Android Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/native-components-ios">iOS Native UI Components</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/next/direct-manipulation">Direct Manipulation</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (Android)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/signed-apk-android">Publishing to Google Play Store</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (iOS)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/linking-libraries-ios">Linking Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/running-on-simulator-ios">Running On Simulator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/communication-ios">Communication between native and React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/app-extensions">App Extensions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/publishing-to-app-store">Publishing to Apple App Store</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1zi2"><div class="container padding-vert--lg docItemWrapper_1hMI"><div class="row"><div class="col docItemCol_2AGf"><div class="alert alert--warning margin-bottom--md" role="alert"><div>This is unreleased documentation for React Native <strong>Next</strong> version.</div><div class="margin-top--md">For up-to-date documentation, see the <strong><a href="/docs/direct-manipulation">latest version</a></strong> (0.64).</div></div><div class="docItemContainer_1tAC"><article><div><span class="badge badge--secondary">Version: Next</span></div><header><h1 class="docTitle_cWlf">Direct Manipulation</h1></header><div class="markdown"><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="https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action" target="_blank" rel="noopener noreferrer">shouldComponentUpdate</a>.</p></blockquote><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="setnativeprops-with-touchableopacity"></a>setNativeProps with TouchableOpacity<a class="hash-link" href="#setnativeprops-with-touchableopacity" title="Direct link to heading">#</a></h2><p><a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableOpacity.js" target="_blank" rel="noopener noreferrer">TouchableOpacity</a> uses <code>setNativeProps</code> internally to update the opacity of its child component:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> viewRef </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">useRef</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> setOpacityTo </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">useCallback</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">value</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token comment" style="color:#93a1a1">// Redacted: animation related code</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  viewRef</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">current</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">setNativeProps</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">    opacity</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> value</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><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><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83">&lt;</span><span class="token tag class-name" style="color:#fac863">TouchableOpacity</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">handlePress</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#657b83">&lt;</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#657b83">&lt;</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">&gt;</span><span class="token plain">Press me</span><span class="token operator" style="color:#fc929e">!</span><span class="token tag punctuation" style="color:#657b83">&lt;/</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#657b83">&lt;/</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83">&lt;/</span><span class="token tag class-name" style="color:#fac863">TouchableOpacity</span><span class="token tag punctuation" style="color:#657b83">&gt;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Let&#x27;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><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain">buttonOpacity</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> setButtonOpacity</span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">useState</span><span class="token punctuation" style="color:#657b83">(</span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#657b83">&lt;</span><span class="token tag class-name" style="color:#fac863">TouchableOpacity</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e">    </span><span class="token tag attr-name" style="color:#c5a5c5">onPressIn</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">=&gt;</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript function" style="color:#79b6f2">setButtonOpacity</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript number" style="color:#5a9bcf">0.5</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e">    </span><span class="token tag attr-name" style="color:#c5a5c5">onPressOut</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">=&gt;</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript function" style="color:#79b6f2">setButtonOpacity</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript number" style="color:#5a9bcf">1</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#657b83">&lt;</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> opacity</span><span class="token tag script language-javascript operator" style="color:#fc929e">:</span><span class="token tag script language-javascript" style="color:#fc929e"> buttonOpacity </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#657b83">&lt;</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">&gt;</span><span class="token plain">Press me</span><span class="token operator" style="color:#fc929e">!</span><span class="token tag punctuation" style="color:#657b83">&lt;/</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#657b83">&lt;/</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#657b83">&lt;/</span><span class="token tag class-name" style="color:#fac863">TouchableOpacity</span><span class="token tag punctuation" style="color:#657b83">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><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&#x27;t changed. Usually this overhead isn&#x27;t a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations&#x27; fidelity.</p><p>If you look at the implementation of <code>setNativeProps</code> in <a href="https://github.com/facebook/react-native/blob/master/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js" target="_blank" rel="noopener noreferrer">NativeMethodsMixin</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-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813" target="_blank" rel="noopener noreferrer">receiveComponent in ReactNativeBaseComponent</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="composite-components-and-setnativeprops"></a>Composite components and setNativeProps<a class="hash-link" href="#composite-components-and-setnativeprops" title="Direct link to heading">#</a></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" data-snack-name="setNativeProps with Composite Components" data-snack-description="Example usage" data-snack-code="import%20React%20from%20%22react%22%3B%0Aimport%20%7B%20Text%2C%20TouchableOpacity%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20MyButton%20%3D%20(props)%20%3D%3E%20(%0A%20%20%3CView%20style%3D%7B%7B%20marginTop%3A%2050%20%7D%7D%3E%0A%20%20%20%20%3CText%3E%7Bprops.label%7D%3C%2FText%3E%0A%20%20%3C%2FView%3E%0A)%3B%0A%0Aexport%20default%20App%20%3D%20()%20%3D%3E%20(%0A%20%20%3CTouchableOpacity%3E%0A%20%20%20%20%3CMyButton%20label%3D%22Press%20me!%22%20%2F%3E%0A%20%20%3C%2FTouchableOpacity%3E%0A)%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></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&#x27;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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="forward-setnativeprops-to-a-child"></a>Forward setNativeProps to a child<a class="hash-link" href="#forward-setnativeprops-to-a-child" title="Direct link to heading">#</a></h4><p>Since the <code>setNativeProps</code> method exists on any ref to a <code>View</code> component, it is enough to forward a ref on your custom component to one of the <code>&lt;View /&gt;</code> components that it renders. This means that a call to <code>setNativeProps</code> on the custom component will have the same effect as if you called <code>setNativeProps</code> on the wrapped <code>View</code> component itself.</p><div class="snack-player" data-snack-name="Forwarding setNativeProps" data-snack-description="Example usage" data-snack-code="import%20React%20from%20%22react%22%3B%0Aimport%20%7B%20Text%2C%20TouchableOpacity%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20MyButton%20%3D%20React.forwardRef((props%2C%20ref)%20%3D%3E%20(%0A%20%20%3CView%20%7B...props%7D%20ref%3D%7Bref%7D%20style%3D%7B%7B%20marginTop%3A%2050%20%7D%7D%3E%0A%20%20%20%20%3CText%3E%7Bprops.label%7D%3C%2FText%3E%0A%20%20%3C%2FView%3E%0A))%3B%0A%0Aexport%20default%20App%20%3D%20()%20%3D%3E%20(%0A%20%20%3CTouchableOpacity%3E%0A%20%20%20%20%3CMyButton%20label%3D%22Press%20me!%22%20%2F%3E%0A%20%20%3C%2FTouchableOpacity%3E%0A)%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><p>You can now use <code>MyButton</code> inside of <code>TouchableOpacity</code>!</p><p>You may have noticed that we passed all of the props down to the child view using <code>{...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="/docs/next/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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="setnativeprops-to-clear-textinput-value"></a>setNativeProps to clear TextInput value<a class="hash-link" href="#setnativeprops-to-clear-textinput-value" title="Direct link to heading">#</a></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" data-snack-name="Clear text" data-snack-description="Example usage" data-snack-code="import%20React%20from%20%22react%22%3B%0Aimport%20%7B%20useCallback%2C%20useRef%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20StyleSheet%2C%20TextInput%2C%20Text%2C%20TouchableOpacity%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20inputRef%20%3D%20useRef()%3B%0A%20%20const%20clearText%20%3D%20useCallback(()%20%3D%3E%20%7B%0A%20%20%20%20inputRef.current.setNativeProps(%7B%20text%3A%20%22%22%20%7D)%3B%0A%20%20%7D%2C%20%5B%5D)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CTextInput%20ref%3D%7BinputRef%7D%20style%3D%7Bstyles.input%7D%20%2F%3E%0A%20%20%20%20%20%20%3CTouchableOpacity%20onPress%3D%7BclearText%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3EClear%20text%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%7D%2C%0A%20%20input%3A%20%7B%0A%20%20%20%20height%3A%2050%2C%0A%20%20%20%20width%3A%20200%2C%0A%20%20%20%20marginHorizontal%3A%2020%2C%0A%20%20%20%20borderWidth%3A%201%2C%0A%20%20%20%20borderColor%3A%20%22%23ccc%22%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20App%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="avoiding-conflicts-with-the-render-function"></a>Avoiding conflicts with the render function<a class="hash-link" href="#avoiding-conflicts-with-the-render-function" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="setnativeprops--shouldcomponentupdate"></a>setNativeProps &amp; shouldComponentUpdate<a class="hash-link" href="#setnativeprops--shouldcomponentupdate" title="Direct link to heading">#</a></h2><p>By <a href="https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation" target="_blank" rel="noopener noreferrer">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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="other-native-methods"></a>Other native methods<a class="hash-link" href="#other-native-methods" title="Direct link to heading">#</a></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&#x27;t directly backed by a native view. This will generally include most components that you define in your own app.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="measurecallback"></a>measure(callback)<a class="hash-link" href="#measurecallback" title="Direct link to heading">#</a></h3><p>Determines the location on screen, width, and height in the viewport 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 and you don&#x27;t need <code>pageX</code> and <code>pageY</code>, consider using the <a href="/docs/next/view#onlayout"><code>onLayout</code></a> property instead.</p><p>Also the width and height returned by <code>measure()</code> are the width and height of the component in the viewport. If you need the actual size of the component, consider using the <a href="/docs/next/view#onlayout"><code>onLayout</code></a> property instead.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="measureinwindowcallback"></a>measureInWindow(callback)<a class="hash-link" href="#measureinwindowcallback" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="measurelayoutrelativetonativecomponentref-onsuccess-onfail"></a>measureLayout(relativeToNativeComponentRef, onSuccess, onFail)<a class="hash-link" href="#measurelayoutrelativetonativecomponentref-onsuccess-onfail" title="Direct link to heading">#</a></h3><p>Like <code>measure()</code>, but measures the view relative to an ancestor, specified with <code>relativeToNativeComponentRef</code> reference. This means that the returned coordinates are relative to the origin <code>x</code>, <code>y</code> of the ancestor view.</p><blockquote><p>Note: This method can also be called with a <code>relativeToNativeNode</code> handler (instead of reference), but this variant is deprecated.</p></blockquote><div class="snack-player" data-snack-name="measureLayout example" data-snack-description="Example usage" data-snack-code="import%20React%2C%20%7B%20useEffect%2C%20useRef%2C%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Text%2C%20View%2C%20StyleSheet%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20textContainerRef%20%3D%20useRef(null)%3B%0A%20%20const%20textRef%20%3D%20useRef(null)%3B%0A%20%20const%20%5Bmeasure%2C%20setMeasure%5D%20%3D%20useState(null)%3B%0A%0A%20%20useEffect(()%20%3D%3E%20%7B%0A%20%20%20%20if%20(textRef.current%20%26%26%20textContainerRef.current)%20%7B%0A%20%20%20%20%20%20textRef.current.measureLayout(%0A%20%20%20%20%20%20%20%20textContainerRef.current%2C%0A%20%20%20%20%20%20%20%20(left%2C%20top%2C%20width%2C%20height)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20setMeasure(%7B%20left%2C%20top%2C%20width%2C%20height%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20)%3B%0A%20%20%20%20%7D%0A%20%20%7D%2C%20%5Bmeasure%5D)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20ref%3D%7BtextContainerRef%7D%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.textContainer%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CText%20ref%3D%7BtextRef%7D%3E%0A%20%20%20%20%20%20%20%20%20%20Where%20am%20I%3F%20(relative%20to%20the%20text%20container)%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.measure%7D%3E%0A%20%20%20%20%20%20%20%20%7BJSON.stringify(measure)%7D%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%7D%2C%0A%20%20textContainer%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20%22%2361dafb%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20padding%3A%2012%2C%0A%20%20%7D%2C%0A%20%20measure%3A%20%7B%0A%20%20%20%20textAlign%3A%20%22center%22%2C%0A%20%20%20%20padding%3A%2012%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20App%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="android,ios" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="focus"></a>focus()<a class="hash-link" href="#focus" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="blur"></a>blur()<a class="hash-link" href="#blur" title="Direct link to heading">#</a></h3><p>Removes focus from an input or view. This is the opposite of <code>focus()</code>.</p></div></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/../docs/direct-manipulation.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 40 40" class="iconEdit_2Hwv"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2020-09-07T07:06:26.000Z" class="docLastUpdatedAt_1gIo">9/7/2020</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/next/native-components-ios"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« iOS Native UI Components</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/next/headless-js-android"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Headless JS »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_1zTD thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#setnativeprops-with-touchableopacity" class="table-of-contents__link">setNativeProps with TouchableOpacity</a></li><li><a href="#composite-components-and-setnativeprops" class="table-of-contents__link">Composite components and setNativeProps</a></li><li><a href="#setnativeprops-to-clear-textinput-value" class="table-of-contents__link">setNativeProps to clear TextInput value</a></li><li><a href="#avoiding-conflicts-with-the-render-function" class="table-of-contents__link">Avoiding conflicts with the render function</a></li><li><a href="#setnativeprops--shouldcomponentupdate" class="table-of-contents__link">setNativeProps &amp; shouldComponentUpdate</a></li><li><a href="#other-native-methods" class="table-of-contents__link">Other native methods</a><ul><li><a href="#measurecallback" class="table-of-contents__link">measure(callback)</a></li><li><a href="#measureinwindowcallback" class="table-of-contents__link">measureInWindow(callback)</a></li><li><a href="#measurelayoutrelativetonativecomponentref-onsuccess-onfail" class="table-of-contents__link">measureLayout(relativeToNativeComponentRef, onSuccess, onFail)</a></li><li><a href="#focus" class="table-of-contents__link">focus()</a></li><li><a href="#blur" class="table-of-contents__link">blur()</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who&#x27;s using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_3cAK"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div class="footer__copyright">Copyright © 2021 Facebook, Inc.</div></div></div></footer></div>
<script src="/styles.9d29dd5a.js"></script>
<script src="/runtime~main.b00a5634.js"></script>
<script src="/main.4103a08e.js"></script>
<script src="/1.7a6193e2.js"></script>
<script src="/2.9b40dc51.js"></script>
<script src="/1089.caa7a648.js"></script>
<script src="/935f2afb.358510f7.js"></script>
<script src="/17896441.b54b3e3c.js"></script>
<script src="/c5f28506.18cc2d05.js"></script>
</body>
</html>