Element nodes

Element nodes represent native components in the native view tree (similar to Element nodes on Web).

They are provided by all native components, and by many built-in components, via refs:

import * as React from 'react';
import { View, SafeAreaView, StyleSheet, Text } from 'react-native';

const ViewWithRefs = () => {
  const ref = React.useRef(null);
  const [viewInfo, setViewInfo] = React.useState('');

  React.useEffect(() => {
    // `element` is an object implementing the interface described here.
    const element = ref.current;
    const rect = JSON.stringify(element.getBoundingClientRect());
    setViewInfo(
      `Bounding rect is: ${rect}.\nText content is: ${element.textContent}`,
    );
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <View ref={ref} style={styles.content}>
        <Text>Hello world!</Text>
      </View>
      <Text>{viewInfo}</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    padding: 10,
    backgroundColor: 'gray',
  },
});

export default ViewWithRefs;

:::info Note that some built-in components are only a container for other components (including native components). For example, ScrollView internally renders a native scroll view and a native view, which are accessible through the ref it provides using methods like getNativeScrollRef() and getInnerViewRef(). :::

Reference

Web-compatible API

From HTMLElement:

• Properties
  • offsetHeight
  • offsetLeft
  • offsetParent
  • offsetTop
  • offsetWidth
• Methods
  • blur().
  • focus().
    • ⚠️ The options parameter is not supported.

From Element:

• Properties
  • childElementCount
  • children
  • clientHeight
  • clientLeft
  • clientTop
  • clientWidth
  • firstElementChild
  • id
    • ℹ️ Returns the value of the id or nativeID props.
  • lastElementChild
  • nextElementSibling
  • nodeName
  • nodeType
  • nodeValue
  • previousElementSibling
  • scrollHeight
  • scrollLeft
    • ⚠️ For built-in components, only ScrollView instances can return a value other than zero.
  • scrollTop
    • ⚠️ For built-in components, only ScrollView instances can return a value other than zero.
  • scrollWidth
  • tagName
    • ℹ️ Returns a normalized native component name prefixed with RN:, like RN:View.
  • textContent
• Methods
  • getBoundingClientRect()
  • hasPointerCapture()
  • setPointerCapture()
  • releasePointerCapture()

From Node:

• Properties
  • childNodes
  • firstChild
  • isConnected
  • lastChild
  • nextSibling
  • nodeName
  • nodeType
  • nodeValue
  • ownerDocument
    • ℹ️ Will return the document instance where this component was rendered.
  • parentElement
  • parentNode
  • previousSibling
  • textContent
• Methods
  • compareDocumentPosition()
  • contains()
  • getRootNode()
    • ℹ️ Will return a reference to itself if the component is not mounted.
  • hasChildNodes()

Legacy API

• measure()
• measureInWindow()
• measureLayout()
• setNativeProps()