Fix examples

Author: rubennorte

docs/document-nodes.md

@@ -22,12 +22,8 @@ export default function AccessingDocument() {
   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 element = ref.current;
     const doc = element.ownerDocument;
     const textInput = doc.getElementById('main-text-input');
     textInput?.focus();

docs/element-nodes.md

@@ -12,21 +12,21 @@ 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
-        style={styles.content}
-        ref={(instance) => {
-          // `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 () => {};
-        }}
-      >
+      <View ref={ref} style={styles.content}>
         <Text>Hello world!</Text>
       </View>
       <Text>{viewInfo}</Text>

docs/text-nodes.md

@@ -10,20 +10,21 @@ 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={(instance) => {
-          // `instance` is an object implementing the interface described here.
-          const textNode = instance.childNodes[0];
-          setViewInfo(
-            `Text content is: ${textNode.nodeValue}`,
-          );
-          return () => {};
-        }}
-      >
+      <Text ref={ref}>
         Hello world!
       </Text>
       <Text>{viewInfo}</Text>