Element nodes

Important: The Vega SDK supports many of the React Native version 0.83 components and APIs. You can use the supported components and APIs in the same manner as an ordinary React Native app. This page lists a specific React Native feature supported by the Vega SDK and contains React Native V0.83 documentation from the reactnative.dev website created by Meta and other contributors and licensed under the Attribution 4.0 International License. For more information about React Native V0.83, see the React Native documentation, version 0.83. For the most current feature information, see the Release Notes.

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:

Copied to clipboard.

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;

Note: 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
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

From Node:

Properties
Methods
- compareDocumentPosition()
- contains()
- getRootNode()
  - ℹ️ Will return a reference to itself if the component is not mounted.
- hasChildNodes()

Legacy API

Last updated: May 15, 2026