Address feedback about examples and clarify Text component refs

Author: rubennorte

docs/document-nodes.md

@@ -7,29 +7,34 @@ Document nodes represent a complete native view tree. Apps using native navigati
 
 ```SnackPlayer ext=js&name=Document%20instance%20example
 import * as React from 'react';
-import {Text, View} from 'react-native';
+import {Text, TextInput, View} from 'react-native';
 
-function countNodes(node) {
-  let count = 1;
-  for (const child of node.childNodes) {
-    count += countNodes(child);
-  }
-  return count;
+function MyComponent(props) {
+  return (
+    <View ref={props.ref}>
+      <Text>Start typing below</Text>
+      <TextInput id="main-text-input" />
+    </View>
+  )
 }
 
 export default function AccessingDocument() {
-  const [nodeCount, setNodeCount] = React.useState(0);
+  const ref = React.useRef(null);
+
+  React.useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+
+    // Get the main text input in the screen and focus it after initial load.
+    const doc = element.ownerDocument;
+    const textInput = doc.getElementById('main-text-input');
+    textInput?.focus();
+  }, []);
 
   return (
-      <View ref={instance => {
-        if (instance != null) {
-          // or instance.getRootNode()
-          const document = instance.ownerDocument;
-          setNodeCount(countNodes(document));
-        }
-      }}>
-        <Text>Number of nodes in tree: {nodeCount}</Text>
-      </View>
+    <MyComponent ref={ref} />
   );
 }
 ```

docs/element-nodes.md

@@ -19,14 +19,12 @@ const ViewWithRefs = () => {
       <View
         style={styles.content}
         ref={(instance) => {
-          // `instance` is an object implementing the interface described here,
-          // or `null` when the component is unmounted.
-          if (instance != null) {
-            const rect = JSON.stringify(instance.getBoundingClientRect());
-            setViewInfo(
-              `Bounding rect is: ${rect}.\nText content is: ${instance.textContent}`,
-            );
-          }
+          // `instance` is an object implementing the interface described here.
+          const rect = JSON.stringify(instance.getBoundingClientRect());
+          setViewInfo(
+            `Bounding rect is: ${rect}.\nText content is: ${instance.textContent}`,
+          );
+          return () => {};
         }}
       >
         <Text>Hello world!</Text>

docs/text-nodes.md

@@ -16,14 +16,12 @@ const TextWithRefs = () => {
     <SafeAreaView style={styles.container}>
       <Text
         ref={(instance) => {
-          // `instance` is an object implementing the interface described here,
-          // or `null` when the component is unmounted.
-          if (instance != null) {
-            const textNode = instance.childNodes[0];
-            setViewInfo(
-              `Text content is: ${textNode.nodeValue}`,
-            );
-          }
+          // `instance` is an object implementing the interface described here.
+          const textNode = instance.childNodes[0];
+          setViewInfo(
+            `Text content is: ${textNode.nodeValue}`,
+          );
+          return () => {};
         }}
       >
         Hello world!

docs/text.md

@@ -642,6 +642,8 @@ When the scroll view is disabled, this defines how far your touch may move off o
 
 A ref setter that will be assigned an [element node](element-nodes) when mounted.
 
+Note that `Text` components don't provide text nodes, the same way that paragraph elements (`<p>`) on Web are element nodes instead of text nodes. Text nodes can be found as their child nodes instead.
+
 ---
 
 ### `role`