website/versioned_docs/version-0.82/text-nodes.md
Text nodes represent raw text content on the tree (similar to Text nodes on Web). They are not directly accessible via refs, but can be accessed using methods like childNodes on element refs.
import * as React from 'react';
import { SafeAreaView, StyleSheet, Text } from 'react-native';
const TextWithRefs = () => {
const ref = React.useRef(null);
const [viewInfo, setViewInfo] = React.useState('');
React.useEffect(() => {
// `textElement` is an object implementing the interface described here.
const textElement = ref.current;
const textNode = textElement.childNodes[0];
setViewInfo(
`Text content is: ${textNode.nodeValue}`,
);
}, []);
return (
<SafeAreaView style={styles.container}>
<Text ref={ref}>
Hello world!
</Text>
<Text>{viewInfo}</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
content: {
padding: 10,
backgroundColor: 'gray',
},
});
export default TextWithRefs;
From CharacterData:
From Node:
childNodesfirstChildisConnectedlastChildnextSiblingnodeNamenodeTypenodeValueownerDocument
parentElementparentNodepreviousSiblingtextContentcompareDocumentPosition()contains()getRootNode()
hasChildNodes()