docs/element-nodes.md
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().
:::
From HTMLElement:
From Element:
childElementCountchildrenclientHeightclientLeftclientTopclientWidthfirstElementChildid
id or nativeID props.lastElementChildnextElementSiblingnodeNamenodeTypenodeValuepreviousElementSiblingscrollHeightscrollLeft
ScrollView instances can return a value other than zero.scrollTop
ScrollView instances can return a value other than zero.scrollWidthtagName
RN:, like RN:View.textContentFrom Node:
childNodesfirstChildisConnectedlastChildnextSiblingnodeNamenodeTypenodeValueownerDocument
parentElementparentNodepreviousSiblingtextContentcompareDocumentPosition()contains()getRootNode()
hasChildNodes()