1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["10895"],{42266(e,t,n){n.r(t),n.d(t,{metadata:()=>o,default:()=>h,frontMatter:()=>i,contentTitle:()=>d,toc:()=>c,assets:()=>a});var o=JSON.parse('{"id":"nodes","title":"Nodes from refs","description":"React Native apps render a native view tree that represents the UI, similar to how React DOM does on Web (the DOM tree). React Native provides imperative access to this tree via refs, which are returned by all native components (including those rendered by built-in components like View).","source":"@site/versioned_docs/version-0.82/nodes.md","sourceDirName":".","slug":"/nodes","permalink":"/docs/0.82/nodes","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/nodes.md\\"},{\\"label\\":\\"Edit page for 0.82 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.82/nodes.md\\"}]","tags":[],"version":"0.82","lastUpdatedAt":1759937642000,"frontMatter":{"id":"nodes","title":"Nodes from refs"},"sidebar":"components","previous":{"title":"\u{1F5D1}\uFE0F SafeAreaView","permalink":"/docs/0.82/safeareaview"},"next":{"title":"Element nodes","permalink":"/docs/0.82/element-nodes"}}'),s=n(62540),r=n(43023);let i={id:"nodes",title:"Nodes from refs"},d,a={},c=[];function l(e){let t={a:"a",admonition:"admonition",code:"code",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["React Native apps render a native view tree that represents the UI, similar to how React DOM does on Web (the DOM tree). React Native provides imperative access to this tree via ",(0,s.jsx)(t.a,{href:"https://react.dev/learn/manipulating-the-dom-with-refs",children:"refs"}),", which are returned by all native components (including those rendered by built-in components like ",(0,s.jsx)(t.a,{href:"/docs/next/view",children:(0,s.jsx)(t.code,{children:"View"})}),")."]}),"\n",(0,s.jsx)(t.p,{children:"React Native provides 3 types of nodes:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"/docs/next/element-nodes",children:"Elements"}),": element nodes represent native components in the native view tree (similar to ",(0,s.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element",children:"Element"})," nodes on Web). They are provided by all native components via refs."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"/docs/next/text-nodes",children:"Text"}),": text nodes represent raw text content on the tree (similar to ",(0,s.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Text",children:(0,s.jsx)(t.code,{children:"Text"})})," nodes on Web). They are not directly accessible via ",(0,s.jsx)(t.code,{children:"refs"}),", but can be accessed using methods like ",(0,s.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes",children:(0,s.jsx)(t.code,{children:"childNodes"})})," on element refs."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"/docs/next/document-nodes",children:"Documents"}),": document nodes represent a complete native view tree (similar to ",(0,s.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Document",children:(0,s.jsx)(t.code,{children:"Document"})})," nodes on Web). Like text nodes, they can only be accessed through other nodes, using properties like ",(0,s.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument",children:(0,s.jsx)(t.code,{children:"ownerDocument"})}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.p,{children:["As on Web, these nodes can be used to traverse the rendered UI tree, access layout information or execute imperative operations like ",(0,s.jsx)(t.code,{children:"focus"}),"."]}),"\n",(0,s.jsx)(t.admonition,{type:"info",children:(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Unlike on Web, these nodes do not allow mutation"})," (e.g.: ",(0,s.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild",children:(0,s.jsx)(t.code,{children:"node.appendChild"})}),"), as the tree contents are fully managed by the React renderer."]})})]})}function h(e={}){let{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},43023(e,t,n){n.d(t,{R:()=>i,x:()=>d});var o=n(63696);let s={},r=o.createContext(s);function i(e){let t=o.useContext(r);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.